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
to the <ul>
tag.
Use gg-c-tick-list__item
classes to apply the tick svg to the <li>
tag.
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>