There are 2 attributes that can be used to replace content in a Taxi Email Design System:

  • replace=
  • replace-attributename= (where attributename is a typical HTML attribute, such as href)

In an anchor tag we typically use both kinds

<a replace-href="{{href}}" href="" replace="{{link_text}}">visit our site</a> 

The replace attribute tells Taxi to replace the content of the tag with the value from the link_text field, and the replace-href tag tells Taxi to replace the href attribute with the value from the href field.

The pattern of replace-attribute works with any attribute, not just hrefs.

  • The presence of, or value of, the original attribute value has no effect on the final rendered email, but it can be used to make the link work when previewing the Design System before loading it into Taxi
  • It is not required to include a corresponding attribute= just because you've included replace-attribute=

So far we have seen curly brackets used to reference a single variable. Multiple lookups in a single replace attribute are possible, as is having fixed content or a mixture of fixed content and variables. For example consider this editable:

<editable name="headline"> <field name="fontcolor" type="color" default="#333333"></field> <field name="size" type="number" default="20"></field> <field name="content" type="text"></field> <span replace-style="color:{{fontcolor}}; font-size:{{size}}pt;" replace="{{content}}"></span> </editable> 
  • Note that the contents of the original attribute will be overwritten entirely. In the example above, if you had additional style declarations specified, they would need to be added to the replace- attribute also

Next: Referencing variables across a document