Skip to main content

Bullet list

Standard HTML lists like <ul> and <ol> are not rendered consistently across email clients. A safer pattern is to store the content in one text field and render each line as a custom table-based bullet.

When to use this pattern​

Use this approach when:

  • the design needs pixel-consistent bullets across clients
  • the content is short and editorial
  • a full repeatable setting would be overkill

If each bullet needs its own structure, controls, or links, use Repeatable settings instead.

Step 1: Create the input​

Create a setting, for example article, and add a Multi-line Text input called text.

Enter one bullet per line in the editor.

TODO: Add a screenshot of the multi-line text input being used to enter one bullet per line.

Step 2: Split the content into bullets​

If the content is entered one line at a time in the rich text field, splitting on <br> is the most practical approach:

{% assign bulletlist = article.text | split: "<br>" %}

Step 3: Loop over the bullets​

Once the text is split, loop through the values and render each line inside a table row.

{% assign bulletlist = article.text | split: "<br>" %}
{% for bullet in bulletlist %}
  {{ bullet }}
{% endfor %}

Full example​

<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
  <tr>
    <td align="center">
      <table class="w-90p" cellspacing="0" cellpadding="0" border="0" style="width: 600px;">
        <tr>
          <td class="w-20" style="width:30px;"> </td>
          <td align="left">
            <table cellspacing="0" cellpadding="0" border="0">
              {% assign bulletlist = article.text | split: "<br>" %}
              {% for bullet in bulletlist %}
                <tr>
                  <td class="w-left" align="left" style="font-family: 'Avenir Next', Arial, Helvetica, sans-serif; color:#{{ textColor }}; font-weight: 500; font-size: 16px; line-height:20px;">
                    &bull;
                  </td>
                  <td style="width:10px;">&nbsp;</td>
                  <td class="w-left" align="left" style="font-family: 'Avenir Next', Arial, Helvetica, sans-serif; color:#{{ textColor }}; font-weight: 500; font-size: 16px; line-height:20px;">
                    {{ bullet }}
                  </td>
                </tr>
                <tr>
                  <td colspan="3" height="5" style="height:5px; font-size:1px; mso-line-height-rule:exactly; line-height:1px;">&nbsp;</td>
                </tr>
              {% endfor %}
            </table>
          </td>
          <td class="w-20" style="width:30px;"> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>