# Paragraphs

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

Source: https://ngwr.dev/guides/typography/paragraphs  
Kind: Directive

## Default paragraph

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

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

## Lead paragraph

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

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

## Variants

```angular-html
<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>
```

## 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.

```angular-html
<!-- 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>
```

## Alignment

```angular-html
<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

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

## See also

- [[wrTypography]](https://ngwr.dev/reference/directives/typography) — Every input, the full variant union, and the classes the directive emits.