roobie/docs/components/list.md

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

# List
List of items with attributes.

## Basic
<div class="row aln-center">
    <ul class="ul">
        <li>Apples</li>
        <li>Oranges</li>
        <li>Tomatos</li>
    </ul>
    <ul class="ul bdr">
        <li>Apples</li>
        <li>Oranges</li>
        <li>Tomatos</li>
    </ul>
</div>

```html
 <ul class="ul">
    <li>Apples</li>
    <li>Oranges</li>
    <li>Tomatos</li>
</ul>
<ul class="ul bdr">
    <li>Apples</li>
    <li>Oranges</li>
    <li>Tomatos</li>
</ul>
```

## Descriptions
<div class="row aln-center">
    <ul class="ul">
        <li>$1,202,203.44 <span>Sales</span></li>
        <li>6,345 <span>Customers</span></li>
        <li>345 <span>Assets</span></li>
    </ul>
    <ul class="ul bdr txtc">
        <li>Test 1<span>40 questions</span></li>
        <li>Midterm <span>44 questions</span></li>
        <li>Final <span>77 questions</span></li>
    </ul>
    <ul class="ul txtr">
        <li>Elements <span>Elements on the page</span></li>
        <li>Outages <span>Website outages</span></li>
        <li>People <span>Total people working</span></li>
    </ul>
</div>

```html
<ul class="ul">
    <li>$1,202,203.44 <span>Sales</span></li>
    <li>6,345 <span>Customers</span></li>
    <li>345 <span>Assets</span></li>
</ul>
<ul class="ul bdr txtc">
    <li>Test 1<span>40 questions</span></li>
    <li>Midterm <span>44 questions</span></li>
    <li>Final <span>77 questions</span></li>
</ul>
<ul class="ul txtr">
    <li>Elements <span>Elements on the page</span></li>
    <li>Outages <span>Website outages</span></li>
    <li>People <span>Total people working</span></li>
</ul>
```

## Content
<div class="row aln-center">
    <ul class="ul-cnt box">
        <li>Update <a class="red">Failure</a></li>
        <li>Install <a class="orange">Caution</a></li>
        <li>Build<a class="green">Success</a></li>
    </ul>
    <ul class="ul-cnt bdr">
        <li><a class="btn btn-danger white">Update</a>23.4.2</li>
        <li><a>Up to date</a>9.392 </li>
        <li><a>Up to date</a>02.34.4.2021</li>
    </ul>
</div>

```html
<ul class="ul-cnt box">
    <li>Update <a class="red">Failure</a></li>
    <li>Install <a class="orange">Caution</a></li>
    <li>Build<a class="green">Success</a></li>
</ul>
<ul class="ul-cnt bdr">
    <li><a class="btn btn-danger white">Update</a>23.4.2</li>
    <li><a>Up to date</a>9.392 </li>
    <li><a>Up to date</a>02.34.4.2021</li>
</ul>
```