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

Code

Use the tabs to view the ordered list source code.

Use left and right arrows to navigate between tabs.

HTML

        
        
  <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>
  </ol>

      

CSS


  /*
  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