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="http://google.com" style="color:green;">headline</a> </editable>
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.
<span rule="{%remove_outer_if editables.link.href%}" style="color:green;">
<editable name="link">
<a href="" rule="{%remove_outer_unless href%}" style="color:green;"></a>
</editable>
</span>