@ou-imdt/css/docs/native/lists.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# lists



## ol (ordered list)

### Example

<div class="card">

  <ol>
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
  </ol>

</div>

<details class="compact">
<summary>HTML</summary>
  
```html
<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>
```

</details>

## ul (unordered list)

### Example

<div class="card">

  <ul>
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
  </ul>

</div>

<details class="compact">
  <summary>HTML</summary>
    
```html
  <ul>
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
  </ul>
```
</details>

## dl (definition list)

### Example

<div class="card">

  <dl>
    <dt>Text 1</dt>
    <dd>Definition</dd>
    <dt>Text 2 A</dt>
    <dt>Text B</dt>
    <dd>Definition</dd>
    <dt>Text 3</dt>
    <dd>Definition 1</dd>
    <dd>Definition 2</dd>
  </dl>

</div>

<details class="compact">
<summary>HTML</summary>
  
```html
<dl>
  <dt>Text 1</dt>
  <dd>Definition</dd>
  <dt>Text 2 A</dt>
  <dt>Text B</dt>
  <dd>Definition</dd>
  <dt>Text 3</dt>
  <dd>Definition 1</dd>
  <dd>Definition 2</dd>
</dl>
```

</details>

## .custom

The `.custom` class be applied to use custom icons as list item indicators. 

### Example

<div class="card">

  <ul class="custom">
    <li>first item</li>
    <li style="--icon: '🗸 '; --icon-color: var(--success)">second item with custom marker</li>
    <li style="--icon: '☕'">emoji marker</li>
    <li>
      third item
      <ul>
        <li>I am nested</li>
        <li style="--icon: '\f058'; --icon-font: 'Font Awesome 6 Free'; --icon-color: var(--success)">
          font awesome unicode
        </li>
      </ul>
    </li>
  </ul>

</div>

<details class="compact">
    <summary>HTML</summary>
      
```html
<ul class="custom">
  <li>first item</li>
  <li style="--icon: '🗸 '; --icon-color: var(--success)">second item with custom marker</li>
  <li style="--icon: '☕'">emoji marker</li>
  <li>
    third item
    <ul>
      <li>I am nested</li>
      <li style="--icon: '\f058'; --icon-font: 'Font Awesome 6 Free'; --icon-color: var(--success)">
        font awesome unicode
      </li>
    </ul>
  </li>
</ul>
```

</details> 

## .unstyled

The `.unstyled` class or `role="list"` attribute be be applied when default padding and list styles are not desired.

### Example

  <div class="card">

  <ol class="unstyled">
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
  </ol>

  </div>

<details class="compact">
  <summary>HTML</summary>
    
```html
<ol class="unstyled">
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>
```

</details>