Content
Long-form content: Blog post page header (centered, split, image below), Content item blocks (heading, paragraph, quote, image, list, callout) and Content section layouts (article, with table of contents, with author sidebar). Figma: Content section, Content item and Blog post page header.
{ ContentSection, BlogPostPageHeader, ContentItem } from "@pepulux/ui"Blog post page header — centered
How design systems scale with your team
Practical patterns for keeping a growing product coherent.
Blog post page header — split and image below
Shipping accessible components by default
What we learned making every block keyboard friendly.
A tour of the new marketing blocks
Content section — article
Great products feel consistent. That consistency comes from a shared language — tokens, atoms and blocks that every team can reach for.
Start with solid foundations
Before building pages, agree on colour, type and spacing. Once the foundations are in place, components inherit them automatically.
Compose, don't copy
Atoms combine into molecules, molecules into sections, and sections into pages. Every layer reuses the one below it.
“A design system isn't a project. It's a product serving products.”
- Reuse existing components before writing new markup
- Expose Figma variants as props
- Document every block with live previews
Pro tip
Keep behaviour in hooks and presentation in components so skins can change without touching logic.
Ship and iterate
Release early, collect feedback from the teams using the blocks, and refine. A living library is a healthy library.
Content section — with table of contents
Great products feel consistent. That consistency comes from a shared language — tokens, atoms and blocks that every team can reach for.
Start with solid foundations
Before building pages, agree on colour, type and spacing. Once the foundations are in place, components inherit them automatically.
Compose, don't copy
Atoms combine into molecules, molecules into sections, and sections into pages. Every layer reuses the one below it.
“A design system isn't a project. It's a product serving products.”
- Reuse existing components before writing new markup
- Expose Figma variants as props
- Document every block with live previews
Pro tip
Keep behaviour in hooks and presentation in components so skins can change without touching logic.
Ship and iterate
Release early, collect feedback from the teams using the blocks, and refine. A living library is a healthy library.
Content section — with author sidebar
Great products feel consistent. That consistency comes from a shared language — tokens, atoms and blocks that every team can reach for.
Start with solid foundations
Before building pages, agree on colour, type and spacing. Once the foundations are in place, components inherit them automatically.
Compose, don't copy
Atoms combine into molecules, molecules into sections, and sections into pages. Every layer reuses the one below it.
“A design system isn't a project. It's a product serving products.”
- Reuse existing components before writing new markup
- Expose Figma variants as props
- Document every block with live previews
Pro tip
Keep behaviour in hooks and presentation in components so skins can change without touching logic.
Ship and iterate
Release early, collect feedback from the teams using the blocks, and refine. A living library is a healthy library.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| blocks | ContentBlock[] | — | heading | paragraph | quote | image | list | callout |
| layout (ContentSection) | "article" | "with-toc" | "with-sidebar" | "article" | Article layout |
| layout (BlogPostPageHeader) | "centered" | "split" | "image-below" | "centered" | Header layout |
| author | { name; role?; avatar?; bio? } | — | Author details |
| tone | "light" | "muted" | "brand" | "light" | Background tone — Figma Light / Muted / Brand |