Directive

Paragraphs

Lead, body, small, caption, and overline — the running-text vocabulary. Pair with tone, alignment, and the truncate modifier.

Default paragraph

body — base size on normal leading, the everyday reading style.

Track work across the entire organization with automation, integrations and dashboards built for flow. Less busywork, more shipping — the tools fade into the background and the product takes the page. 

<p wrTypography variant="body">…</p>

Lead paragraph

lead — one size up with relaxed leading; the intro under a page heading.

Deliver great experiences fast — a type system tuned for reading, driven by tokens you can re-skin in one place. 

<p wrTypography variant="lead">…</p>

Variants

<p wrTypography variant="lead">Lead paragraph — calmer subhead under a headline.</p>
<p wrTypography>Body copy in the default variant.</p>
<p wrTypography variant="small">Small print.</p>
<p wrTypography variant="caption">Captions and helper text.</p>
<p wrTypography variant="overline">Section label</p>

Lead paragraph — calmer subhead under a headline.

Body copy in the default variant.

Small print.

Captions and helper text.

Section label

Tones

The same --wr-color-* tokens used by every other ngwr component. Setting no tone at all is the default, and it is not the same as asking for dark — an untoned variant keeps its own colour, which is why lead, caption and overline above are muted without anyone asking.

<!-- No tone at all is the default: each variant keeps its own colour. -->
<p wrTypography>Body, untoned</p>

<p wrTypography tone="dark">Dark</p>
<p wrTypography tone="medium">Muted</p>
<p wrTypography tone="primary">Primary</p>
<p wrTypography tone="success">Success</p>
<p wrTypography tone="warning">Warning</p>
<p wrTypography tone="danger">Danger</p>

Body, untoned

Dark

Muted

Primary

Success

Warning

Danger

Alignment

<p wrTypography align="start">Start (default)</p>
<p wrTypography align="center">Centered</p>
<p wrTypography align="end">End</p>
<p wrTypography align="justify">Justified text fills the line width.</p>

Start (default)

Centered

End

Justified text fills the line width by adjusting word spacing. Use it for long-form copy where ragged right edges would distract — multi-line paragraphs stretch every full line flush to both edges, like this one.

Truncation

<p wrTypography [truncate]="true" style="max-width: 18rem">
  A long line that gets ellipsized when it overflows the container.
</p>

A long line that gets ellipsized when it overflows the container.

See also

2022 – 2026 © Roman Khegayv14.5.1