# Lists

> Unordered, ordered, nested and description lists — `variant='list'` on the list element picks the right markers and spacing per tag.

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

## Unordered

```angular-html
<ul wrTypography variant="list">
  <li>At least 10 characters</li>
  <li>At least one lowercase character</li>
</ul>
```

## Ordered

```angular-html
<ol wrTypography variant="list">
  <li>Bonnie with 240 points</li>
  <li>Jese with 220 points</li>
</ol>
```

## Nested

Nested lists indent and swap markers automatically.

```angular-html
<ul wrTypography variant="list">
  <li>
    List item one
    <ol>
      <li>Nested ordered item</li>
    </ol>
  </li>
</ul>
```

## Description list

```angular-html
<dl wrTypography variant="list">
  <dt>Email address</dt>
  <dd>yourname&#64;example.com</dd>
</dl>
```