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
How they look
1. List with bullet points
View demoView code
<tr>
<td style="padding-top: 16px; padding-left: 16px; background-color: #FFFFFF; color: #000000; overflow: hidden;" bgcolor="#FFFFFF">
<table cellpadding="0" cellspacing="0" border="0" role="list" style="table-layout: auto; overflow: hidden;">
<tbody>
<tr>
<td style="width: 8px; height: 8px; padding-top: 8px; vertical-align: top; overflow: hidden;" width="8" height="8" valign="top"><img src="images/bullet.png" style="display: block; width: 8px; height: 8px;" width="8" height="8"></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">New bulleted list has square icons instead of a boring bullet!</span></td>
</tr>
<tr>
<td style="width: 8px; height: 8px; padding-top: 8px; vertical-align: top; overflow: hidden;" width="8" height="8" valign="top"><img src="images/bullet.png" style="display: block; width: 8px; height: 8px;" width="8" height="8"></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Use as many of these as you like - unlike ticks, there is no limit</span></td>
</tr>
<tr>
<td style="width: 8px; height: 8px; padding-top: 8px; vertical-align: top; overflow: hidden;" width="8" height="8" valign="top"><img src="images/bullet.png" style="display: block; width: 8px; height: 8px;" width="8" height="8"></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Start each line with a capital letter (unless using words like "giffgaff" and "goodybag")</span></td>
</tr>
<tr>
<td style="width: 8px; height: 8px; padding-top: 8px; vertical-align: top; overflow: hidden;" width="8" height="8" valign="top"><img src="images/bullet.png" style="display: block; width: 8px; height: 8px;" width="8" height="8"></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Don't put a full stop at the end of each line</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
2. Ordered list
View demoView code
<tr>
<td style="padding-top: 16px; padding-left: 16px; background-color: #FFFFFF; color: #000000; overflow: hidden;" bgcolor="#FFFFFF">
<table cellpadding="0" cellspacing="0" border="0" role="list" style="table-layout: auto; overflow: hidden;">
<tbody>
<tr>
<td style="text-align: center; width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top" align="center"><span class="gg-e-text" style="padding-top: 4px; background-color: #000000; color: #FFFFFF; text-align: center; margin: auto; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: bold; line-height: 24px;"> 1 </span></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Start each line of your list with a capital letter (unless it's an exception like "giffgaff" or "goodybag")</span></td>
</tr>
<tr>
<td style="text-align: center; width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top" align="center"><span class="gg-e-text" style="padding-top: 4px; background-color: #000000; color: #FFFFFF; text-align: center; margin: auto; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: bold; line-height: 24px;"> 2 </span></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Don't put a full stop at the end of each line</span></td>
</tr>
<tr>
<td style="text-align: center; width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top" align="center"><span class="gg-e-text" style="padding-top: 4px; background-color: #000000; color: #FFFFFF; text-align: center; margin: auto; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: bold; line-height: 24px;"> 3 </span></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Thing number three</span></td>
</tr>
<tr>
<td style="text-align: center; width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top" align="center"><span class="gg-e-text" style="padding-top: 4px; background-color: #000000; color: #FFFFFF; text-align: center; margin: auto; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: bold; line-height: 24px;"> 4 </span></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Thing number four</span></td>
</tr>
<tr>
<td style="text-align: center; width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top" align="center"><span class="gg-e-text" style="padding-top: 4px; background-color: #000000; color: #FFFFFF; text-align: center; margin: auto; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: bold; line-height: 24px;"> 5 </span></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Thing number five</span></td>
</tr>
<tr>
<td style="text-align: center; width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top" align="center"><span class="gg-e-text" style="padding-top: 4px; background-color: #000000; color: #FFFFFF; text-align: center; margin: auto; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: bold; line-height: 24px;"> 6 </span></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Thing number six</span></td>
</tr>
<tr>
<td style="text-align: center; width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top" align="center"><span class="gg-e-text" style="padding-top: 4px; background-color: #000000; color: #FFFFFF; text-align: center; margin: auto; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: bold; line-height: 24px;"> 7 </span></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Thing number seven</span></td>
</tr>
<tr>
<td style="text-align: center; width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top" align="center"><span class="gg-e-text" style="padding-top: 4px; background-color: #000000; color: #FFFFFF; text-align: center; margin: auto; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: bold; line-height: 24px;"> 8 </span></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Thing number eight</span></td>
</tr>
<tr>
<td style="text-align: center; width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top" align="center"><span class="gg-e-text" style="padding-top: 4px; background-color: #000000; color: #FFFFFF; text-align: center; margin: auto; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: bold; line-height: 24px;"> 9 </span></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Thing number nine</span></td>
</tr>
<tr>
<td style="text-align: center; width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top" align="center"><span class="gg-e-text" style="padding-top: 4px; background-color: #000000; color: #FFFFFF; text-align: center; margin: auto; font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: bold; line-height: 24px;"> 10 </span></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">Thing number ten</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
3. Tick list
View demoView code
<tr>
<td style="padding-top: 16px; padding-left: 16px; background-color: #FFFFFF; color: #000000; overflow: hidden;" bgcolor="#FFFFFF">
<table cellpadding="0" cellspacing="0" border="0" role="list" style="table-layout: auto; overflow: hidden;">
<tbody>
<tr>
<td style="width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top"><img src="images/tick.png" style="display: block; width: 24px; height: 24px;" width="24" height="24"></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">IMG IN DOM</span></td>
</tr>
<tr>
<td style="width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top"><img src="images/tick.png" style="display: block; width: 24px; height: 24px;" width="24" height="24"></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">5.8 inch screen</span></td>
</tr>
<tr>
<td style="width: 24px; height: 24px; vertical-align: top; overflow: hidden;" width="24" height="24" valign="top"><img src="images/tick.png" style="display: block; width: 24px; height: 24px;" width="24" height="24"></td>
<td role="listitem" style="vertical-align: top; overflow: hidden; padding-bottom: 16px; padding-left: 8px; text-align: left; line-height: unset;" valign="top" align="left"><span class="gg-e-text" style="font-family: 'Poppins', 'Helvetica', 'arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">enhanced audio</span></td>
</tr>
</tbody>
</table>
</td>
</tr>