# List

Source: https://iriscss.com/documentation/elements/list/

Unordered, ordered and description lists, plus `menu` as a toolbar.

## Unordered

Markers change at each level: square, disc, then circle.

```html
<ul>
  <li>Elements
    <ul>
      <li>Button
        <ul>
          <li>Colors</li>
          <li>Sizes</li>
        </ul>
      </li>
      <li>Table</li>
    </ul>
  </li>
  <li>Components</li>
</ul>
```

## Ordered

```html
<ol>
  <li>Link the stylesheet</li>
  <li>Write HTML</li>
  <li>Add a class when you want a variant</li>
</ol>
```

## Description list

```html
<dl>
  <dt>Classless</dt>
  <dd>Plain HTML is styled with no class.</dd>
  <dt>Layered</dt>
  <dd>Your own CSS always wins.</dd>
</dl>
```

## Menu

`menu` is a toolbar. Its items sit in a row and wrap when there is no room.

```html
<menu>
  <li><button class="small">Copy</button></li>
  <li><button class="small">Paste</button></li>
  <li><button class="small danger">Delete</button></li>
</menu>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-list-marker-color-text` | `var(--i-color-subtle)` |