lists components

Components for working with lists.

Examples

List Columned

HTML

<ul class="c-list-columned">
    <li class="c-list-columned__item">
        <!-- Content -->
    </li>
    <li class="c-list-columned__item">
        <!-- Content -->
    </li>
</ul>

List Description

HTML

<div class="c-list-description__item">
    <dt class="c-list-description__term">
        <!-- Content -->
    </dt>
    <dd class="c-list-description__details">
        <!-- Content -->
    </dd>
</div>

List Group

HTML

<ul class="c-list-group c-list-group--bordered">
    <li class="c-list-group__item">
        <!-- Content -->
    </li>
    <li class="c-list-group__item">
        <!-- Content -->
    </li>
</ul>

List Header

HTML

<div class="c-list-header">
    <span><!-- Left aligned content --></span>
    <button><!-- Right aligned content --></button>
</div>

Example