Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language. See more details regarding this Migration

Lists

Lists can be implemented with an icon set pre defined using SVG icons. Lists can contain external links built inline.

Ordered list

A standard ordered list

This is a standard list item
This is a standard list item wrapped in a link
This is a standard list item with an active class applied
This is a standard list item with some placeholder text to make it very long - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is a standard list item with some inline HTML entities
This is a list item that includes an inline link

<ol class="rc-list">
  <li class="rc-list__item"> This is a standard list item </li>
  <li class="rc-list__item">
    <a href="#" class="rc-styled-link">This is a standard list item wrapped in a link</a>
  </li>
  <li class="rc-list__item rc-active"> This is a standard list item with an active class applied </li>
  <li class="rc-list__item"> This is a standard list item with some placeholder text to make it very long - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
  <li class="rc-list__item">
    This is a standard list item with some
    <em>
      inline
      <strong>HTML</strong>
      entities
    </em>
  </li>
  <li class="rc-list__item">
    This is a list item that includes an
    <a class="rc-styled-link" href="#">inline link</a>
  </li>
</ol>

Unordered list

A standard unordered list

This is a standard list item
This is a standard list item wrapped in a link
This is an item with nested items
- This is a nested list item
- This is a nested list item
- This is a nested list item
This is a standard list item with an active class applied
This is a standard list item with some placeholder text to make it very long - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is a standard list item with some inline HTML entities
This is a list item that includes an inline link

<ul class="rc-list">
  <li class="rc-list__item"> This is a standard list item </li>
  <li class="rc-list__item">
    <a href="#" class="rc-styled-link">This is a standard list item wrapped in a link </a>
  </li>
  <li class="rc-list__item">
    This is an item with nested items
    <ul class="rc-list">
      <li class="rc-list__item"> This is a nested list item </li>
      <li class="rc-list__item"> This is a nested list item </li>
      <li class="rc-list__item"> This is a nested list item </li>
    </ul>
  </li>
  <li class="rc-list__item rc-active"> This is a standard list item with an active class applied </li>
  <li class="rc-list__item"> This is a standard list item with some placeholder text to make it very long - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
  <li class="rc-list__item">
    This is a standard list item with some
    <em>
      inline
      <strong>HTML</strong>
      entities
    </em>
  </li>
  <li class="rc-list__item">
    This is a list item that includes an
    <a class="rc-styled-link" href="#">inline link</a>
  </li>
</ul>

Column list

A list that flows in columns, will accept list--three-column, list--five-column or list--six-column.

List item 1
List item 2
List item 3
List item 4
List item 5
List item 6

<ul class="rc-list rc-list--three-column">
  <li class="rc-list__item"> List item 1 </li>
  <li class="rc-list__item"> List item 2 </li>
  <li class="rc-list__item"> List item 3 </li>
  <li class="rc-list__item"> List item 4 </li>
  <li class="rc-list__item"> List item 5 </li>
  <li class="rc-list__item"> List item 6 </li>
</ul>

Link list with headers

If the list contains only links, e.g a navigation list, rc-list__link can be used for consistency.
The example below also utilises the column list class described above. It also demonstrates how column items can be grouped using rc-list__item--group'

<ul class="rc-list rc-list--five-column rc-list--blank rc-list--align" role="menubar">
  <li class="rc-list__item rc-list__item--group">
    <button href="#" class="rc-list__header" role="menuitem">Primary nav item</button>
    <ul class="rc-list rc-list--blank rc-list--align test" role="menu">
      <li class="rc-list__item">
        <a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
      </li>
      <li class="rc-list__item">
        <a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
      </li>
      <li class="rc-list__item">
        <a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
      </li>
      <li class="rc-list__item">
        <a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
      </li>
    </ul>
  </li>
  <li class="rc-list__item rc-list__item--group">
    <button href="#" class="rc-list__header" role="menuitem">Primary nav item</button>
    <ul class="rc-list rc-list--blank rc-list--align test" role="menu">
      <li class="rc-list__item">
        <a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
      </li>
      <li class="rc-list__item">
        <a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
      </li>
      <li class="rc-list__item">
        <a href="#" class="rc-list__link" role="menuitem">Secondary nav item</a>
      </li>
    </ul>
  </li>
  <li class="rc-list__item rc-list__item--group">
    <button href="#" class="rc-list__header" role="menuitem">Primary nav item</button>
  </li>
  <li class="rc-list__item rc-list__item--group">
    <button href="#" class="rc-list__header" role="menuitem">Primary nav item</button>
  </li>
</ul>

Inline list

Arranges list items inline.

List item 1
List item 2
List item 3
List item 4
List item 5
List item 6

<ul class="rc-list rc-list--inline">
  <li class="rc-list__item"> List item 1 </li>
  <li class="rc-list__item"> List item 2 </li>
  <li class="rc-list__item"> List item 3 </li>
  <li class="rc-list__item"> List item 4 </li>
  <li class="rc-list__item"> List item 5 </li>
  <li class="rc-list__item"> List item 6 </li>
</ul>

Blank list

The class list--blank will remove bullets or numbers from each list item.

List item 1
List item 2
List item 3
List item 4
List item 5
List item 6

<ul class="rc-list rc-list--blank">
  <li class="rc-list__item"> List item 1 </li>
  <li class="rc-list__item"> List item 2 </li>
  <li class="rc-list__item"> List item 3 </li>
  <li class="rc-list__item"> List item 4 </li>
  <li class="rc-list__item"> List item 5 </li>
  <li class="rc-list__item"> List item 6 </li>
</ul>

Blank & aligned list

The class list--align will remove any padding or margins.

List item 1
List item 2
List item 3
List item 4
List item 5
List item 6

<ul class="rc-list rc-list--blank rc-list--align">
  <li class="rc-list__item"> List item 1 </li>
  <li class="rc-list__item"> List item 2 </li>
  <li class="rc-list__item"> List item 3 </li>
  <li class="rc-list__item"> List item 4 </li>
  <li class="rc-list__item"> List item 5 </li>
  <li class="rc-list__item"> List item 6 </li>
</ul>

Icon list

Replace the standard bullets with custom icons.

List item 1
List item 2
List item 3

<ul class="rc-list rc-list--blank rc-icon-list rc-icon-list--xs">
  <li class="rc-list__item rc-icon rc-user--xs rc-iconography--xs"> List item 1 </li>
  <li class="rc-list__item rc-icon rc-settings--xs rc-iconography--xs"> List item 2 </li>
  <li class="rc-list__item rc-icon rc-email--xs rc-iconography--xs"> List item 3 </li>
</ul>

List item 1
List item 2
List item 3

<ul class="rc-list rc-list--blank rc-icon-list">
  <li class="rc-list__item rc-icon rc-user rc-iconography"> List item 1 </li>
  <li class="rc-list__item rc-icon rc-settings rc-iconography"> List item 2 </li>
  <li class="rc-list__item rc-icon rc-email rc-iconography"> List item 3 </li>
</ul>