Rich Text
The building blocks of an article body: headings, paragraphs, lists, quotes, and images.
Why a single source of truth
Most design systems drift because the Figma file and the code are maintained separately. Sakani exports one from the other.
- Tokens match exactly
- States are real, not redrawn
- Dark mode ships from day one
For rendered content, not your layout
These exist to render article bodies coming out of a CMS or MDX pipeline at a consistent measure and rhythm. For headings that are part of the page's own furniture, use Section Heading instead.
Quotes
"We deleted three thousand lines of one-off CSS."
We deleted three thousand lines of one-off CSS.
Images and pull-outs
The handoff problem isn't communication. It's that two artefacts drift.
List styles
- Checked
- Second item
- Bulleted
- Second item
- Arrowed
- Second item
RichTextHeading props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Heading text. | |
| level | 'h2' | 'h3' | 'h2' | Renders the matching tag, so document outline stays correct. |
The rest of the set
| Prop | Type | Default | Description |
|---|---|---|---|
| RichTextParagraph | children | A body paragraph at the article's measure. | |
| List | items, style | style is 'check' | 'bullet' | 'arrow'; items are plain strings. | |
| BlogBlockquote | quote, author | author ({ name, role, avatarSrc? }) switches from a plain pull-quote to the attributed card. | |
| BlogImage | src, alt, size, caption | size is 'large' | 'small'; a caption renders the centred row beneath. | |
| BlogFeatureText | text, align | An oversized pull-out line. align is 'left' | 'top'. |