There are a few approaches to coding bullet points in Taxi Design Systems - in this example we'll use a list structure.
Using this approach, Email Design System developers can add a bullet point list structure to a module. We do this by adding fields for the content of the various bullet points, building out a list structure using <ul> and <li> tags, and then using rules to remove any empty rows as required.
In this example, there are three rows, but the technique could be expanded out as required. All three rows have default content, so all will appear when this module is added.
You can control how many rows are in your list by adding more <il> tags and you can control how many appear by default, by adding default content.
The below example also includes a checkbox field which allows you to turn the whole list off if needed. This approach will also work using <ol> tags.
<editable name="bulletedlist" label="Bulleted list">
<field name="ul" label="Turn unordered list on or off" type="checkbox" default="false">
<field type="rich" name="ul_title" label="bulleted list title" default="Bulleted list"></field>
<field type="rich" name="bullet1" label="bullet one" default="List item 1"></field>
<field type="rich" name="bullet2" label="bullet two" default="List item 2"></field>
<field type="rich" name="bullet3" label="bullet three" default="List item 3"></field></field>
</editable>
<content rule="{% show_if editables.bulletedlist.ul %}" replace="{{editables.bulletedlist.ul_title}}">Bulleted list</content>
<ul rule="{% show_if editables.bulletedlist.ul %}">
<li rule="{% show_if editables.bulletedlist.bullet1 %}"><content replace="{{editables.bulletedlist.bullet1}}">List item 1</content></li>
<li rule="{% show_if editables.bulletedlist.bullet2 %}"><content replace="{{editables.bulletedlist.bullet2}}">List item 2</content></li>
<li rule="{% show_if editables.bulletedlist.bullet3 %}"><content replace="{{editables.bulletedlist.bullet3}}">List item 3</content></li>
</ul>