Lists

Connected items, one below another


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
  • Using ticks? make them green

Why do ticks have to be green?

We’re pretty sure colours are important, so important they influence how we feel and how we behave, but in what way exactly? We set out to find out.

Results: In one test we found that the choice of colour had a pretty big impact on people choosing to buy credit. Even though the content was the same, having green ticks as bullet points saw a jump in sales while black ticks resulted in a fall.

How they look

1. List with bullet points

Apply the class gg-c-list to the <ul> tag.

Use gg-c-list__item classes to apply the bullet point to the <li> tag.

View demo Open in new window
320 x 568
View code
<ul class="gg-c-list">
  <li>Start with a fresh set of data, minutes and texts</li>
  <li>Give yourself one less thing to worry about</li>
</ul>

2. Coloured bullet points

Apply a class to the <ul> to apply coloured bullet points.

View demo Open in new window
320 x 568
View code
<ul class="gg-c-list gg-c-list--pink">
  <li>Start with a fresh set of data, minutes and texts</li>
  <li>Give yourself one less thing to worry about</li>
</ul>

<ul class="gg-c-list gg-c-list--green gg-u-mt-large">
  <li>Start with a fresh set of data, minutes and texts</li>
  <li>Give yourself one less thing to worry about</li>
</ul>

<ul class="gg-c-list gg-c-list--blue gg-u-mt-large">
  <li>Start with a fresh set of data, minutes and texts</li>
  <li>Give yourself one less thing to worry about</li>
</ul>

3. Ordered list

Apply the class gg-c-list-ordered 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">
  <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>

3. Tick list

Apply the class gg-c-tick-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
<ul class="gg-c-tick-list">
  <li class="gg-c-tick-list__item">Start with a fresh set of data, minutes and texts</li>
  <li class="gg-c-tick-list__item">Give yourself one less thing to worry about</li>
</ul>