@ithaka/bonsai/documentation/pages/components/lists.md

ITHAKA core styling

---
title: Lists
description: Lists are related content usually grouped together vertically.
sass: ./scss/_lists.scss
---

## How to use
### Unordered List

Use unordered lists to display a collection of items where ordering does not matter.

```html_example
<ul>
    <li>Item</li>
    <li>Another Item</li>
    <li>Last Item</li>
</ul>
```

### Ordered List

Use ordered lists to display a collection of items where ordering is important.

```html_example
<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ol>
```

### List without bullets

Use lists without bullets when you want to display each element on it's own line without any bullets, numbering or indentation.

```html_example
<ul class="no-bullet">
    <li>Item</li>
    <li>Item with Sub-List</li>
    <li>
        <ul class="no-bullet">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
</ul>
```

### Colored Bulleted List

Use a `ul` with the `.bulleted-list` class to create a list with customizable item markers.

```html_example
<ul class="bulleted-list">
    <li>Item</li>
    <li>Other Item</li>
    <li>Additional Item</li>
</ul>
```

### Inline List

Use inline lists to display elements without having each item on it's own line.

```html_example
<ul class="inline-list">
    <li>Item</li>
    <li>Additional Item</li>
    <li>Last Item</li>
</ul>
```

<br />
### Description List

Use description lists to present data with additional metadata or explanation for each element.

```html_example
<dl>
  <dt>One</dt>
  <dd>1234</dd>
  <dt>Two</dt>
  <dd>ABCD</dd>
  <dt>Three</dt>
  <dd>WXYZ</dd>
</dl>
```