Menu
Blog 46
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div class="mb-12 md:mb-18 lg:mb-20">
<div class="mx-auto w-full max-w-lg text-center">
<p class="mb-3 font-semibold md:mb-4">Blog</p>
<h2 class="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
Short heading goes here
</h2>
<p class="md:text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="grid grid-cols-1 gap-y-12 md:grid-cols-2 md:gap-x-8 lg:gap-x-12">
<div class="flex size-full flex-col items-center justify-start">
<a href="#" class="mb-5 block sm:mb-6"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image"
class="aspect-video size-full object-cover"
/></a>
<div class="rb-4 mb-3 flex w-full items-center justify-start sm:mb-4">
<p class="mr-4 bg-background-secondary px-2 py-1 text-sm font-semibold">Category</p>
<p class="text-sm font-semibold">5 min read</p>
</div>
<div class="flex w-full flex-col items-start justify-start">
<a class="mb-2" href="#"
><h2 class="text-xl font-bold md:text-2xl">Blog title heading will go here</h2></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
eros.
</p>
<button
class="focus-visible:ring-border-primary whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 text-text-primary gap-2 p-0 mt-5 flex items-center justify-center gap-x-2 sm:mt-6"
title="Read more"
>
Read more<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
<div class="flex size-full flex-col items-center justify-start">
<a href="#" class="mb-5 block sm:mb-6"
><img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image"
class="aspect-video size-full object-cover"
/></a>
<div class="rb-4 mb-3 flex w-full items-center justify-start sm:mb-4">
<p class="mr-4 bg-background-secondary px-2 py-1 text-sm font-semibold">Category</p>
<p class="text-sm font-semibold">5 min read</p>
</div>
<div class="flex w-full flex-col items-start justify-start">
<a class="mb-2" href="#"
><h2 class="text-xl font-bold md:text-2xl">Blog title heading will go here</h2></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
eros.
</p>
<button
class="focus-visible:ring-border-primary whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 text-text-primary gap-2 p-0 mt-5 flex items-center justify-center gap-x-2 sm:mt-6"
title="Read more"
>
Read more<svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
></path>
</svg>
</button>
</div>
</div>
</div>
<div class="mt-12 flex items-center justify-center md:mt-20">
<button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-6 py-3"
title="View all"
>
View all
</button>
</div>
</div>
</section>
import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import { RxChevronRight } from "react-icons/rx";
type ImageProps = {
src: string;
alt?: string;
};
type BlogPost = {
url: string;
image: ImageProps;
category: string;
readTime: string;
title: string;
description: string;
button: ButtonProps;
};
type Props = {
tagline: string;
heading: string;
description: string;
blogPosts: BlogPost[];
button: ButtonProps;
};
export type Blog46Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Blog46 = (props: Blog46Props) => {
const { tagline, heading, description, button, blogPosts } = {
...Blog46Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container">
<div className="mb-12 md:mb-18 lg:mb-20">
<div className="mx-auto w-full max-w-lg text-center">
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
<h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
{heading}
</h2>
<p className="md:text-md">{description}</p>
</div>
</div>
<div className="grid grid-cols-1 gap-y-12 md:grid-cols-2 md:gap-x-8 lg:gap-x-12">
{blogPosts.map((post, index) => (
<div key={index} className="flex size-full flex-col items-center justify-start">
<a href={post.url} className="mb-5 block sm:mb-6">
<img
src={post.image.src}
alt={post.image.alt}
className="aspect-video size-full object-cover"
/>
</a>
<div className="rb-4 mb-3 flex w-full items-center justify-start sm:mb-4">
<p className="mr-4 bg-background-secondary px-2 py-1 text-sm font-semibold">
{post.category}
</p>
<p className="text-sm font-semibold">{post.readTime}</p>
</div>
<div className="flex w-full flex-col items-start justify-start">
<a className="mb-2" href={post.url}>
<h2 className="text-xl font-bold md:text-2xl">{post.title}</h2>
</a>
<p>{post.description}</p>
<Button
{...post.button}
className="mt-5 flex items-center justify-center gap-x-2 sm:mt-6"
>
{post.button.title}
</Button>
</div>
</div>
))}
</div>
<div className="mt-12 flex items-center justify-center md:mt-20">
<Button {...button}>{button.title}</Button>
</div>
</div>
</section>
);
};
const blogPost: BlogPost = {
url: "#",
image: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg",
alt: "Relume placeholder image",
},
category: "Category",
readTime: "5 min read",
title: "Blog title heading will go here",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
button: { title: "Read more", variant: "link", size: "link", iconRight: <RxChevronRight /> },
};
export const Blog46Defaults: Props = {
tagline: "Blog",
heading: "Short heading goes here",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
button: { title: "View all", variant: "secondary" },
blogPosts: [blogPost, blogPost],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
