Skip to main contentSkip to site searchSkip to component search
Honeycomb

List Wrapper

The list wrapper shows text, numbers, or icons in a structured overview. Each item can either be clicked or not interacted with.

Details

Rich text content can be put inside list wrapper items. The default layout has an outline border around the wrapper and each item.

Each flix-list-wrapper__item accepts 2 modifiers:

--error
triggers error state on an item, use if error needs to be highlighted in an item.
--disabled
triggers disabled state on an item, use if item cant be selected.
<ul class="flix-list-wrapper">
    <li class="flix-list-wrapper__item">
        <a class="flix-list-wrapper__content" href="#">Bus Copenhagen - Berlin</a>
    </li>
    <li class="flix-list-wrapper__item">
        <a class="flix-list-wrapper__content" href="#">Bus Berlin - Amsterdam</a>
    </li>
    <li class="flix-list-wrapper__item">
        <a class="flix-list-wrapper__content" href="#">Bus Berlin - Bremen</a>
    </li>
</ul>

Error and disabled states with rich text content

Te disabled visual state is triggered by adding the --disabled modifier to the flix-list-wrapper__item.

Make sure to also add aria-disabled="true" to the disabled items to make it accessible to screen reader users.

<ul class="flix-list-wrapper">
    <li class="flix-list-wrapper__item">
        <a class="flix-list-wrapper__content" href="#">
            <h4 class="flix-h4 flix-h4--section-header">Wed, 3 Jun 2020, 08:30</h4>
            <p class="flix-text">Stockholm Central – Malmö</p>
            <p class="flix-text--small">
                0 of 1 seats reserved
            </p>
        </a>
    </li>
    <li class="flix-list-wrapper__item flix-list-wrapper__item--error">
        <button type="button" class="flix-list-wrapper__content">
            <h4 class="flix-h4 flix-h4--section-header">Wed, 3 Jun 2020, 08:30</h4>
            <p class="flix-text">Stockholm Central – Malmö</p>
            <p class="flix-text--small">
                0 of 1 seats reserved
            </p>
        </button>
    </li>
    <li class="flix-list-wrapper__item flix-list-wrapper__item--disabled" aria-disabled="true">
        <div class="flix-list-wrapper__content">
            <h4 class="flix-h4 flix-h4--section-header">Wed, 3 Jun 2020, 08:30</h4>
            <p class="flix-text">Stockholm Central – Malmö</p>
            <p class="flix-text--small">
                0 of 1 seats reserved
            </p>
        </div>
    </li>
</ul>

Small variation

The list wrapper has a --small modifier that omits the outlined border and has smaller item height. The items accept the same --error and --disabled modifiers as the default view.

<ul class="flix-list-wrapper flix-list-wrapper--small">
    <li class="flix-list-wrapper__item">
        <a class="flix-list-wrapper__content" href="#">
            When you use an anchor
        </a>
    </li>
    <li class="flix-list-wrapper__item">
        <a class="flix-list-wrapper__content" href="#">
            The content has an arrow
        </a>
    </li>
    <li class="flix-list-wrapper__item">
        <div class="flix-list-wrapper__content">
            <i class="flix-icon flix-icon-transfer-solid" aria-hidden="true"></i>
            You can add icons
        </div>
    </li>
</ul>
<ul class="flix-list-wrapper flix-list-wrapper--small">
    <li class="flix-list-wrapper__item flix-list-wrapper__item--error">
        <a class="flix-list-wrapper__content" href="#">
            When you use an anchor
        </a>
    </li>
    <li class="flix-list-wrapper__item flix-list-wrapper__item--error">
        <a class="flix-list-wrapper__content" href="#">
            The content has an arrow
        </a>
    </li>
    <li class="flix-list-wrapper__item flix-list-wrapper__item--error">
        <div class="flix-list-wrapper__content">
            <i class="flix-icon flix-icon-transfer-solid" aria-hidden="true"></i>
            You can add icons
        </div>
    </li>
</ul>
<ul class="flix-list-wrapper flix-list-wrapper--small">
    <li class="flix-list-wrapper__item flix-list-wrapper__item--disabled" aria-disabled="true">
        <a class="flix-list-wrapper__content" href="#">
            When you use an anchor
        </a>
    </li>
    <li class="flix-list-wrapper__item flix-list-wrapper__item--disabled" aria-disabled="true">
        <a class="flix-list-wrapper__content" href="#">
            The content has an arrow
        </a>
    </li>
    <li class="flix-list-wrapper__item flix-list-wrapper__item--disabled" aria-disabled="true">
        <div class="flix-list-wrapper__content">
            <i class="flix-icon flix-icon-transfer-solid" aria-hidden="true"></i>
            You can add icons
        </div>
    </li>
</ul>