Typography
Opt-in React components for the display, heading, lead, inline-text, blockquote, and
list helpers. Base element typography (raw h1–h6,
p, and friends) is already set by the provider’s Reboot — these components
are the class-based helpers, expressed as components.
Import
import {
Display,
Heading,
Lead,
Text,
Small,
Mark,
Blockquote,
BlockquoteFooter,
List,
ListInlineItem,
} from '@metatoy/bootstrap-styled';Display headings
Display renders a larger, lighter display heading. Set size={1}–{6}; it renders the
matching h1–h6 tag by default, or any element via as. Sizes use Bootstrap’s RFS —
they scale fluidly below the xl breakpoint and snap to a fixed rem at 1200px.
Headings
Heading applies the .h1–.h6 look to any element, so you can keep the correct
semantic tag while choosing the visual size independently. With as="h3" and no size,
it infers the .h3 look from the tag; pass size to decouple the two.
Lead
Lead is a paragraph that stands out from surrounding body copy with a larger, lighter
treatment (font-size: 1.25rem, font-weight: 300).
Inline text elements
Text is a polymorphic <span> with boolean styling props — small, weight
(light · normal · medium · semibold · bold), italic, and muted. Mark
renders a highlighted <mark>, and Small renders <small> at 0.875em.
Lists
List renders a <ul> (or any element via as) with unstyled to drop bullets and
padding, or inline to lay children out in a row. Pair inline with ListInlineItem
for the correct spacing.
Blockquotes
Blockquote styles a <blockquote>; BlockquoteFooter renders the muted, em-dash
”— Source” attribution line beneath it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | DisplaySize | — | — |
| as | React.ElementType | — | — |
| Prop | Type | Default | Description |
|---|---|---|---|
| size | DisplaySize | — | Which `.h1..6` look to apply (defaults to matching the `as` tag, else 1). |
| as | React.ElementType | — | — |
| Prop | Type | Default | Description |
|---|---|---|---|
| as | React.ElementType | — | — |
| Prop | Type | Default | Description |
|---|---|---|---|
| small | boolean | — | `.small` — font-size: .875em. |
| weight | "light" | "normal" | "medium" | "semibold" | "bold" | — | Font weight utility (`.fw-*`). |
| italic | boolean | — | `.fst-italic`. |
| muted | boolean | — | `.text-body-secondary` — the muted body color. |
| as | React.ElementType | — | — |
| Prop | Type | Default | Description |
|---|---|---|---|
| unstyled | boolean | — | `.list-unstyled` — drop bullets + left padding. |
| inline | boolean | — | `.list-inline` — lay items out inline (pair with `<ListInlineItem>`). |
| as | React.ElementType | — | — |
| Prop | Type | Default | Description |
|---|---|---|---|
| as | React.ElementType | — | — |
Small, Mark, BlockquoteFooter, and ListInlineItem are bare styled elements with no
custom props — they accept all native attributes of their underlying tag (<small>,
<mark>, <footer>, <li>) and can be retargeted with the styled-components as prop.
Every component above also forwards its native element attributes.
Theming
Type helpers read the standard --bs-* tokens. Heading uses --bs-heading-color
(falling back to inherit); Text muted and FigureCaption-style muted copy read
--bs-secondary-color; Mark reads --bs-highlight-color and --bs-highlight-bg. Font
family, size, and weight scales come from the provider’s base typography tokens, so a
theme (or a scoped --bs-* override) reshades and re-scales type without touching the
components.
Accessibility
Choose the element for meaning, not size: use Display/Heading with the correct heading
level (or as) so the document outline stays logical, and use size only to adjust the
visual weight. Mark conveys emphasis visually only — if a highlight carries meaning,
reinforce it in the surrounding text. Keep list semantics intact: unstyled/inline
change the appearance but keep the underlying <ul>/<li> structure for assistive tech.
Explore in Ladle
Browse every type helper in the interactive component gallery: Open in Ladle.