Blog 12

Pro

A blog preview block with a header, three article cards in a 3-column layout, and a "View All Blogs" button. Each card includes an image, title, summary, author avatar, and read time.

Figma

Shadcn UI Blog Block

The Blog12 component is a shadcn block designed to showcase a series of blog posts in a visually appealing grid layout. It emphasizes key details of each blog post, such as titles, summary snippets, author information, and read-time estimates, allowing users to quickly discern the content and relevance of each article. The component is particularly focused on providing a centralized area for users to explore and engage with blogs, encouraging discovery through a consistent design.

In detail, the Blog12 component features a clean and curated layout that organizes blog content into a grid, customizable to display in different column configurations. Each blog post is presented with a visually rich card design that incorporates imagery, brief descriptions, and metadata—such as author avatars and estimated reading times—into compact information blocks. The use of shadcn ui elements, like badges and separators, contributes to both function and style, offering an easy-to-navigate interface. A call-to-action button at the bottom invites users to explore more content, enhancing user engagement.

Dependencies

PackageType
lucide-reactNPM
avatar
@shadcn
Registry
badge
@shadcn
Registry
button
@shadcn
Registry
separator
@shadcn
Registry