Ordered list

Select font family

Select colour theme

Stop
Look
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.

HTML
CSS

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: 2rem 0;
  padding-left: 1rem;
  line-height: 2;
  max-width: 80%;
  margin-bottom: 1.5rem;
}

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

Back to all components