Ordered List
ready

Introduction

Used to display lists of content where the order items are displayed is significant.

Examples

Simple ordered list

  1. Item
  2. Item
  3. Item
<ol class="list">
      <li class="list__item">
          <div class="list__item-content">Item</div>
      </li>
      <li class="list__item">
          <div class="list__item-content">Item</div>
      </li>
      <li class="list__item">
          <div class="list__item-content">Item</div>
      </li>
    </ol>

Primary ordered list

  1. Item
  2. Item
  3. Item
<ol class="list list--primary">
      <li class="list__item">
          <div class="list__item-content">Item</div>
      </li>
      <li class="list__item">
          <div class="list__item-content">Item</div>
      </li>
      <li class="list__item">
          <div class="list__item-content">Item</div>
      </li>
    </ol>

Enhanced simple ordered list

  1. Item
  2. Item
  3. Item
<ol class="list list--fancy">
      <li class="list__item list__item--fancy" data-index="1">
          <div class="list__item-content list__item-content--fancy"><div class="heading heading--4">Item</div></div>
      </li>
      <li class="list__item list__item--fancy" data-index="2">
          <div class="list__item-content list__item-content--fancy"><div class="heading heading--4">Item</div></div>
      </li>
      <li class="list__item list__item--fancy" data-index="3">
          <div class="list__item-content list__item-content--fancy"><div class="heading heading--4">Item</div></div>
      </li>
    </ol>

Enhanced primary ordered list

  1. Item
  2. Item
  3. Item
<ol class="list list--fancy list--primary">
      <li class="list__item list__item--fancy list__item--primary" data-index="1">
          <div class="list__item-content list__item-content--fancy"><div class="heading heading--4">Item</div></div>
      </li>
      <li class="list__item list__item--fancy list__item--primary" data-index="2">
          <div class="list__item-content list__item-content--fancy"><div class="heading heading--4">Item</div></div>
      </li>
      <li class="list__item list__item--fancy list__item--primary" data-index="3">
          <div class="list__item-content list__item-content--fancy"><div class="heading heading--4">Item</div></div>
      </li>
    </ol>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_list.scss

Usage

Class/JavaScript Hook Description Required?
.list Placed on the outer-most tag (usually a ul or ol) that will contain list items Required.
.list__item Placed on the tag to apply the correct spacing to the items Required.
.list__item-content Placed on tag within list item. Only used when you want the bullet/number colour to be different to the text in the list item. Optional.
.list--primary Sets the list-style to use the UIF primary colour Optional.
.list--fancy Placed on the .list block Optionally used to provide fancy list styling.
.list__item--fancy Placed on the .list__item element Required to display fancy styling.
.list__item-content--fancy Placed on the .list__item-content element Required to display fancy styling.
[data-index='N'] Data attribute set on the .list__item element. This attribute is rendered in the circle next to the item. Required when using fancy styling.