Heading 1

Heading 2

A paragraph of body text. Default font-family and colour flow from the active theme (var(--base-font-family), var(--pc-text-color-1)).

Ordered and unordered lists get framework margins + a logical inline-start padding so they mirror correctly in RTL.
Add class="unstyled" on <ul>/<ol> to remove bullets and padding (for nav / button lists).

A blockquote sits indented on the reading-start side.

Preformatted text block.

Extra small text (12px)

Small text (14px — UI-control size)

Default body text (16px — no class)

Large text (18px)

Extra large text (20px)

Body text — the default colour (--pc-text-color-1)

Secondary / muted text (--pc-text-color-2)

Start-aligned text (left in LTR, right in RTL)

Center-aligned text

End-aligned text (right in LTR, left in RTL)

29 badges in narrow container

Lead text — larger font with relaxed line height for introductory paragraphs.

Small secondary text

Large centred text

Extra small, end-aligned, secondary

System font stack (native UI feel)

Sans-serif stack

Serif stack

Monospace stack (same font as <code>)

Primary (accent) Success (green) Danger (red) Warning (yellow/orange) Info (cyan/blue) Theme colour 1 Theme colour 2

Feature highlights and capabilities.

Progress bar shows time remaining before auto-dismiss (5 seconds).