List

Default list
White list
Ordered list
Lined list

HTML


<div class="orc-c-list ">

  <h4 class="orc-c-list__title">Heading ipsum dolor sit (39 characters)</h4>

  <ul class="orc-c-list__list">

    <li class="orc-c-list__item">
      List Item 1

    </li>
    <!--end orc-c-list__item-->
    <li class="orc-c-list__item">
      List Item 2

    </li>
    <!--end orc-c-list__item-->
    <li class="orc-c-list__item">
      List Item 3

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

  </ul>
  <!--end orc-c-list__list-->

</div>
<!--end orc-c-list-->

HTML


<div class="orc-c-list orc-c-list--white">

  <h4 class="orc-c-list__title">Heading ipsum dolor sit (39 characters)</h4>

  <ul class="orc-c-list__list">

    <li class="orc-c-list__item">
      List Item 1

    </li>
    <!--end orc-c-list__item-->
    <li class="orc-c-list__item">
      List Item 2

    </li>
    <!--end orc-c-list__item-->
    <li class="orc-c-list__item">
      List Item 3

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

  </ul>
  <!--end orc-c-list__list-->

</div>
<!--end orc-c-list-->

HTML


<div class="orc-c-list orc-c-list--ordered">

  <h4 class="orc-c-list__title">Heading ipsum dolor sit (39 characters)</h4>

  <ul class="orc-c-list__list">

    <li class="orc-c-list__item">
      List Item 1

    </li>
    <!--end orc-c-list__item-->
    <li class="orc-c-list__item">
      List Item 2

    </li>
    <!--end orc-c-list__item-->
    <li class="orc-c-list__item">
      List Item 3

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

  </ul>
  <!--end orc-c-list__list-->

</div>
<!--end orc-c-list-->

HTML


<div class="orc-c-list orc-c-list--lined">

  <h4 class="orc-c-list__title">Heading ipsum dolor sit (39 characters)</h4>

  <ul class="orc-c-list__list">

    <li class="orc-c-list__item">
      List Item 1

    </li>
    <!--end orc-c-list__item-->
    <li class="orc-c-list__item">
      List Item 2

    </li>
    <!--end orc-c-list__item-->
    <li class="orc-c-list__item">
      List Item 3

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

  </ul>
  <!--end orc-c-list__list-->

</div>
<!--end orc-c-list-->

When to use

When details can be expressed in a few (3 to 5) lines, with no need for sublists.

When to consider an alternative

A list list can help you give users all the details they need to know. For instance, using list one for hours on different days, and list two for contact information.

Class Name	Description
`orc-c-list` Required	Apply to the list’s containing HTML element. This is used to format and layout the list title and list items within.
`orc-c-list--white` Modifier	Apply in addition to `orc-c-list` to change the text color to white.
`orc-c-list--ordered` Modifier	Apply in addition to `orc-c-list` to add a number in front of each list item.
`orc-c-list--lined` Modifier	Apply in addition to `orc-c-list` to apply top and bottom padding and a bottom border to each list item.
`orc-c-list__title`	Apply to `h4` tag to headline what the list is about.
`orc-c-list__list` Required	Apply to either a `ul` or `ol` tag depending on whether it is an unordered or ordered list. This represents the actual list within the component.
`orc-c-list__item` Required	Apply to each `li` within the `orc-c-list__list`. This can contain either an excerpt of text or a form for submission.

Default list `orc-c-list`

White list `orc-c-list--white`

Ordered list `orc-c-list--ordered`

Lined list `orc-c-list--lined`

Usage

When to use

When to consider an alternative