1. Components
  2. Lists and collections

List list

A collection of lists, as many lists of as many items as you need.

List list orc-c-list-list

A collection of lists, as many lists of as many items as you need.

2up List list orc-c-list-list--2up

Displays nested lists 2 across when there is enough space.

  • 

    <ul class="orc-c-list-list orc-l-grid ">

  <li class="orc-c-list-list__item orc-l-grid__item ">
    <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-->

  </li>
  <!-- end orc-c-list-list__item-->
  <li class="orc-c-list-list__item orc-l-grid__item ">
    <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-->

  </li>
  <!-- end orc-c-list-list__item-->
  <li class="orc-c-list-list__item orc-l-grid__item ">
    <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-->

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

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

  • 

    <ul class="orc-c-list-list orc-l-grid orc-c-list-list--2up">

  <li class="orc-c-list-list__item orc-l-grid__item ">
    <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-->

  </li>
  <!-- end orc-c-list-list__item-->
  <li class="orc-c-list-list__item orc-l-grid__item ">
    <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-->

  </li>
  <!-- end orc-c-list-list__item-->
  <li class="orc-c-list-list__item orc-l-grid__item ">
    <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-->

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

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

Usage

When to use

Use when details are exhaustive, and best broken up visually. This component places a border between each list to make details easy to parse.

When to consider an alternative

Can you eliminate some details or express them more simply? If so, a simple list will do.

Class Name Description 
orc-c-list-list
Required

Apply to the list list’s containing ul tag. This class helps to format a list of orc-c-list components.

 
orc-c-list-list--2up
Modifier

Apply to the orc-c-list-list class to modify this component to display nested lists 2 across when there is enough space.

 
orc-l-grid
Required

Add to orc-c-list-list to allow the ability to make lists within into a grid layout (2up, 3up, etc.) if desired.

 
orc-c-list-list__item
Required

Apply to li tag to represent the list item that contains each orc-c-list.

 
orc-l-grid
Required

Apply in addition to orc-c-list-list__item if the user decides to format this list in a grid format.