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

  1. This is a standard list item
  2. This is a standard list item wrapped in a link
  3. This is a standard list item with an active class applied
  4. 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.
  5. This is a standard list item with some inline HTML entities
  6. This is a list item that includes an inline link
html
            <ol class="rc-list">
   <li class="rc-list__item">This is a standard list item</li>
   <li class="rc-list__item"><a class="rc-styled-link" href="#">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 an item with nested items
    • This is a standard list item
    • This is a standard list item
    • 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
html
            <ul class="rc-list">
   <li class="rc-list__item">This is a standard list item</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 standard list item</li>
       <li class="rc-list__item">This is a standard list item</li>
       <li class="rc-list__item">This is a standard list item</li>
     </ul>
   </li>
   <li class="rc-list__item"><a class="rc-styled-link" href="#">This is a standard list item wrapped in a link </a></li>
   <li class="rc-list__item 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 rc-list--two-column, rc-list--three-column, rc-list--five-column or rc-list--six-column.

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 6
html
            <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

html
            <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">
    <a class="rc-list__header" href="#/" role="menuitem">Primary nav item</a>
    <ul class="rc-list rc-list--blank rc-list--align" role="menu">
      <li class="rc-list__item">
        <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
      </li>
      <li class="rc-list__item">
        <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
      </li>
      <li class="rc-list__item">
        <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
      </li>
      <li class="rc-list__item">
        <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
      </li>
    </ul>
  </li>
  <li class="rc-list__item rc-list__item--group">
    <a class="rc-list__header" href="#/" role="menuitem">Primary nav item</a>
    <ul class="rc-list rc-list--blank rc-list--align" role="menu">
      <li class="rc-list__item">
        <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
      </li>
      <li class="rc-list__item">
        <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
      </li>
      <li class="rc-list__item">
        <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
      </li>
    </ul>
  </li>
  <li class="rc-list__item rc-list__item--group">
    <a class="rc-list__header" href="#/" role="menuitem">Primary nav item</a>
  </li>
  <li class="rc-list__item rc-list__item--group">
    <a class="rc-list__header" href="#/" role="menuitem">Primary nav item</a>
  </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
html
            <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.

  • This is a standard list item
  • This is a standard list item
  • This is a standard list item
  • This is a standard list item
html
            <ul class="rc-list rc-list--blank">
   <li class="rc-list__item">This is a standard list item</li>
   <li class="rc-list__item">This is a standard list item</li>
   <li class="rc-list__item">This is a standard list item</li>
   <li class="rc-list__item">This is a standard list item</li>
</ul>
        

Blank & aligned list

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

  • This is a standard list item
  • This is a standard list item
  • This is a standard list item
  • This is a standard list item
html
            <ul class="rc-list rc-list--align rc-list--blank">
   <li class="rc-list__item">This is a standard list item</li>
   <li class="rc-list__item">This is a standard list item</li>
   <li class="rc-list__item">This is a standard list item</li>
   <li class="rc-list__item">This is a standard list item</li>
</ul>
        

Icon list

Replace the standard bullets with custom icons.

  • This is a standard list item
  • This is a standard list item
html
            <ul class="rc-list rc-list--blank">
	<li class="rc-list__item rc-icon rc-user--xs rc-iconography">This is a standard list item</li>
	<li class="rc-list__item rc-icon rc-settings--xs rc-iconography">This is a standard list item</li>
	<li class="rc-list__item rc-icon rc-email--xs rc-iconography">This is a standard list item</li>
</ul>
        
  • This is a standard list item
  • This is a standard list item
html
            <ul class="rc-list rc-list--blank rc-list--large-icon">
	<li class="rc-list__item rc-icon rc-user rc-iconography">This is a standard list item</li>
	<li class="rc-list__item rc-icon rc-settings rc-iconography">This is a standard list item</li>
	<li class="rc-list__item rc-icon rc-email rc-iconography">This is a standard list item</li>
</ul>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 13th November 2018 [ui_assets/elements/lists.yml]
    Update documentation for column lists
  • 25th July 2018 [ui_assets/elements/lists.yml]
    prefix active
  • 25th July 2018 [ui_assets/elements/lists.yml]
    prefix list--align
  • 12th July 2018 [ui_assets/elements/lists.yml]
    Prefixed classes throughout the portal with rc-.
  • 29th June 2018 [ui_assets/elements/lists.yml]
    add large icons, change small icons
  • 28th March 2018 [ui_assets/elements/lists.yml]
    Updated tabs, lists and accordion documentation
  • 8th March 2018 [ui_assets/elements/lists.yml]
    Ordered elements alpabetically
  • 28th February 2018 [ui_assets/elements/lists.yml]
    Tidied list page and added navigation list example
  • 27th February 2018 [ui_assets/elements/lists.yml]
    Replaced icon classes
  • 1st February 2018 [ui_assets/elements/lists.yml]
    Updated icon classes
  • 1st December 2017 [ui_assets/elements/lists.yml]
    Reorganised elements navigation