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 demo Open in new window
320 x 568
View 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 &quot;giffgaff&quot; and &quot;goodybag&quot;)</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 demo Open in new window
320 x 568
View 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;">&nbsp;&nbsp;1&nbsp;&nbsp;</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 &quot;giffgaff&quot; or &quot;goodybag&quot;)</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;">&nbsp;&nbsp;2&nbsp;&nbsp;</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;">&nbsp;&nbsp;3&nbsp;&nbsp;</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;">&nbsp;&nbsp;4&nbsp;&nbsp;</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;">&nbsp;&nbsp;5&nbsp;&nbsp;</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;">&nbsp;&nbsp;6&nbsp;&nbsp;</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;">&nbsp;&nbsp;7&nbsp;&nbsp;</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;">&nbsp;&nbsp;8&nbsp;&nbsp;</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;">&nbsp;&nbsp;9&nbsp;&nbsp;</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;">&nbsp;10&nbsp;</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 demo Open in new window
320 x 568
View 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>