List
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Example
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
<ul class="list-unstyled u-list">
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results List
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results Grid
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
About
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Services
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Invoice
</a>
</li>
</ul>
Active items
Add .active to a .u-list__link to indicate the current active selection.
<ul class="list-unstyled u-list">
<li>
<a class="u-list__link active" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results List
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results Grid
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
About
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Services
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Invoice
</a>
</li>
</ul>
Or to a parent component
<ul class="list-unstyled u-list">
<li class="active">
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results List
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results Grid
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
About
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Services
</a>
</li>
<li>
<a class="u-list__link" href="#">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Invoice
</a>
</li>
</ul>
Disabled items
Add .disabled to a li element to make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).
- Search Results List
- Search Results Grid
- About
- Services
- Invoice
<ul class="list-unstyled u-list">
<li class="u-list__link disabled">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results List
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results Grid
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
About
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Services
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Invoice
</li>
</ul>
Inline
Use inline ordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
- Search Results List
- Search Results Grid
- About
- Services
- Invoice
<ul class="list-inline u-list">
<li class="list-inline-item u-list__item">
Search Results List
</li>
<li class="list-inline-item u-list__item">
Search Results Grid
</li>
<li class="list-inline-item u-list__item">
About
</li>
<li class="list-inline-item u-list__item">
Services
</li>
<li class="list-inline-item u-list__item">
Invoice
</li>
</ul>
Contextual classes
Use contextual classes to style list items with a stateful color.
Use .u-list--light class.
- Search Results List
- Search Results Grid
- About
- Services
- Invoice
<ul class="list-unstyled u-list u-list--light">
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results List
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results Grid
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
About
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Services
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Invoice
</li>
</ul>
Use .u-list--white class.
- Search Results List
- Search Results Grid
- About
- Services
- Invoice
<ul class="list-unstyled u-list u-list--white">
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results List
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Search Results Grid
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
About
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Services
</li>
<li class="u-list__link">
<span class="fa fa-angle-right u-list__link-icon mr-1"></span>
Invoice
</li>
</ul>