Menu

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 tables, 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. The first bullet point will show by default, as there is default content, however the second and third bullet points will be removed unless content is added.

Complete Snippet

HTML

<editable name="bulletpointlist" label="Bullet Point List">
	<field type="rich" name="item1" label="Item 1" defult="Bullet point text"></field>
	<field type="rich" name="item2" label="Item 2"></field>
	<field type="rich" name="item3" label="Item 3"></field>
</editable>
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr rule="{% show_if editables.bulletpointlist.item1 %}">
    	<td valign="top" align="left" style="padding:0 10px;font-family:Helvetica;font-size:16px;color:#111111;">&bull;</td>
    	<td valign="top" align="left" style="padding:0 10px;font-family:Helvetica;font-size:16px;color:#111111;" replace="{{editables.bulletpointlist.item1}}"></td>
    </tr>
    <tr rule="{% show_if editables.bulletpointlist.item2 %}">
    	<td valign="top" align="left" style="padding:0 10px;font-family:Helvetica;font-size:16px;color:#111111;">&bull;</td>
    	<td valign="top" align="left" style="padding:0 10px;font-family:Helvetica;font-size:16px;color:#111111;" replace="{{editables.bulletpointlist.item2}}"></td>
    </tr>
    <tr rule="{% show_if editables.bulletpointlist.item3 %}">
    	<td valign="top" align="left" style="padding:0 10px;font-family:Helvetica;font-size:16px;color:#111111;">&bull;</td>
    	<td valign="top" align="left" style="padding:0 10px;font-family:Helvetica;font-size:16px;color:#111111;" replace="{{editables.bulletpointlist.item3}}"></td>
    </tr>
</table>

← Back to /Code