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 to the <ul> tag.
Use gg-c-list__item classes to apply the bullet point to the <li> tag.
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>
Coloured bullet points
Apply a class of gg-c-list--{colour} (replace {colour} with either pink, green, or blue) to the <ul> to apply coloured bullet points.
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>