Ordered list

If you like your lists to be ordered, this is the one for you


How we design them

  • Keep copy short
  • Start each line with a capital letter (unless using words like “giffgaff” and “goodybag”)
  • Don’t put a full stop at the end of each line
  • Numbers in ordered lists must be decimal and have a full stop

How it looks

Apply the class gg-c-list-ordered and role="list" to the <ul> tag.

Use gg-c-tick-list__item classes to apply the tick svg to the <li> tag.

View demo Open in new window
320 x 568
View code
    
<ol class="gg-c-list-ordered" role="list">
  <li>Thing number one</li>
  <li>Thing number two</li>
  <li>Thing number three</li>
  <li>Thing number four</li>
  <li>Thing number five</li>
  <li>Thing number six</li>
  <li>Thing number seven</li>
  <li>Thing number eight</li>
  <li>Thing number nine</li>
  <li>Thing number ten</li>
</ol>