Blog Feed
Blog post feed list
Overview
Displays one featured post in a prominent two-column layout (image + text), followed by a three-column grid of secondary posts. Both sections share the same BlogPost type from BlogCardGrid.
Usage
import { BlogFeed } from "@leanicon/web-builder-library";Default
Featured post with image on the left, three secondary posts below in a responsive grid.
- LTLeanIcon Team —Chess champion joins as brand ambassadorCompanyRead full article
- LTLeanIcon Team —Introducing Model Vault for secure inferenceProductRead full article
- LLLeanIcon Labs Team —How open research turns early-career researchers into global leadersResearchRead full article
Sharp corners
Set corners="sharp" to remove border-radius from all images.
- LTLeanIcon Team —Chess champion joins as brand ambassadorCompanyRead full article
- LTLeanIcon Team —Introducing Model Vault for secure inferenceProductRead full article
- LLLeanIcon Labs Team —How open research turns early-career researchers into global leadersResearchRead full article
Custom read-more label
Override the link text via readMoreLabel.
- LTLeanIcon Team —Chess champion joins as brand ambassadorCompanyContinue reading
- LTLeanIcon Team —Introducing Model Vault for secure inferenceProductContinue reading
- LLLeanIcon Labs Team —How open research turns early-career researchers into global leadersResearchContinue reading
Featured only
When posts is empty, only the featured hero section is rendered.
Without images
Posts render without an image when the image field is omitted. The featured post text spans the full width.
- LTLeanIcon Team —Chess champion joins as brand ambassadorCompanyRead full article
- LTLeanIcon Team —Introducing Model Vault for secure inferenceProductRead full article
Without categories
Category badges are hidden when category is omitted from posts.
- LTLeanIcon Team —Chess champion joins as brand ambassadorRead full article
- LTLeanIcon Team —Introducing Model Vault for secure inferenceRead full article
Without author avatars
When avatar is omitted, the AvatarFallback renders initials derived from the author name.
- AJAlice Johnson —Chess champion joins as brand ambassadorCompanyRead full article
- BSBob Smith —Introducing Model Vault for secure inferenceProductRead full article
Dark mode
- LTLeanIcon Team —Chess champion joins as brand ambassadorCompanyRead full article
- LTLeanIcon Team —Introducing Model Vault for secure inferenceProductRead full article
- LLLeanIcon Labs Team —How open research turns early-career researchers into global leadersResearchRead full article
Sharp corners — dark mode
Combines corners="sharp" with colorScheme="dark".
- LTLeanIcon Team —Chess champion joins as brand ambassadorCompanyRead full article
- LTLeanIcon Team —Introducing Model Vault for secure inferenceProductRead full article
- LLLeanIcon Labs Team —How open research turns early-career researchers into global leadersResearchRead full article
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | The prominent hero post (required) |
|
| — | Secondary posts shown in the grid (required) |
|
|
| Text for the read-more link on every post |
|
|
| Image border-radius style |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
BlogPost
Prop | Type | Description |
|---|---|---|
|
| Post title — rendered as a link to |
|
| Short summary (used for a11y / SEO, not displayed) |
|
| Optional hero image with |
|
| Formatted publication date |
|
| Author name and optional avatar |
|
| Optional category badge |
|
| Link destination for the post |
Notes
BlogPostis the same type used byBlogCardGrid— import fromblog-card-grid.- When
imageis omitted from the featured post, the text column spans the full width. - Author initials are derived from the first letter of each word in the name (max 2 characters).
- Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
featuredPost | BlogPost | — | Yes | |
posts | BlogPost[] | — | Yes | |
readMoreLabel | string | Read full article | No | |
corners | enum | rounded | No | |
colorScheme | enum | — | No | |
className | string | — | No |