Bullet point list

A bullet pointed 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

How it looks

List with bullet points

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

  

Coloured bullet points

Apply role="list" and a class of gg-c-list--{colour} (replace {colour} with either punk, green, or blue) 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" role="list">
  <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" role="list">
  <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" role="list">
  <li>Start with a fresh set of data, minutes and texts</li>
  <li>Give yourself one less thing to worry about</li>
</ul>