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>

3. Joined list

View demo Open in new window
320 x 568
View code
<ul class="gg-c-joined-list gg-u-mb-small">
                    <li>
                        <div class="gg-c-joined-list__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6.12c.11-1.54-1.19-2.25-2.43-2.82a15.73 15.73 0 00-5.14-1.79.52.52 0 00-.48.22 8.67 8.67 0 00-2.67 3.45 3.56 3.56 0 00-2.93 0 2 2 0 00-.85 1.67 1.56 1.56 0 00-.4.15 2.06 2.06 0 00-.8 2.34h-.2a2.15 2.15 0 00-1.27 2.2 1.82 1.82 0 00-.71.82 1.57 1.57 0 00.14 1.77 3.94 3.94 0 001.29.87l-.28.46a.63.63 0 000 .3s0 .05-.06.09a2.36 2.36 0 00.55 2.47 13.25 13.25 0 002.39 1.52l-.21.37c-.46.67.63 1.3 1.08.64A23.33 23.33 0 009 17c.34-.81 1.32-4.19 2.66-4a.31.31 0 00.11.08c.73.32.05 2.36-.06 3.11a8.44 8.44 0 00-.07 1.88c-.23.7.77 1.27 1.1.56A15.28 15.28 0 0117 13.35c.45-.37.1-.94-.36-1 .08-.05.05 0 .11-.13l.05-.09c.25-.44.48-.89.72-1.34 1.91 4.12-2.44 7-2.77 11-.07.8 1.18.79 1.25 0 .24-2.57 2.39-4.55 3-7.08a6.36 6.36 0 00-.78-5.25c.51-1 1-2 1.58-2.94a.6.6 0 00.2-.4zm-12.65 0a3.64 3.64 0 011.35.18c-.23.47-.45.89-.67 1.29A10.29 10.29 0 006.74 7c-.14-.42.26-.79.61-.87zM5.91 8.07a3.81 3.81 0 011.49.6l-.74 1.21a2.43 2.43 0 00-1.12-.59c-.08-.43-.23-1.19.37-1.22zm0 2.81l.08.06c-.22.36-.43.72-.65 1.07a3.67 3.67 0 00-1.3-.57c-.04-1.06 1.31-1.22 1.89-.56zM3.2 13c.24-.79 1.1-.31 1.54 0l-.53.88C3.79 13.79 3 13.54 3.2 13zm12.57-1.52a.62.62 0 00.47.92l-.12.07A16.29 16.29 0 0013 15.75a10.7 10.7 0 01.31-1.24A2 2 0 0012.4 12h-.07a.5.5 0 01-.31-.11c-1.63-.29-2.4.93-3 2.27a46.42 46.42 0 01-2.17 4.63c-1-.58-2.87-1.16-2.35-2.55a.49.49 0 000-.2c1.24-2.08 2.54-4.2 3.81-6.3.69-1.22 1.37-2.42 2.07-3.63.55-1 1.26-2.75 2.21-3.32a11 11 0 013.05 1c.88.36 2.92.94 3.08 2.09z"></path><path d="M15.23 5c-.31-.07-.6-.21-.91-.28a4.32 4.32 0 00-.88 0 .52.52 0 00-.39.25.52.52 0 00-.34.65.3.3 0 000 .1c.16.3.35.29.64.36a8.58 8.58 0 01.83.35 1.41 1.41 0 001.55-.26c.53-.55.04-1.04-.5-1.17z"></path></svg>
                        </div>
                        <span class="gg-u-text-speak-up">Text PAC to 65075 from your current SIM. You’ll get a code in 60 seconds. Text PAC</span>
                    </li>
                    <li>
                        <div class="gg-c-joined-list__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.5 14.2c.2-.4.4-.8.7-1.3 1.1-.9 1.6-2.8.3-3.8-.6-.4-1.5-.5-2.3-.1-.6.5-1.2 1.1-1.5 1.8v-.6c.3-1.6 2.5-5.4.6-6.8-.5-.2-1-.3-1.6-.2h-.2c-.2.1-.5.2-.7.3-.9.7-1.1 2.1-1.4 3.1V7c-.2.7-.5 1.5-.6 2.2-.1-.3-.1-.6-.1-1 .1-1.3 0-2.6-.2-3.9-.1-.8-.6-1.5-1.4-1.8-.3-.3-.6-.4-1-.3-1.1.4-1.3 2.7-1.2 5.1h-.2c-.9-1.9-2-3.5-3.3-2.9-1 .3-1 1.7-.6 3.3v.1c.2.7.4 1.5.6 2.2-.6.8-1.2 1.7-1.6 2.7-.2.5-.3 1-.1 1.5-.4-.2-.8-.2-1.2-.2h-.3c-.6 0-1.2.5-1.2 1.2-.1 1.3 1.3 2.6 2.1 3.3.8.7 1.7 1.3 2.5 2 .4.3.6.8 1.2 1.1.6.2 1.4-.2.8-.9-1-1.1-2.1-2.1-3.1-3.1-.4-.4-2.2-1.4-2.1-2 .1-.6.9-.3 1.2 0 .4.2 1.1.4 1.8.7 1.1.8 2.3 1.5 3.3 2.2 1.8 1.3 3.5 2.7 5.3 3.8 2.9 1.8 5.2-3.6 6.6-5.5.1-.2.2-.4.1-.5.1-1.2-.3-1.5-1.2-2.1zm-2.2-1.9c.3-.5.9-1.2 1.1-1.5.2-.2.4-.4.6-.5.2-.1.5-.1.8 0 .7.5-.4 2.2-1.2 3.3-.6-.4-1.1-.8-1.6-1.2.1 0 .2 0 .3-.1zm-3-3.5c.2-.5 1.2-5.4 2.2-4.1.2.3.2.7.1 1-.3.8-.6 1.6-.8 2.4-.1.6-.2 1.2-.2 1.8V10.2c0 .4-.1.8-.1 1.2-.6-.4-1.1-.8-1.7-1.2.2-.5.3-1 .5-1.4zM11 4.3c.1-.3.3-.4.6-.5.3 0 .5.2.6.4.1.2.1.5.1.8 0 1.1.1 2.2.1 3.2-.4-.2-.9-.5-1.3-.6 0-.9-.1-1.7-.1-2.5-.1-.2-.1-.5 0-.8zM7.8 6.1c.1.2.1.4.2.6l.5 1c-.1.1-.2.1-.3.2-.3.3-.6.6-.9 1-.3-.9-.5-1.8-.6-2.7-.1-.8.7-.9 1.1-.1zM16.9 21c-1 .7-1.2.1-2.2-.7l-5-3.6c-.1-.1-.2-.1-.3-.2-.1 0-.2-.1-.2-.1s-.1 0-.1-.1l-.3-.2c-.8-.6-2.9-1.5-2.9-2.6 0-.9 2.7-4.2 3.4-4.7s1.7.3 2.8 1.1l5.7 4.1c1 .7 2.4 1.4 2.6 2.3-1 1.4-2.1 3.8-3.5 4.7z"></path><path d="M9.9 11.1l.3 4.3c.1.9 1.4.9 1.3 0l-.3-4.3c0-.8-1.3-.8-1.3 0zM12.8 13l.3 4.3c.1.9 1.4.9 1.3 0l-.3-4.3c-.1-.9-1.4-.9-1.3 0zM1.7 6.6L3.8 8c.8.5 1.5-.7.7-1.2L2.4 5.4c-.7-.5-1.4.7-.7 1.2zM4.5 9.2l-2.3-.4c-.8-.2-1.2 1.2-.3 1.3l2.2.4c.9.3 1.3-1.1.4-1.3z"></path></svg>
                        </div>
                        <span class="gg-u-text-speak-up">Order your SIM and activate it as soon as it arrives</span>
                    </li>
                    <li>
                        <div class="gg-c-joined-list__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.8363 14.0046C14.1073 14.0086 14.3793 14.0176 14.6493 14.0296V15.9446H13.8873C13.8863 15.2956 13.8743 14.6486 13.8363 14.0046ZM11.3923 14.0316C11.5183 14.0386 11.6443 14.0356 11.7703 14.0446C12.0293 14.0276 12.2893 14.0286 12.5483 14.0206C12.5593 14.6586 12.5833 15.3006 12.5993 15.9446H11.3873C11.3503 15.3076 11.3493 14.6686 11.3923 14.0316ZM8.70032 14.0276C9.18132 14.0046 9.66232 13.9866 10.1433 13.9896C10.0983 14.6406 10.0993 15.2936 10.1373 15.9446H8.70032V14.0276ZM14.6493 9.78658C13.5583 9.78658 12.4683 9.79358 11.3783 9.81158C11.3493 9.10658 11.3733 8.40158 11.3783 7.70458H14.6493V9.78658ZM11.7703 12.7946C10.7483 12.7256 9.72332 12.7286 8.70032 12.7776V11.1476C10.6863 11.0606 12.6643 11.0256 14.6493 11.0366V12.7796C13.6903 12.7366 12.7293 12.7346 11.7703 12.7946ZM8.94632 7.69458C8.95832 7.69658 8.96832 7.70258 8.98032 7.70458H10.1403C10.1913 8.41558 10.1343 9.13258 10.1313 9.85158C9.65432 9.86658 9.17732 9.87258 8.70032 9.89758V7.69458H8.94632ZM15.2793 6.45458H9.00332C8.99132 6.45258 8.98232 6.44558 8.97032 6.44458H8.08032C7.73632 6.45458 7.46032 6.73158 7.45032 7.07458V16.5746C7.45532 16.9146 7.73032 17.1896 8.07032 17.1946H15.2793C15.6243 17.1896 15.8993 16.9086 15.8993 16.5646V7.08458C15.8993 6.74058 15.6243 6.46058 15.2793 6.45458Z" fill="white"/><mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="5" y="2" width="14" height="19"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.5H18.4538V20.1547H5V2.5Z" fill="white"/></mask><g mask="url(#mask0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.1996 7.33478L17.1406 18.8348H9.76063C8.58963 18.7298 7.41263 18.7328 6.24163 18.8188C6.36463 18.0498 6.36463 17.2648 6.24063 16.4948V4.77478C6.21463 4.42178 6.22863 4.06778 6.24063 3.71478H6.84063C6.92063 3.76878 7.00963 3.81178 7.10963 3.82478H13.5296C13.6586 3.80878 13.7646 3.74578 13.8566 3.66678L17.2456 7.18478C17.2256 7.23278 17.2066 7.28078 17.1996 7.33478ZM18.2796 6.45478V6.48478L14.5996 2.64478C14.2966 2.49278 14.1276 2.46778 13.8816 2.53578C13.8136 2.49978 13.7806 2.56278 13.7026 2.55278L13.5296 2.52478L7.50663 2.57178C7.44663 2.59778 7.37863 2.61378 7.29963 2.61378C7.22663 2.61378 7.16463 2.59778 7.10763 2.57478H5.63063C5.28563 2.57478 5.00563 2.85078 4.99963 3.19478C5.03963 8.64778 5.03963 14.0918 4.99963 19.5238C4.99963 19.8688 5.27563 20.1488 5.61963 20.1548L17.7606 20.0848C18.1046 20.0408 18.3496 19.7258 18.3056 19.3808C18.3036 19.3648 18.2956 19.3528 18.2926 19.3368C18.3406 19.2608 18.3786 19.1788 18.3896 19.0848L18.4496 7.33478C18.4406 7.26578 18.4146 7.20378 18.3866 7.14378C18.4906 6.93478 18.4876 6.67278 18.2796 6.45478Z" fill="white"/></g></svg>
                        </div>
                        <span class="gg-u-text-speak-up">Give us your PAC code and we’ll bring your number. Easy.</span>
                    </li>
                </ul>