Sometimes when making an Email Design System, developers don't know if a link around a piece of text or an image will always be required. We can use the rule attribute to change the Design System code so that it works properly, whether a link is added or not.

First, let's look at a normal link:

<editable name="link">
<a href="" style="color:green;">headline</a>

We can use the rule attribute to remove the <a> tag if there is no value for href, like so:

 rule="{%remove_outer_unless href%}" 

However if we apply this to the <a> tag, we will also lose the style formatting to make the text green. We want that formatting to apply whether an <a> tag is present or not, so we need to add a <span> tag around the entire code snippet, and then add the style attribute to both. 

Complete Snippet


<span rule="{%remove_outer_if}" style="color:green;">
<editable name="link">
<a href="" rule="{%remove_outer_unless href%}" style="color:green;"></a>