Control Colour theme
Control Font family

Ordered list

An ordered list groups items that have a numerical ordering

  1. Stop
  2. Look
  3. Listen

Ordered lists should:

  • be used if the order of the items is relevant

Ordered lists should not:

  • be used if the order of the items is not relevant


Use the tabs to view the ordered list source code.

Use left and right arrows to navigate between tabs.


  <ol class="ordered-list">
    <li class="ordered-list__list-item">Stop</li>
    <li class="ordered-list__list-item">Look</li>
    <li class="ordered-list__list-item">Listen</li>



  Ordered lists
  ----------------------------------- */

.ordered-list {
  list-style: none;
  margin: 1em 0;
  padding-left: 1em;

.ordered-list__list-item {
  margin-bottom: .4em;
  list-style-type: decimal;


Back to all components