@ou-imdt/css/docs/utility/striped.md

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

# Striped

The utility class `.striped` when applied to tha parent element will alternatively stripe child elements using custom properties (--striped-odd-bg, --striped-odd-fg, --striped-even-bg, --striped-even-fg).

There are also properties for row hover background and foreground specific to tables.

There is also an additional .bordered class that can be used alongside .striped to add borderes on striped elements

## Example - simple

<div class="card">
  <ul class="striped bordered unstyled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <ul class="striped bordered unstyled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
```

</details>


## Example - with custom properties

<div class="card">
  <div class="striped" style="--striped-odd-bg: navy; --striped-odd-fg: white">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse
      totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae
      labore
      eos.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse
      totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae
      labore
      eos.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse
      totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae
      labore
      eos.</p>
  </div>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <div class="striped" style="--striped-odd-bg: navy; --striped-odd-fg: white">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse
      totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae
      labore
      eos.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse
      totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae
      labore
      eos.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse
      totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae
      labore
      eos.</p>
  </div>
```

</details>