Three-column responsive grid of blog cards featuring author avatars, tag badges, and hover zoom effects. Clean card design with date and read time metadata.
Three-column card grid for a blog index or archive page: every card zooms its cover image on hover, carries individually clickable tag badges, and closes with an author avatar next to a date/read-time meta line.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/blog3"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/blog3"This installs the block to components/beste/block/blog3.tsx, plus the badge and avatar shadcn/ui primitives it uses for tags and author avatars.
The installed file exports blog3Demo alongside the block: the exact props behind the preview above. Spread it to get a working blog grid in one line.
import { Blog3, blog3Demo } from "@/components/beste/block/blog3";
export default function BlogIndexPage() {
return <Blog3 {...blog3Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Blog3 } from "@/components/beste/block/blog3";
export default function BlogIndexPage() {
return (
<Blog3
badge={{ label: "Blog" }}
heading="Latest articles"
description="Notes on shipping product."
posts={[
{
image: {
src: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&fit=crop",
alt: "Code on screen",
},
title: "Shipping faster with feature flags",
summary: "How we roll out risky changes without breaking prod.",
date: "March 2, 2026",
readTime: "6 min read",
author: { name: "Sam Rivera", title: "Staff Engineer" },
tags: [{ label: "Engineering", href: "/blog/tag/engineering" }],
href: "/blog/feature-flags",
},
{
image: {
src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&fit=crop",
alt: "Analytics dashboard",
},
title: "Reading a funnel report",
summary: "A short primer on where users actually drop off.",
date: "February 20, 2026",
readTime: "4 min read",
href: "/blog/funnel-report",
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Section eyebrow badge |
heading | string | – | Section heading |
description | string | – | Section intro text |
posts | BlogPost[] | [] | Cards rendered in the grid |
className | string | – | Extra classes for the outer <section> |
type BlogPost = {
image: { src: string; alt: string };
title: string;
summary: string;
date?: string;
readTime?: string;
author?: Author;
tags?: Tag[];
href?: string;
};
type Author = {
name: string;
title?: string;
avatar?: { src: string; alt: string };
href?: string;
};
type Tag = { label: string; href?: string };sm:grid-cols-2 lg:grid-cols-3; each card's cover image scales to 105% on hover via a group/blog3 wrapper.Link, not a single combined tag row; a post with no tags simply skips that block.author.name) via AvatarFallback when author.avatar is missing.sm and xl breakpoints (visible on mobile, hidden on tablet/small desktop, visible again on large desktops) via block sm:hidden xl:block.line-clamp-2) no matter how long the source text is.blog5
Vertical stack of horizontal blog cards with left-aligned thumbnails. Features calendar and clock icons for metadata, author titles, and tag badges.
blog22
Vertically stacked blog cards with 2:1 aspect ratio images. Full article summaries with author avatars and read more buttons. Long-form content showcase.
blog43
A blog listing with an eyebrow over a hairline rule, a two-column heading, and three linked article cards with a hover-zoom image, a monospace category, a title, an excerpt, and byline.
blog30
Grid of image cards with gradient overlays. Summaries expand on hover with smooth max-height animation. Titles always visible with white text.
blog10
Large alternating left-right blog cards with full article summaries. Image and content switch sides for visual variety. Read more buttons included.
blog14
Four-column grid mixing blog cards with an integrated newsletter signup card. Email input and subscribe button embedded in the layout.