<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>Paragraphs
Style running text, from lead paragraphs to captions.
Variants
body is the default when no variant is set.
Tones
Without a tone, a variant keeps its own colour.
<p wrTypography>Body, untoned</p>
<p wrTypography tone="base">Base</p>
<p wrTypography tone="muted">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>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>Truncation
One line, cut with an ellipsis at the container edge.
<p wrTypography [truncate]="true" style="max-width: 18rem">
A long line that gets ellipsized when it overflows the container.
</p>See also
Directive [wrTypography]Style any text element with a shared text role.Guide Headings & displayHeadings from display down to h6.Guide LinksStyle an anchor or a router link with variant="link".Pipe wrTruncateShorten a string and end it with an ellipsis.Guide StylesPick a text style and see the tokens behind it.