Patterns

A responsive system to support designers, developers and teams to begin the build of products, apps and services based on a core collection of flexible consistent elements.

 

11 Lists

Plain list

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item 
<ul class="list">
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
</ul>

11.1 Round bullets

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item 
<ul class="list list--bullets-round list--striped">
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
</ul>

11.2 Square bullets

  • List item
  • List item
  • List item 
<ul class="list list--bullets-square">
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
</ul>

11.3 Numeric

  1. List item
  2. List item
  3. List item 
<ol class="list list--numeric">
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
</ol>

11.4 Alpha

  1. List item
  2. List item
  3. List item 
<ol class="list list--alpha">
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
 <li class="list__item">
   List item
 </li>
</ol>

11.5 Action link iconed list 

<ul class="list list--iconned">
 <li class="list__item">
   <a href="/" class="list__link--iconned dark-grey-1">
     <span class="icon icon-angle-right"></span>
     Action link iconed list item
   </a>
 </li>
 <li class="list__item">
   <a href="/" class="list__link--iconned dark-grey-1">
     <span class="icon icon-angle-right"></span>
     Action link iconed listitem
   </a>
 </li>
 <li class="list__item">
   <a href="/" class="list__link--iconned dark-grey-1">
     <span class="icon icon-angle-right"></span>
     Action link iconed list item
   </a>
 </li>
 <li class="list__item">
   <a href="/" class="list__link--iconned dark-grey-1">
     <span class="icon icon-angle-right"></span>
     Action link iconed listitem
   </a>
 </li>
</ul>