Menu
Blog 53
<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="w-full max-w-lg">
<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="border border-border-primary">
<a href="#" class="w-full max-w-full"
><div class="w-full overflow-hidden">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image"
class="aspect-video size-full object-cover"
/></div
></a>
<div class="px-5 py-6 md:p-6">
<a href="#" class="mb-2 flex text-sm font-semibold">Category</a
><a href="#" class="mb-2 block max-w-full"
><h5 class="text-xl font-bold md:text-2xl">Blog title heading will go here</h5></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
eros.
</p>
<div class="mt-6 flex items-center">
<div class="mr-4 shrink-0">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder avatar"
class="size-12 min-h-12 min-w-12 rounded-full object-cover"
/>
</div>
<div>
<h6 class="text-sm font-semibold">Full name</h6>
<div class="flex items-center">
<p class="text-sm">11 Jan 2022</p>
<span class="mx-2">•</span>
<p class="text-sm">5 min read</p>
</div>
</div>
</div>
</div>
</div>
<div class="border border-border-primary">
<a href="#" class="w-full max-w-full"
><div class="w-full overflow-hidden">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
alt="Relume placeholder image"
class="aspect-video size-full object-cover"
/></div
></a>
<div class="px-5 py-6 md:p-6">
<a href="#" class="mb-2 flex text-sm font-semibold">Category</a
><a href="#" class="mb-2 block max-w-full"
><h5 class="text-xl font-bold md:text-2xl">Blog title heading will go here</h5></a
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
eros.
</p>
<div class="mt-6 flex items-center">
<div class="mr-4 shrink-0">
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Relume placeholder avatar"
class="size-12 min-h-12 min-w-12 rounded-full object-cover"
/>
</div>
<div>
<h6 class="text-sm font-semibold">Full name</h6>
<div class="flex items-center">
<p class="text-sm">11 Jan 2022</p>
<span class="mx-2">•</span>
<p class="text-sm">5 min read</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-end">
<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 mt-10 md:mt-14 lg:mt-16"
title="View all"
>
View all
</button>
</div>
</div>
</section>
import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
type ImageProps = {
src: string;
alt?: string;
};
type BlogPost = {
url: string;
image: ImageProps;
category: string;
readTime: string;
title: string;
description: string;
avatar: ImageProps;
fullName: string;
date: string;
};
type Props = {
tagline: string;
heading: string;
description: string;
button: ButtonProps;
blogPosts: BlogPost[];
};
export type Blog53Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Blog53 = (props: Blog53Props) => {
const { tagline, heading, description, button, blogPosts } = {
...Blog53Defaults,
...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="w-full max-w-lg">
<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="border border-border-primary">
<a href={post.url} className="w-full max-w-full">
<div className="w-full overflow-hidden">
<img
src={post.image.src}
alt={post.image.alt}
className="aspect-video size-full object-cover"
/>
</div>
</a>
<div className="px-5 py-6 md:p-6">
<a href={post.url} className="mb-2 flex text-sm font-semibold">
{post.category}
</a>
<a href={post.url} className="mb-2 block max-w-full">
<h5 className="text-xl font-bold md:text-2xl">{post.title}</h5>
</a>
<p>{post.description}</p>
<div className="mt-6 flex items-center">
<div className="mr-4 shrink-0">
<img
src={post.avatar.src}
alt={post.avatar.alt}
className="size-12 min-h-12 min-w-12 rounded-full object-cover"
/>
</div>
<div>
<h6 className="text-sm font-semibold">{post.fullName}</h6>
<div className="flex items-center">
<p className="text-sm">{post.date}</p>
<span className="mx-2">•</span>
<p className="text-sm">{post.readTime}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
<div className="flex items-center justify-end">
<Button {...button} className="mt-10 md:mt-14 lg:mt-16">
{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.",
avatar: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Relume placeholder avatar",
},
fullName: "Full name",
date: "11 Jan 2022",
};
export const Blog53Defaults: 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)
