Tick list

Lovely green ticks for your list


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
  • 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 it looks

Apply the class gg-c-tick-list 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
    <ul class="gg-c-tick-list" role="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>