Typography — headings, paragraphs, colours, alignment, and compound semantic styles. The size scale is absolute: one name, one size, everywhere.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph Sizes
No size is the body default (16px). Each size maps directly to the same-named text-* utility.
text-xs — 12px
text-sm — 14px (UI-control size)
no size — body default (16px)
text-lg — 18px
text-xl — 20px
Text Colour
Neutral text hierarchy. Role colours are in the Inline Text section.
Body text — the default (--pc-text-color-1)
Muted — subdued (--pc-text-color-2)
Alignment
Logical, RTL-aware.
Start — leading edge
Center
End — trailing edge
Semantic Text
Compound shorthands.
Lead — an introductory paragraph at 16px with relaxed line-height, for the opening sentence of a section.
Caption — small muted text at 12px, for figure captions and fine print.
Inline Text
Inline spans: secondary, primary, success, danger, warning, info.
Emphasis: strong and em.
Links
Class Reference
| Category | Classes |
|---|---|
| Font size | text-2xs, text-xs, text-sm, text-base, text-lg, text-xl, text-2xl |
| Colour | text-body, text-muted, text-primary, text-secondary, text-success, text-danger, text-warning, text-info |
| Alignment | text-start, text-center, text-end |
| Wrapping | text-nowrap, text-truncate |
| Semantic | text-caption, text-lead |