Referencing up the hierarchy

So far we’ve looked at referencing a field which is in the same editable element as the reference to it.

<modulezone name="my_modulezone"> <module name="my_module"> <field name="my_module_field"></field> <editable name="heading"> <field name="header_text"></field> <content replace="{{header_text}}">Hello</content> </editable> </module> </modulezone> 

To reference a field which is declared outside of an editable but inside the same module the field name needs to be prefixed with module:


If the variable is referenced inside the module tag, but outside of the editable tag, then just the ‘my_module_field’ part of the name is needed. Similarly fields which belong at the modulezone level are prefixed with modulezone and document level fields are prefixed with document.


For example, to change the background colour of the whole email you could use a field anywhere in the HTML outside of any modulezones or modules.

 <field type="color" name="bg_color" label="background color"></field> 

Then throughout the Email Deign System, whenever you want to use this field to change the background colour, use the document prefix as you'll be referencing a document level field. If you have a field inside of a modulezone but outside of any modules you can use the modulezone prefix in the same way.

<table replace-bgcolor="{{document.bg_color}}">

Every field and reference has a scope. The scope of an element is the level at the hierarchy at which it lives. The scope is always either:

  • editable
  • module
  • modulezone
  • document

When a reference has in the same scope as the field, only the field name needs to be used.

Referencing down and across the hierarchy

Any field can be referenced from anywhere in a Taxi Design System. The language has been designed so that the most usual use cases have the shortest names.

The singular forms of ‘module’ and ‘modulezone’ are short hands for ‘this module’ and ‘this modulezone’. To use a different modulezone or module or editable the plural form is used and a name must be specified.

Some examples:


In the last example we’ve not specified which module the editable is in. Taxi will know we mean the same module as the reference.


Next: Using rules to change HTML structure based on content