Unordered List
ready

Introduction

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

Examples

Simple ordered list

  • Item
  • Item
  • Item
<ul 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>
    </ul>

Simple ordered list

  • Item
  • Item
  • Item
<ul 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>
    </ul>

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.