Horizontal list

Default horizontal list
Light horizontal list
Centered horizontal list

HTML


<ul class="orc-c-horizontal-list ">

  <li class="orc-c-horizontal-list__item">

    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Item 1</span>

        </a>
    <!--end orc-c-horizontal-list__link-->

  </li>
  <!--end orc-c-horizontal-list__item-->
  <li class="orc-c-horizontal-list__item">

    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Item 2</span>

        </a>
    <!--end orc-c-horizontal-list__link-->

  </li>
  <!--end orc-c-horizontal-list__item-->

</ul>
<!--end orc-c-horizontal-list-->

HTML


<ul class="orc-c-horizontal-list orc-c-horizontal-list--light">

  <li class="orc-c-horizontal-list__item">

    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Item 1</span>

        </a>
    <!--end orc-c-horizontal-list__link-->

  </li>
  <!--end orc-c-horizontal-list__item-->
  <li class="orc-c-horizontal-list__item">

    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Item 2</span>

        </a>
    <!--end orc-c-horizontal-list__link-->

  </li>
  <!--end orc-c-horizontal-list__item-->

</ul>
<!--end orc-c-horizontal-list-->

HTML


<ul class="orc-c-horizontal-list orc-c-horizontal-list--light">

  <li class="orc-c-horizontal-list__item">

    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Item 1</span>

        </a>
    <!--end orc-c-horizontal-list__link-->

  </li>
  <!--end orc-c-horizontal-list__item-->
  <li class="orc-c-horizontal-list__item">

    <a href="#" class="orc-c-horizontal-list__link">

            <span class="orc-c-horizontal-list__link-text">Item 2</span>

        </a>
    <!--end orc-c-horizontal-list__link-->

  </li>
  <!--end orc-c-horizontal-list__item-->

</ul>
<!--end orc-c-horizontal-list-->

When to use

Use this to display short, quickly scannable details, like for an upcoming itinerary item (confirmation number, number of guests, etc.). Best for use on a small block of content.

When to consider an alternative

When providing a long list of details, a definition list gives you more room to operate.

Class Name	Description
`orc-c-horizontal-list` Required	Apply to the horizontal list’s containing `ul` tag. This is set to `display: flex` to layout items within side-by-side and `flex-wrap: wrap` to wrap items when space runs out within the container.
`orc-c-horizontal-list--light` Modifier	Add to `orc-c-horizontal-list` to lighten the text color within the horizontal list.
`orc-c-horizontal-list--center` Modifier	Added to `orc-c-horizontal-list` to center the list items within.
`orc-c-horizontal-list__item` Required	Add to the `li` tags within the horizontal list to format list items correctly. This also adds the `:after` pseudoelements between each item.
`orc-c-horizontal-list__link` Required	Add to link within each `orc-c-horizontal-list__item` to make text within actionable.
`orc-c-horizontal-list__link-text`	Add to link text within each `orc-c-horizontal-list__link`.

Default horizontal list `orc-c-horizontal-list`

Light horizontal list `orc-c-horizontal-list--light`

Centered horizontal list `orc-c-horizontal-list--center`

Usage

When to use

When to consider an alternative