Blog sections
Blog building blocks: Blog post card (vertical, horizontal, featured, text), Blog section (grid, list, featured + grid), Blog page header with categories and search, and the subscribe card. Figma: Blog sections.
{ BlogSection, BlogPostCard, BlogPageHeader } from "@pepulux/ui"Blog page header
Category tabs use the Tabs atom; search uses Input.
Resources and insights
The latest industry news, interviews and technologies.
Section — grid
Latest blog posts
Tools, tips and stories from the team.
How design systems scale with your team
Practical patterns for keeping a growing product coherent.
Shipping accessible components by default
What we learned making every block keyboard and screen-reader friendly.
A tour of the new marketing blocks
Headers, heroes, pricing and more — composed from the same atoms.
Section — featured + grid (muted)
From the blog
How design systems scale with your team
Practical patterns for keeping a growing product coherent.
Shipping accessible components by default
What we learned making every block keyboard and screen-reader friendly.
A tour of the new marketing blocks
Headers, heroes, pricing and more — composed from the same atoms.
Theming multiple brands from one library
Token strategies that let one codebase serve many brands.
Section — list
Recent articles
How design systems scale with your team
Practical patterns for keeping a growing product coherent.
Shipping accessible components by default
What we learned making every block keyboard and screen-reader friendly.
A tour of the new marketing blocks
Headers, heroes, pricing and more — composed from the same atoms.
Post card layouts and subscribe card
How design systems scale with your team
Practical patterns for keeping a growing product coherent.
Shipping accessible components by default
What we learned making every block keyboard and screen-reader friendly.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| posts | BlogPost[] | — | { title; excerpt?; category?; image?; href?; date?; readTime?; author? } |
| layout (BlogSection) | "grid" | "list" | "featured-grid" | "grid" | Section layout |
| layout (BlogPostCard) | "vertical" | "horizontal" | "featured" | "text" | "vertical" | Card layout |
| categories / search (BlogPageHeader) | string[] / boolean | — | Tabs and search field |
| tone | "light" | "muted" | "brand" | "light" | Background tone — Figma Light / Muted / Brand |