Lists let you repeat elements using semantic HTML tags. You may also indicate state on your list items using the global state names defined in the _colors.scss partial.
| Modifier Classes | Modifies | Description |
|---|---|---|
.list__item--info | .list__item | Add informational bubble to list item, color defined in _colors.scss |
.list__item--success | .list__item | Add positive bubble to list item, color defined in _colors.scss |
.list__item--warning | .list__item | Add warning bubble to list item, color defined in _colors.scss |
.list__item--error | .list__item | Add error bubble to list item, color defined in _colors.scss |
.list__item--info-bar | .list__item | Add informational bar to list item, color defined in _colors.scss |
.list__item--success-bar | .list__item | Add positive bar to list item, color defined in _colors.scss |
.list__item--warning-bar | .list__item | Add warning bar to list item, color defined in _colors.scss |
.list__item--error-bar | .list__item | Add error bar to list item, color defined in _colors.scss |
<ul class="list">
<li class="list__item">List Item</li>
<li class="list__item">List Item</li>
<li class="list__item">List Item</li>
<li class="list__item">List Item</li>
</ul><ul class="list">
<li class="list__item list__item--info">List Item</li>
<li class="list__item list__item--success">List Item</li>
<li class="list__item list__item--warning">List Item</li>
<li class="list__item list__item--error">List Item</li>
</ul><ul class="list">
<li class="list__item list__item--info-bar">List Item</li>
<li class="list__item list__item--success-bar">List Item</li>
<li class="list__item list__item--warning-bar">List Item</li>
<li class="list__item list__item--error-bar">List Item</li>
</ul>