Blog Card Grid
Grid of blog post cards
Overview
Renders an array of BlogPost items in a responsive grid. Supports a standard card style (with author avatar and category badge) and a minimal style activated by readMoreLabel. An optional section heading with a link can be placed above the grid.
Usage
import { BlogCardGrid } from "@leanicon/web-builder-library";Default (3 columns)
Standard card style with image, category badge, excerpt, and author avatar.
- TutorialGetting Started with React in 2024
A comprehensive guide to starting your React journey, covering the latest patterns.
JDJane Doe - TypeScriptAdvanced TypeScript Patterns
Explore conditional types, mapped types, and template literal types for better code.
JSJohn Smith - CSSMastering CSS Grid Layout
From basic concepts to advanced techniques for complex, responsive layouts.
AJAlice Johnson
2 columns
- JDJane Doe
- JSJohn Smith
Without images
Cards without the image prop skip the image area entirely.
- JDJane Doe
- JSJohn Smith
- AJAlice Johnson
With heading and header link
Use heading and headerLink to add a section title with a "view all" link above the grid.
The latest news
See more on the blog- JDJane Doe
- JSJohn Smith
- AJAlice Johnson
Read more style
Setting readMoreLabel switches cards to a minimal layout: muted background, no border, author + date inline, no excerpt, and a "Read more" footer link with arrow.
With heading + read more style
Combines heading, headerLink, and readMoreLabel for a complete blog section.
The latest news
See more on the blogSharp corners
Set corners="sharp" to remove border-radius from cards and images.
The latest news
See more on the blogDark mode
- JDJane Doe
- JSJohn Smith
- AJAlice Johnson
Dark mode (read more style)
The latest news
See more on the blogProps
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Array of blog post objects (required) |
|
|
| Number of grid columns |
|
| — | Section heading above the grid |
|
| — | "View all" link next to the heading |
|
| — | Switches cards to minimal style with a read more footer |
|
|
| Card and image border-radius |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
BlogPost
Prop | Type | Description |
|---|---|---|
|
| Post title (linked to |
|
| Short description (hidden in read more style) |
|
| Cover image with hover zoom effect |
|
| Published date string |
|
| Author info — avatar falls back to initials |
|
| Category badge (hidden in read more style) |
|
| Link URL for the post |
Notes
- When
readMoreLabelis provided, the card style changes: no border, muted background, no excerpt, no category badge, no avatar — replaced by inline author + date and a "Read more" footer link. author.avataris optional; the fallback shows the author's initials.- Images have a
hover:scale-105zoom transition on hover. - Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
posts | BlogPost[] | — | Yes | |
featuredPost | BlogPost | — | No | |
columns | enum | 3 | No | |
colorScheme | enum | — | No | |
className | string | — | No | |
heading | string | — | No | |
headerLink | { label: string; href: string; } | — | No | |
readMoreLabel | string | — | No | |
corners | enum | rounded | No |