NAV
DML HTML

DML Introduction

DML is the markup language for Dyspatch blocks, created to help make building custom template blocks for the visual editor faster and easier.

Basic Block Structure

<dys-block>
  <dys-row>
    <dys-column>
      <dys-text editable="greeting">
          Hello there!
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>Hello there! </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

DML is flexible, wrap your template content in a variety of DML tags to create responsive and dynamic template blocks for your team to use in Dyspatch.

Block Example

A Two Column Block

Here is an example block with two columns, an image and two rows of text. Once dropped into a template in the visual editor, the image and the 'Lorem ipsum' filler text can be edited to suit the needs of the template.

<dys-block>
  <dys-inputs>
    <dys-string key="name" placeholder="Satsuki" />
  </dys-inputs>
  <dys-row>
    <dys-column>
      <dys-img editable="image" src="https://d1pgqke3goo8l6.cloudfront.net/n8yBxvNaR2293QAhTZw5_templateimage.png" alt="Descriptive alternative text" width="50px" />
    </dys-column>
    <dys-column>
      <dys-text>
        Hello @{name}
      </dys-text>
      <dys-text editable="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed nulla nibh.
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:300px;">
<![endif]-->
                    <div class='dys-column-per-50 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;border-spacing:0px;'>
                                        <tbody>
                                            <tr>
                                                <td style='width:50px;'>
                                                    <img alt='Descriptive alternative text' height='auto' src='https://d1pgqke3goo8l6.cloudfront.net/n8yBxvNaR2293QAhTZw5_templateimage.png' style='border:none;display:block;font-size:13px;height:auto;outline:none;text-decoration:none;width:100%;' width='50' />
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td><td style="vertical-align:top;width:300px;">
<![endif]-->
                    <div class='dys-column-per-50 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>Hello Satsuki </div>
                                </td>
                            </tr>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed nulla nibh. </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

AMP for Email

Introduction

AMP for email is an exciting new technology from Google that allows your users to interact with an email directly. All without having to leave their inbox! For example AMP can be used to power use cases like:

Read our AMP documentation to start sending AMP enabled emails.

AMP + DML

Since DML exports to AMP and HTML you save time by only having to build your blocks once. Continue below to see how to apply AMP concepts to DML.

State & Bind

Complex AMP emails typically have an initial state (for example, a shopping cart) and then a way to modify that state (like adding an item to said shopping cart).

For performance reasons, AMP emails aren't evaluated on load. This means components should have default content that makes sense when the user first opens the email.

Managing State - A Simple Example

State can be locally set at the block and template levels. Simply put some JSON in the "Initial AMP State" pane in the "Data" tab.

Dyspatch AMP data pane

State can then be accessed, updated, and evaluated through a variety of mechanisms. The Dyspatch block editor lets you test your AMP state and see what it looks like as it updates.

Below (code to the right), is a simple example of using state to update a text field.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-text [text]='"#Invites:" + state.invites'>#Invites: 0</dys-text>
      <dys-button align='center' 
                  color='black'
                  background-color='orange'
                  on='tap:AMP.setState({ state: { invites: state.invites + 1 }})'>
        Invite more people
      </dys-button>
    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>#Invites: 0</div>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='orange' role='presentation' style='background:orange;border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <p style='background:orange;border-radius:3px;color:black;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;'>Invite more people </p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

In this example, state is getting set on the dys-button component with on='tap:AMP.setState({invites + 1}). Now whenever the button is clicked the invites variable will increment by 1.

Also note that the dys-text component has a [text] attribute. Whenever an update to state is triggered the text will be updated. Remember, AMP emails aren't evaluated on payload. Make sure the initial text makes sense!

Binding values

In AMP, values can be bound to an action or data change. For example, you could increment the number of items in a shopping cart.

Typically this is done in conjunction with state, but it's also possible to show computed values. Use square braces to declare a bind: [text]="example".

<dys-block>
  <dys-row>
    <dys-column>
      <dys-text [text]='state.numbers.filter(x => x % 2 == 0)'>
        Displays even numbers from an array named "numbers"
      </dys-text>

      <dys-button align='center' color='black' background-color='white' on='tap:AMP.setState({})'>
        Evaluate
      </dys-button>
    </dys-column>
  </dys-row>
</dys-block>

Read more here.

Five types of bindings are supported for most elements, and elements may have additional supported attributes. Refer to the individual component for specifics.

attribute behavior
[text] Change the text in an element
[class] Bind the CSS class
[hidden] Show or hide an element
[width]/[height] Change the size of an element
[aria-*] Update information to assistive programs (like screenreaders)

Triggering an event

All elements support a tap event that will fire when an element is clicked or tapped.

<dys-block>
  <!-- This example will update when the text in the first column is clicked -->
  <dys-row>
    <dys-column>
      <dys-text on='tap:AMP.setState({state: {text: "Updated!"}})'>
        Hello there!
      </dys-text>
    </dys-column>
    <dys-column>
      <dys-text [text]='state.text'>
        Will update
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>

Refer to the specific component to see what additional events the element supports.

Multiple events can be listened to on an element by separating the events with a ;. For example: on="tap:AMP.setState({state: {tapped: true}}),submit-success:AMP.setState({state: {submitted: true}})"

Interactivity with Actions

Use actions to add some interactivity to your AMP powered emails when an event is fired.

All AMP elements support these basic actions:

action description
hide hide the target element
show show the target element
toggleVisibility toggle the visibility of the target element
toggleClass(class=STRING, force=BOOLEAN) toggle the class of the target element. force is optional and if set to true will ensure that the class is added but not removed
focus make the target element gain focus

Multiple actions can be executed in a sequence by separating each action with a ,. For example: on='tap:elem1.toggleVisibility,elem2.toggleVisibility'

<dys-block>
  <!-- A simple example using AMP actions to show and hide buttons -->  
  <dys-row>
   <dys-column>
     <dys-button id='button1' on='tap:button2.toggleVisibility'>
       Toggle Button 2
     </dys-button>
   </dys-column>
   <dys-column>
     <dys-button id='button2' on='tap:button1.toggleVisibility' hidden>
       Toggle Button 1
     </dys-button>
   </dys-column>
  </dys-row>
</dys-block>

AMP Templates

AMP has its own templating system that's used to display dynamic information when the email is opened or if the state has changed.

You can use the same feature in DML with the dys-template element. Note that variables will need to be in AMP mustache format. Dyspatch will automatically escape the variables on export so you can safely use the email in your provider.

You can use a top level dys-templates element in a block to write out the templates a block will use. For example:

<dys-block>
  <dys-templates>
    <dys-template id="myTicketCount">
      Tickets remaining: {{tickets}}
    </dys-template>
  </dys-templates>

  ...

  <dys-list template="myTicketCount">
    ...
  </dys-list>
</dys-block>

It's also possible to use the dys-template element in components that work with it. See Form and List for more information.

<dys-block>
  <dys-list>
  <dys-list-dynamic>
    <dys-template>
      Tickets remaining: {{tickets}}
    </dys-template>
  <dys-list-dynamic>
  </dys-list>
</dys-block>

Components

Dyspatch components allow you to quickly write Dyspatch blocks that render correctly across the most popular email clients.

Alignment & Localization

DML supports multiple different types of alignment so you don't have to compromise on the emails created for users that read right-to-left languages.

Components that support an align or text-align support the below values and will align themselves based on the language that's exported.

Attribute Left-to-Right languages Right-to-Left languages
center center center
left left left
right right right
start left right
end right left

dys-block

All block content must be placed inside dys-block tags. Most blocks you create will just contain <dys-rows> and <dys-columns>, but you can also use <dys-raw> to insert ESP specific code.

Use the <dys-export> tag target specific export languages inside of a block.

<dys-block>
  <!-- All block content goes in here -->
  <dys-export targets="ampscript">
    <dys-raw>
      <!-- AMPScript tracking snippet -->
      <custom name="opencounter" type="tracking" />
    </dys-raw>
  </dys-export>
  <dys-export targets="handlebars">
    <dys-raw>
      <img style="display:none;" src="custom-tracking-pixel.jpg" />
    </dys-raw>
  </dys-export>
  <dys-row>
    <dys-column>
      <dys-text>Hello!</dys-text>
    </dys-column>
  </dys-row>
</dys-block>
<!-- All block content goes in here -->
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>Hello!</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

dys-row

Use rows to structure the vertical layout of a Dyspatch block. The full-width attribute is used to manage the background width. The default is 600px wide, setting full-width="full-width" will produce a row with a background that fills 100% of the row.

Note that rows cannot be nested into rows and that content in a row should also be wrapped in a column.

<dys-block>
  <dys-row background-color="#00bdb1">
    <dys-column>
      <dys-text color="#FFFFFF">This is a row</dys-text>
    </dys-column>
  </dys-row>

  <!-- Full width row -->
  <dys-row full-width="full-width" background-color="#00bdb1">
    <dys-column>
      <dys-text color="#FFFFFF">This is a full width row, you may need to increase your browser width to see the difference!</dys-text>
    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='background:#00bdb1;background-color:#00bdb1;margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='background:#00bdb1;background-color:#00bdb1;width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#FFFFFF;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>This is a row</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!-- Full width row -->
<table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='background:#00bdb1;background-color:#00bdb1;width:100%;'>
    <tbody>
        <tr>
            <td>
                <div style='margin:0px auto;max-width:600px;'>
                    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
                        <tbody>
                            <tr>
                                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                                            <tr>
                                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                                    <div style='color:#FFFFFF;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>
                                                        This is a full width row, you may need to increase your browser width to see the difference!
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

attribute unit description default value
background-color color row color n/a
background-repeat string css background repeat repeat
background-size percent/px css background size auto
background-url url background url n/a
border string css border format none
border-bottom string css border format n/a
border-left string css border format n/a
border-radius px border radius n/a
border-right string css border format n/a
border-top string css border format n/a
css-class string class name, added to the root HTML element created n/a
direction string ltr / rtl ltr
full-width string make the row full-width n/a
padding px supports up to 4 parameters 20px 0
padding-bottom px row bottom offset n/a
padding-left px row left offset n/a
padding-right px row right offset n/a
padding-top px row top offset n/a
text-align string css text-align center

dys-column

Columns enable you to horizontally organize the content within your rows. They must be located under dys-row tags in order to be considered by the engine. To be responsive, columns are expressed in terms of percentage.

Every single column has to contain something because they are responsive containers, and will be vertically stacked on a mobile view. Any standard component, or component that you have defined and registered, can be placed within a column — except dys-column or dys-row elements.

Columns are meant to be used as a container for your content. They must not be used as an offset. Any dys-element included in a column will have a width equivalent to 100% of this column's width.

Columns cannot be nested into columns, and rows cannot be nested into columns. Columns must be placed inside a dys-row.

<dys-block>
  <dys-row>

    <!-- Your first column -->
    <dys-column>
      <dys-text>First Column Content</dys-text>
    </dys-column>

    <!-- Your second column -->
    <dys-column>
        <dys-text>Second Column Content</dys-text>
    </dys-column>

  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr>
<![endif]-->
                    <!-- Your first column -->
                    <!--[if mso | IE]>
<td style="vertical-align:top;width:300px;">
<![endif]-->
                    <div class='dys-column-per-50 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>First Column Content</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td>
<![endif]-->
                    <!-- Your second column -->
                    <!--[if mso | IE]>
<td style="vertical-align:top;width:300px;">
<![endif]-->
                    <div class='dys-column-per-50 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>Second Column Content</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute unit description default attributes
background-color string background color for a column n/a
border string css border format none
border-bottom string css border format n/a
border-left string css border format n/a
border-right string css border format n/a
border-top string css border format n/a
border-radius percent/px border radius n/a
width percent/px column width (100 / number of non-raw elements in row)%
vertical-align string middle/top/bottom top
padding px supports up to 4 parameters n/a
padding-top px row top offset n/a
padding-bottom px row bottom offset n/a
padding-left px row left offset n/a
padding-right px row right offset n/a
inner-background-color color inner background color for column n/a
inner-border string inner css border format n/a
inner-border-top string inner css border format n/a
inner-border-bottom string inner css border format n/a
inner-border-left string inner css border format n/a
inner-border-right string inner css border format n/a
inner-border-radius percent/px inner border radius n/a
css-class string class name, added to the root HTML element created n/a

dys-text

The dys-text tag allows you to add stylable text to your block. Add an editable attribute to the dys-text tag to make it available in the Dyspatch visual editor.

dys-text must be used in a dys-column.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-text editable="greeting">
        Hello again!
      </dys-text>
    </dys-column>
    <dys-column>
      <dys-text font-size="19px" align="right" font-style="bold" editable="content">
        Hello again, but bolder!
      </dys-text>
    </dys-column>
  </dys-row>


  <dys-row>
    <dys-column>
      <!-- Use the "editable-fields" attribute on the anchor element. -->
      <!-- Only allows content of anchor element to be editable. -->
      <!-- Prevents href from being edited in the Visual Editor. -->
      <dys-text align="center">
        Hello, <a href="https://docs.dyspatch.io/dml/"
           editable="link"
           editable-fields="content">
            this is a link!
        </a>
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:300px;">
<![endif]-->
                    <div class='dys-column-per-50 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>Hello again! </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td><td style="vertical-align:top;width:300px;">
<![endif]-->
                    <div class='dys-column-per-50 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='right' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:19px;font-style:bold;line-height:1;text-align:right;'>Hello again, but bolder! </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <!-- Use the "editable-fields" attribute on the anchor element. -->
                            <!-- Only allows content of anchor element to be editable. -->
                            <!-- Prevents href from being edited in the Visual Editor. -->
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;'>Hello, 
                                        <a editable-fields='content' href='https://docs.dyspatch.io/dml/'>this is a link! </a>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute unit description default value
editable n/a Allows content to be modified and localized in the visual editor n/a
align string left/right/start/end/center start
color color text color #121212
font-family string font Helvetica, Arial, sans-serif
font-size px text size 13px
font-style string normal/italic/oblique n/a
font-weight number text thickness n/a
line-height px space between the lines 22px
letter-spacing px letter spacing none
height px The height of the element n/a
text-decoration string underline/overline/line-through/none n/a
text-transform string uppercase/lowercase/capitalize n/a
align string left/right/center/justify left
container-background-color color inner element background color n/a
padding px supports up to 4 parameters 10px 25px
padding-top px top offset n/a
padding-bottom px bottom offset n/a
padding-left px left offset n/a
padding-right px right offset n/a
css-class string class name, added to the root HTML element created n/a

dys-title

The dys-title tag allows you to add stylable titles to your block. Use dys-title in the theme section to control how titles will look across blocks.

dys-title must be used in a dys-column.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-title editable="title">
        Welcome to Dyspatch!
      </dys-title>
      <dys-title font-size="20px" editable="subtitle">
        Check out these templates 😎
      </dys-title>
    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <h2 style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:32px;line-height:46px;margin:0;padding:0;text-align:left;'>Welcome to Dyspatch! </h2>
                                </td>
                            </tr>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <h2 style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:20px;line-height:46px;margin:0;padding:0;text-align:left;'>Check out these templates 😎 </h2>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute unit description default value
editable n/a Allows content to be modified and localized in the visual editor n/a
align string left/right/start/end/center start
color color text color #121212
font-family string font Helvetica, Arial, sans-serif
font-size px text size 32px
font-style string normal/italic/oblique n/a
font-weight number text thickness n/a
line-height px space between the lines 46px
letter-spacing px letter spacing none
height px The height of the element n/a
text-decoration string underline/overline/line-through/none n/a
text-transform string uppercase/lowercase/capitalize n/a
align string left/right/center/justify left
container-background-color color inner element background color n/a
padding px supports up to 4 parameters 10px 25px
padding-top px top offset n/a
padding-bottom px bottom offset n/a
padding-left px left offset n/a
padding-right px right offset n/a
css-class string class name, added to the root HTML element created n/a

dys-img

AMP Icon This is an AMP enhanced block.

dys-img displays a responsive image in your template. If a width attribute is not provided then the image will fill the parent column width.

Add an editable attribute to make the image available in the Dyspatch visual editor. Add an editable-fields with the editable attribute to selectively control which fields are editable. src, alt, title, and href attributes are editable in the Dyspatch visual editor.

dys-img transforms into an amp-img element when exporting to AMP.

dys-img can only be used in dys-column.

<dys-block>
  <dys-row>
    <dys-column>

      <dys-img src="https://d1pgqke3goo8l6.cloudfront.net/n8yBxvNaR2293QAhTZw5_templateimage.png"
               alt="Descriptive alternative text"
               width="100px" />

      <!-- Only allow href, alt, and title to be modified. -->
      <!-- Prevents img src to be changed. -->
      <dys-img src="https://d1pgqke3goo8l6.cloudfront.net/n8yBxvNaR2293QAhTZw5_templateimage.png"
               alt="Descriptive alternative text"
               title="tooltip"
               href="link-to-this"
               width="100px"
               editable="image"
               editable-fields="href, alt, title" />

    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;border-spacing:0px;'>
                                        <tbody>
                                            <tr>
                                                <td style='width:100px;'>
                                                    <img alt='Descriptive alternative text' height='auto' src='https://d1pgqke3goo8l6.cloudfront.net/n8yBxvNaR2293QAhTZw5_templateimage.png' style='border:none;display:block;font-size:13px;height:auto;outline:none;text-decoration:none;width:100%;' width='100' />
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <!-- Only allow href, alt, and title to be modified. -->
                            <!-- Prevents img src to be changed. -->
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;border-spacing:0px;'>
                                        <tbody>
                                            <tr>
                                                <td style='width:100px;'>
                                                    <a href='link-to-this' target='_blank'>
                                                        <img alt='Descriptive alternative text' height='auto' src='https://d1pgqke3goo8l6.cloudfront.net/n8yBxvNaR2293QAhTZw5_templateimage.png' style='border:none;display:block;font-size:13px;height:auto;outline:none;text-decoration:none;width:100%;' title='tooltip' width='100' />
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute unit description default value
editable n/a content can be modified in the visual editor n/a
editable-fields string src, alt, title, href n/a
align position image alignment center
alt string image description n/a
border string css border definition none
border-radius px border radius n/a
container-background-color color inner element background color n/a
css-class string class name, added to the root HTML element created n/a
fluid-on-mobile string if "true", will be full width on mobile even if width is set n/a
height px image height auto
href url link to redirect to on click n/a
padding px supports up to 4 parameters 10px 25px
padding-bottom px bottom offset n/a
padding-left px left offset n/a
padding-right px right offset n/a
padding-top px top offset n/a
ratio number:number controls the aspect ratio for AMP emails
rel string specify the rel attribute n/a
src url image source n/a
srcset url & width enables to set a different image source based on the viewport. Note: Does not work in AMP. n/a
target string link target on click _blank
title string tooltip & accessibility n/a
width px image width 100%

dys-button

AMP Icon This is an AMP enhanced block.

Displays a customizable button that works across all email clients.

<dys-block>
 <dys-inputs>
   <!-- Placeholder URL -->
    <dys-string key="url" placeholder="https://example.com" />
  </dys-inputs>

  <dys-row>
    <dys-column>
      <!-- Default button style -->
      <dys-button href="https://example.com">
        Click me!
      </dys-button>

      <!-- Style button with variable -->
      <dys-button href="@{url}"
                  color="#FFFFFF"
                  background-color="#00bdb1"
                  font-weight="bold"
                  padding="15px 30px"
                  font-size="18px"
                  border-radius="50px"
                  editable="action">
        Styled Button
      </dys-button>

      <!-- Only allow link to be modified.-->
      <dys-button href="editable-href"
                  editable="button"
                  editable-fields="href">
        Non-Editable Button Text
      </dys-button>

      <!-- Update AMP state on click.-->
      <dys-button href="@{url}"
                  on="tap: AMP.setState({})">
        Update AMP state!
      </dys-button>

    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <!-- Default button style -->
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#414141' role='presentation' style='background:#414141;border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <a href='https://example.com' style='background:#414141;border-radius:3px;color:#ffffff;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;' target='_blank'>Click me! </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <!-- Style button with variable -->
                            <tr>
                                <td align='center' style='font-size:0px;padding:15px 30px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#00bdb1' role='presentation' style='background:#00bdb1;border:none;border-radius:50px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <a href='https://example.com' style='background:#00bdb1;border-radius:50px;color:#FFFFFF;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:bold;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;' target='_blank'>Styled Button </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <!-- Only allow link to be modified.-->
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#414141' role='presentation' style='background:#414141;border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <a href='editable-href' style='background:#414141;border-radius:3px;color:#ffffff;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;' target='_blank'>Non-Editable Button Text </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <!-- Update AMP state on click.-->
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#414141' role='presentation' style='background:#414141;border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <a href='https://example.com' style='background:#414141;border-radius:3px;color:#ffffff;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;' target='_blank'>Update AMP state! </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

Add an editable attribute to make the button available in the Dyspatch visual editor. Add an editable-fields with the editable attribute to selectively control which fields are editable. The href attribute and text content are editable in the Dyspatch visual editor.

attribute unit description default value
editable n/a content can be modified in the visual editor n/a
editable-fields string href, content n/a
align string left/right/start/end/center center
background-color color button background-color #414141
border string css border format none
border-bottom string css border format n/a
border-left string css border format n/a
border-radius px border radius 3px
border-right string css border format n/a
border-top string css border format n/a
color color text color #ffffff
container-background-color color button container background color n/a
css-class string class name, added to the root HTML element created n/a
font-family string font name Helvetica, Arial, sans-serif
font-size px text size 13px
font-style string normal/italic/oblique n/a
font-weight number text thickness normal
height px button height n/a
href link link to be triggered when the button is clicked n/a
inner-padding px inner button padding 10px 25px
line-height px/%/none line-height on link 120%
on string Only used in AMP emails. Determines what happens when the button is clicked
padding px supports up to 4 parameters 10px 25px
padding-bottom px bottom offset n/a
padding-left px left offset n/a
padding-right px right offset n/a
padding-top px top offset n/a
rel string specify the rel attribute for the button link n/a
target string specify the target attribute for the button link _blank
text-align string text-align button content none
text-decoration string CSS text-decoration value none
text-transform string capitalize/uppercase/lowercase none
vertical-align string vertical alignment middle
width px button width n/a

dys-table

dys-table produces an HTML table. This is most useful when paired with dynamic data, such as receipt items. Note that <td> and <th> elements can be marked as editable and used in Dyspatch's visual editor.

<dys-block>

  <!-- Placeholder Dynamic Data -->
  <dys-inputs>
    <dys-array key='line_items'>
      <dys-object>
        <dys-string key='name' placeholder='Bananas' />
        <dys-string key='price' placeholder='$1.33/lb' />
      </dys-object>
      <dys-object>
        <dys-string key='name' placeholder='Grapefruit' />
        <dys-string key='price' placeholder='$0.99/lb' />
      </dys-object>
    </dys-array>
  </dys-inputs>

  <dys-row>
    <dys-column>
      <dys-table padding-left='50px' padding-right='50px'>
        <tr>
          <th style='border-bottom:1px solid #ecedee;text-align:left;' editable='th1'>
            Item
          </th>
          <th style='border-bottom:1px solid #ecedee;text-align:right;'>
            Price
          </th>
        </tr>
        <tr>
          <td style='text-align:left;' editable='td1'>
            Apples
          </td>
          <td style='text-align:right;'>
            $1.00/lb
          </td>
        </tr>
        <tr>
          <td style='text-align:left'>
            Oranges
          </td>
          <td style='text-align:right;'>
            $1.22/lb
          </td>
        </tr>

        <!-- Dynamic data -->
        <dys-for each="item in line_items">
          <tr>
            <td style='text-align:left'>
              @{item.name}
            </td>
            <td style='text-align:right;'>
              @{item.price}
            </td>
          </tr>
        </dys-for>

      </dys-table>
    </dys-column>
  </dys-row>
</dys-block>
<!-- Placeholder Dynamic Data -->
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;padding-left:50px;padding-right:50px;word-break:break-word;'>
                                    <table border='0' cellpadding='0' cellspacing='0' style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;' width='100%'>
                                        <tr>
                                            <th style='border-bottom:1px solid #ecedee;text-align:left;'>Item </th>
                                            <th style='border-bottom:1px solid #ecedee;text-align:right;'>Price </th>
                                        </tr>
                                        <tr>
                                            <td style='text-align:left;'>Apples </td>
                                            <td style='text-align:right;'>$1.00/lb </td>
                                        </tr>
                                        <tr>
                                            <td style='text-align:left'>Oranges </td>
                                            <td style='text-align:right;'>$1.22/lb </td>
                                        </tr>
                                        <!-- Dynamic data -->
                                        <tr>
                                            <td style='text-align:left'>Bananas </td>
                                            <td style='text-align:right;'>$1.33/lb </td>
                                        </tr>
                                        <tr>
                                            <td style='text-align:left'>Grapefruit </td>
                                            <td style='text-align:right;'>$0.99/lb </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute unit description default value
align string left/right/start/end/center center
cellpadding pixels space between cells n/a
cellspacing pixels space between cell and border n/a
color color text header & footer color #000000
container-background-color color inner element background color n/a
font-family string font name Helvetica, Arial, sans-serif
font-size px font size 13px
font-style string font style n/a
line-height percent/px space between lines 22px
padding percent/px supports up to 4 parameters 10px 25px
padding-bottom percent/px bottom offset n/a
padding-left percent/px left offset n/a
padding-right percent/px right offset n/a
padding-top percent/px top offset n/a
table-layout auto/fixed/initial/inherit sets the table layout. auto
width percent/px table width 100%

dys-group

dys-group is used to prevent columns from stacking on mobile. This is useful for when content needs to stay on all devices side-by-side.

<dys-block>
  <dys-row>
    <dys-group>
      <dys-column>
        <dys-img src="https://picsum.photos/id/250/250/250" />
      </dys-column>
      <dys-column>
        <dys-img src="https://picsum.photos/id/251/250/250" />
      </dys-column>
    </dys-group>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:0;line-height:0;text-align:left;width:100%;'>
                        <!--[if mso | IE]>
<table  role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<![endif]-->
                        <!--[if mso | IE]>
<td style="vertical-align:top;width:300px;">
<![endif]-->
                        <div class='dys-column-per-50 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:50.000000%;'>
                            <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                                <tr>
                                    <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;border-spacing:0px;'>
                                            <tbody>
                                                <tr>
                                                    <td style='width:300px;'>
                                                        <img height='auto' src='https://picsum.photos/id/250/250/250' style='border:none;display:block;font-size:13px;height:auto;outline:none;text-decoration:none;width:100%;' width='300' />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--[if mso | IE]>
</td><td style="vertical-align:top;width:300px;">
<![endif]-->
                        <div class='dys-column-per-50 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:50.000000%;'>
                            <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                                <tr>
                                    <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;border-spacing:0px;'>
                                            <tbody>
                                                <tr>
                                                    <td style='width:300px;'>
                                                        <img height='auto' src='https://picsum.photos/id/251/250/250' style='border:none;display:block;font-size:13px;height:auto;outline:none;text-decoration:none;width:100%;' width='300' />
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--[if mso | IE]>
</td>
<![endif]-->
                        <!--[if mso | IE]>
</tr>
</table>
<![endif]-->
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute unit description default value
background-color string background color for the entire group n/a
css-class string class name, added to the root HTML element created n/a
vertical-align string vertical alignment of columns top
width percent/px the width of the group section (100 / number of non-raw elements in section)%

dys-hero

dys-hero allows you to create a responsive banner where you can overlay text and other components over a background image. Use heroes to draw your customer's attention to the most important part of the email.

dys-hero supports two different background modes: fixed-height and fluid-height. Use the fixed-height mode if you need to show the entire image. Note that hero components with a fixed height require that the height attribute have a value.

When building with dys-hero we recommend setting a background-color. This will help your content stand out if the user's email client has images disabled by default.

<dys-block>
  <dys-hero background-url="https://picsum.photos/id/536/600/400"
            background-width="600px"
            background-color="#000033"
            height="400px"
            vertical-align="middle"
            editable="hero">
    <dys-title color="#FFFFFF" editable="title">
      I need a gyro
    </dys-title>
    <dys-text color="#FFFFFF" editable="subtitle">
      Maybe with a side of tabbouleh
    </dys-text>
  </dys-hero>
</dys-block>
<!--[if mso | IE]><table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:600;' width='600' ><tr><td style='font-size:0;line-height:0;mso-line-height-rule:exactly;' ><v:image src='https://picsum.photos/id/536/600/400' style='border:0;mso-position-horizontal:center;position:absolute;top:0;width:600;z-index:-3;' xmlns:v='urn:schemas-microsoft-com:vml' /><![endif]-->
<div style='margin:0 auto;max-width:600px;'>
    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tr style='vertical-align:top;'>
            <td background='https://picsum.photos/id/536/600/400' height='400' style='background:#000033 url(https://picsum.photos/id/536/600/400) no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:middle;'>
                <!--[if mso | IE ]><table border='0' cellpadding='0' cellspacing='0' style='width:600px;' width='600' ><tr><td style='' ><![endif]-->
                <div class='dys-hero-content' style='margin:0px auto;width:;'>
                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='margin:0px;width:100%;'>
                        <tr>
                            <td style=''>
                                <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='margin:0px;width:100%;'>
                                    <tr>
                                        <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                            <h2 style='color:#FFFFFF;font-family:Helvetica, Arial, sans-serif;font-size:32px;line-height:46px;margin:0;padding:0;text-align:left;'>I need a gyro </h2>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                            <div style='color:#FFFFFF;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>Maybe with a side of tabbouleh </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
                <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
        </tr>
    </table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->

attribute unit description default value
editable n/a content can be modified in the visual editor n/a
background-color color row color #FFFFFF
background-height px height of the image used for outlook. Required for fixed-height heroes repeat
background-position top/center/bottom left/center/right background image position center center
background-url url background url n/a
background-width px width of the image used n/a
border-radius px border radius n/a
css-class string class name, added to the root HTML element created n/a
height px image height auto
mode fluid-height/fixed-height hero mode fluid-height
padding px supports up to 4 parameters 0px
padding-bottom px bottom offset 0px
padding-left px left offset 0px
padding-right px right offset 0px
padding-top px top offset 0px
vertical-align top/middle/bottom alignment of hero content top
width %, px hero width 100%

AMP Icon This is an AMP enhanced block.

Carousels are a great way to show a user a variety of related images while saving on vertical space.

Images that are the same size ratio work best across email clients. Clients can use the arrows or thumbnails to change the selected image.

Note that not all email clients fully support carousels. In cases where they aren't supported — like Outlook and Gsuite — the arrows to page images will be hidden.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-carousel editable='carousel'>
        <dys-carousel-image src='https://picsum.photos/id/536/600/400' />
        <dys-carousel-image src='https://picsum.photos/id/110/600/400' />
        <dys-carousel-image src='https://picsum.photos/id/410/600/400' />
      </dys-carousel>
    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='center' style='font-size:0px;word-break:break-word;'>
                                    <!--[if !mso><!-->
                                    <div class='dys-carousel'>
                                        <input checked='checked' class='dys-carousel-radio dys-carousel-223735f6ede1-radio dys-carousel-223735f6ede1-radio-1' id='dys-carousel-223735f6ede1-radio-1' name='dys-carousel-radio-223735f6ede1' style='display:none;mso-hide:all;' type='radio' />
                                        <input class='dys-carousel-radio dys-carousel-223735f6ede1-radio dys-carousel-223735f6ede1-radio-2' id='dys-carousel-223735f6ede1-radio-2' name='dys-carousel-radio-223735f6ede1' style='display:none;mso-hide:all;' type='radio' />
                                        <input class='dys-carousel-radio dys-carousel-223735f6ede1-radio dys-carousel-223735f6ede1-radio-3' id='dys-carousel-223735f6ede1-radio-3' name='dys-carousel-radio-223735f6ede1' style='display:none;mso-hide:all;' type='radio' />
                                        <div class='dys-carousel-content dys-carousel-223735f6ede1-content' style='display:table;font-size:0px;table-layout:fixed;text-align:center;width:100%;'>
                                            <a class='dys-carousel-thumbnail dys-carousel-223735f6ede1-thumbnail dys-carousel-223735f6ede1-thumbnail-1' href='#1' style='border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;' target='_blank'>
                                                <label for='dys-carousel-223735f6ede1-radio-1'>
                                                    <img src='https://picsum.photos/id/536/600/400' style='display:block;height:auto;width:100%;' />
                                                </label>
                                            </a>
                                            <a class='dys-carousel-thumbnail dys-carousel-223735f6ede1-thumbnail dys-carousel-223735f6ede1-thumbnail-2' href='#2' style='border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;' target='_blank'>
                                                <label for='dys-carousel-223735f6ede1-radio-2'>
                                                    <img src='https://picsum.photos/id/110/600/400' style='display:block;height:auto;width:100%;' />
                                                </label>
                                            </a>
                                            <a class='dys-carousel-thumbnail dys-carousel-223735f6ede1-thumbnail dys-carousel-223735f6ede1-thumbnail-3' href='#3' style='border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;' target='_blank'>
                                                <label for='dys-carousel-223735f6ede1-radio-3'>
                                                    <img src='https://picsum.photos/id/410/600/400' style='display:block;height:auto;width:100%;' />
                                                </label>
                                            </a>
                                            <table border='0' cell-padding='0' cell-spacing='0' class='dys-carousel-main' role='presentation' style='caption-side:top;direction:ltr;display:table-caption;margin-bottom:5px;table-layout:fixed;width:100%;' width='100%'>
                                                <tbody>
                                                    <tr>
                                                        <td class='dys-carousel-223735f6ede1-icons-cell' style='display:none;font-size:0px;mso-hide:all;padding:0px;'>
                                                            <div class='dys-carousel-previous-icons' style='display:none;mso-hide:all;'>
                                                                <label class='dys-carousel-previous dys-carousel-previous-1' for='dys-carousel-223735f6ede1-radio-1'>
                                                                    <img alt='previous' src='https://d5omksr585ze3.cloudfront.net/left_angle.png' style='display:block;height:auto;width:44px;' width='44' />
                                                                </label>
                                                                <label class='dys-carousel-previous dys-carousel-previous-2' for='dys-carousel-223735f6ede1-radio-2'>
                                                                    <img alt='previous' src='https://d5omksr585ze3.cloudfront.net/left_angle.png' style='display:block;height:auto;width:44px;' width='44' />
                                                                </label>
                                                                <label class='dys-carousel-previous dys-carousel-previous-3' for='dys-carousel-223735f6ede1-radio-3'>
                                                                    <img alt='previous' src='https://d5omksr585ze3.cloudfront.net/left_angle.png' style='display:block;height:auto;width:44px;' width='44' />
                                                                </label>
                                                            </div>
                                                        </td>
                                                        <td style='padding:0px;'>
                                                            <div class='dys-carousel-images'>
                                                                <div class='dys-carousel-image dys-carousel-image-1 ' style=''>
                                                                    <img border='0' src='https://picsum.photos/id/536/600/400' style='border-radius:4px;display:block;height:auto;max-width:100%;width:600px;' width='600' />
                                                                </div>
                                                                <div class='dys-carousel-image dys-carousel-image-2 ' style='display:none;mso-hide:all;'>
                                                                    <img border='0' src='https://picsum.photos/id/110/600/400' style='border-radius:4px;display:block;height:auto;max-width:100%;width:600px;' width='600' />
                                                                </div>
                                                                <div class='dys-carousel-image dys-carousel-image-3 ' style='display:none;mso-hide:all;'>
                                                                    <img border='0' src='https://picsum.photos/id/410/600/400' style='border-radius:4px;display:block;height:auto;max-width:100%;width:600px;' width='600' />
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class='dys-carousel-223735f6ede1-icons-cell' style='display:none;font-size:0px;mso-hide:all;padding:0px;'>
                                                            <div class='dys-carousel-next-icons' style='display:none;mso-hide:all;'>
                                                                <label class='dys-carousel-next dys-carousel-next-1' for='dys-carousel-223735f6ede1-radio-1'>
                                                                    <img alt='next' src='https://d5omksr585ze3.cloudfront.net/right_angle.png' style='display:block;height:auto;width:44px;' width='44' />
                                                                </label>
                                                                <label class='dys-carousel-next dys-carousel-next-2' for='dys-carousel-223735f6ede1-radio-2'>
                                                                    <img alt='next' src='https://d5omksr585ze3.cloudfront.net/right_angle.png' style='display:block;height:auto;width:44px;' width='44' />
                                                                </label>
                                                                <label class='dys-carousel-next dys-carousel-next-3' for='dys-carousel-223735f6ede1-radio-3'>
                                                                    <img alt='next' src='https://d5omksr585ze3.cloudfront.net/right_angle.png' style='display:block;height:auto;width:44px;' width='44' />
                                                                </label>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <!--<![endif]-->
                                    <!--[if mso]><div class='dys-carousel-image dys-carousel-image-1 ' style=''><img border='0' src='https://picsum.photos/id/536/600/400' style='border-radius:4px;display:block;height:auto;max-width:100%;width:600px;' width='600' /></div><![endif]-->
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute unit description default value
background-color string column background color none
border-radius px border radius n/a
css-class string class name, added to the root HTML element created n/a
editable n/a content can be modified in the visual editor n/a
icon-width px width of the icons on left and right of the main image 44px
left-icon url icon on the left of the main image Dyspatch's default left arrow
right-icon url icon on the right of the main image Dyspatch's default right arrow
ratio number:number controls the aspect ratio for AMP emails n/a
tb-border css border format border of the thumbnails none
tb-border-radius px border-radius of the thumbnails none
tb-hover-border-color string css border color of the hovered thumbnail none
tb-selected-border-color string css border color of the selected thumbnail none
tb-width px thumbnail width null
thumbnails String display or not the thumbnails (visible hidden)

This sets the default images for a carousel. If a carousel is editable then users can add and remove images with the Dyspatch template editor.

attribute unit description default value
alt string image description n/a
href url link to redirect to when clicked n/a
rel string specify the rel attribute n/a
src url image source n/a
target string link target on click _blank
thumbnails-src url image source to have a thumbnail different than the image it's linked to null
title string tooltip & accessibility n/a

dys-list

AMP Icon This is an AMP enhanced block.

Display a list of items in your email to your users. dys-list provides the ability to pull a dynamic list from a source or render a static list to display to all users.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-list id='myList'
                src='https://amp.dev/static/inline-examples/data/amp-list-urls.json'
                height='200'
                width='396'
                layout='responsive'>

        <dys-dynamic>
          <dys-template>
            <dys-button href='{{url}}'>
              {{title}}
            </dys-button>
          </dys-template>

          <dys-placeholder>
            <dys-text>Loading...</dys-text>
          </dys-placeholder>

          <dys-fallback>
            <dys-text>Fallback value</dys-text>
          </dys-fallback>

          <dys-overflow>
            <dys-text>Overflow value</dys-text>
          </dys-overflow>
        </dys-dynamic>

        <dys-static>
          <dys-text>Static Content!</dys-text>
        </dys-static>

      </dys-list>
    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>Static Content!</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute unit description default value
editable string content can be modified in the visual editor n/a
layout string container/fill/fixed/fixed-height/flex-item/nodisplay/responsive container
height string list height n/a
width string list width n/a
items string defines the expression to locate the array to be rendered within the response n/a
max-items int specifying the maximum length of the items array to be rendered n/a
single-item string treat the returned result as if it were a single element array n/a
id string unique id n/a
on string used to install event handlers on the list element e.g. tap.myList.refresh n/a
src string the URL of the remote endpoint that returns the JSON n/a

Supported on events

event description
tap fired when the element is clicked/tapped
fetch-error fired when fetching the data fails

dys-dynamic

This is a required element for AMP enhanced blocks. AMP enhanced blocks allow you to dynamically retrieve items from a source to provide users with the latest up-to-date content depending on when they open the email.

dys-template

A template is the structure of your AMP layout. It accepts any valid DML elements and it should include content when the email successfully pull items from your attached source. See AMP Templates for more information.

dys-fallback

Content within the fallback element will be shown if the list source fails to load. This element accepts any valid DML elements.

dys-placeholder

Content within the placeholder element will be shown while the list source is loading. This element accepts any valid DML elements.

dys-overflow

Content within the overflow element will be shown if the dys-list element has a fixed height. This is typically used for handling any overflow items with a button or link to "view more". This element accepts any valid DML elements.

dys-static

This is a required element for AMP enhanced blocks and can be left empty. This element accepts any valid DML elements.

Content inside the static element will be shown if AMP isn't supported in the recipient's email client.

dys-form

AMP Icon This is an AMP enhanced block.

Display a form to your users and specify an action to have recipients fill in data.

<dys-block>
    <dys-row>
        <dys-column>

            <dys-text align='center'>
                <h3>Basic Text Input</h3>
            </dys-text>

            <dys-form method='post' action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr'>
                <dys-dynamic>
                    <dys-input type='text' name='name' placeholder='Name...' required />
                    <dys-input type='submit' value='OK' />

                    <dys-success>Success!</dys-success>
                    <dys-error>Error!</dys-error>
                </dys-dynamic>

                <dys-static>
                    <dys-button>Basic Text Input</dys-button>
                </dys-static>
            </dys-form>

            <dys-text align='center'>
                <h3>Text Area Input</h3>
            </dys-text>
            <dys-form method='post' action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr'>
                <dys-dynamic>
                    <dys-input type='textarea' autoexpand name='name' placeholder='Short Story...' />
                    <dys-input type='submit' value='OK' />

                    <dys-success>Success!</dys-success>
                    <dys-error>Error!</dys-error>
                </dys-dynamic>

                <dys-static>
                    <dys-button>Text Area Input</dys-button>
                </dys-static>
            </dys-form>

            <dys-text align='center'>
                <h3>Time Based Inputs</h3>
            </dys-text>
            <dys-form method='post' action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr'>
                <dys-dynamic>
                    <dys-input name='select-date' type='date' value='2020-12-30' />
                    <dys-input name='select-month' type='month' value='2020-12' />
                    <dys-input name='select-datetime' type='datetime-local' value='2020-12-30T12:34:56' />
                    <dys-input type='week' name='week_year' />
                    <dys-input type='time' name='time_now' />
                    <dys-input type='submit' value='OK' />

                    <dys-success>Success!</dys-success>
                    <dys-error>Error!</dys-error>
                </dys-dynamic>

                <dys-static>
                    <dys-button>Time Based Inputs</dys-button>
                </dys-static>
            </dys-form>

            <dys-text align='center'>
                <h3>Validated Inputs</h3>
            </dys-text>
            <dys-form method='post' action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr'>
                <dys-dynamic>
                    <dys-input type='email' placeholder='email..' name='email' />
                    <dys-input type='url' placeholder='url..' name='url' />
                    <dys-input type='submit' value='OK' />

                    <dys-success>Success!</dys-success>
                    <dys-error>Error!</dys-error>
                </dys-dynamic>

                <dys-static>
                    <dys-button>Validated Inputs</dys-button>
                </dys-static>
            </dys-form>

            <dys-text align='center'>
                <h3>Radio</h3>
                Label tag is auto created if a label= attribute is supplied to input
            </dys-text>
            <dys-form method='post' action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr'>
                <dys-dynamic>
                    <dys-input type='radio' id='cat' name='favourite animal' value='cat' label='Cat' />
                    <dys-input type='radio' id='dog' name='favourite animal' value='dog' label='Dog' />
                    <dys-input type='radio' id='other' name='favourite animal' value='other' label='Other' />
                    <dys-input type='submit' value='OK' />

                    <dys-success>Success!</dys-success>
                    <dys-error>Error!</dys-error>
                </dys-dynamic>

                <dys-static>
                    <dys-button>Radio</dys-button>
                </dys-static>
            </dys-form>

            <dys-text align='center'>
                <h3>Checkbox</h3>
            </dys-text>
            <dys-form method='post' action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr'>
                <dys-dynamic>
                    <dys-input type='checkbox' id='cat' name='favourite animal' value='cat' label='Cat' />
                    <dys-input type='checkbox' id='dog' name='favourite animal' value='dog' label='Dog' />
                    <dys-input type='checkbox' id='other' name='favourite animal' value='other' label='Other' />
                    <dys-input type='submit' value='OK' />

                    <dys-success>Success!</dys-success>
                    <dys-error>Error!</dys-error>
                </dys-dynamic>

                <dys-static>
                    <dys-button>Checkbox</dys-button>
                </dys-static>
            </dys-form>

            <dys-text align='center'>
                <h3>Select</h3>
            </dys-text>
            <dys-form method='post' action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr'>
                <dys-dynamic>
                    <dys-input type='select' name='cars' id='cars' label='Select a car'>
                        <dys-option value='volvo'>Volvo</dys-option>
                        <dys-option value='saab'>Saab</dys-option>
                        <dys-option value='fiat'>Fiat</dys-option>
                        <dys-option value='audi'>Audi</dys-option>
                    </dys-input>
                    <dys-input type='submit' value='OK' />

                    <dys-success>Success!</dys-success>
                    <dys-error>Error!</dys-error>
                </dys-dynamic>

                <dys-static>
                    <dys-button>Select</dys-button>
                </dys-static>
            </dys-form>

        </dys-column>
    </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;'>
                                        <h3>Basic Text Input</h3>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#414141' role='presentation' style='background:#414141;border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <p style='background:#414141;border-radius:3px;color:#ffffff;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;'>Basic Text Input</p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;'>
                                        <h3>Text Area Input</h3>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#414141' role='presentation' style='background:#414141;border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <p style='background:#414141;border-radius:3px;color:#ffffff;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;'>Text Area Input</p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;'>
                                        <h3>Time Based Inputs</h3>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#414141' role='presentation' style='background:#414141;border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <p style='background:#414141;border-radius:3px;color:#ffffff;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;'>Time Based Inputs</p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;'>
                                        <h3>Validated Inputs</h3>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#414141' role='presentation' style='background:#414141;border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <p style='background:#414141;border-radius:3px;color:#ffffff;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;'>Validated Inputs</p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;'>
                                        <h3>Radio</h3>
                                        Label tag is auto created if a label= attribute is supplied to input 
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#414141' role='presentation' style='background:#414141;border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <p style='background:#414141;border-radius:3px;color:#ffffff;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;'>Radio</p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;'>
                                        <h3>Checkbox</h3>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#414141' role='presentation' style='background:#414141;border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <p style='background:#414141;border-radius:3px;color:#ffffff;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;'>Checkbox</p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;'>
                                        <h3>Select</h3>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#414141' role='presentation' style='background:#414141;border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                                                <p style='background:#414141;border-radius:3px;color:#ffffff;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;'>Select</p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute unit description default value
editable string content can be modified in the visual editor n/a
action-xhr string specifies a server endpoint to handle the form input and submit the form via XMLHttpRequest (XHR) n/a
align string left/right/start/end/center center
css-class string class name, added to the root HTML element created n/a
id string unique id n/a
method string specifies the form method. get/post n/a
on string used to add event handlers on the form element e.g. submit-success: AMP.setState({...}) n/a

Note: method and action-xhr are required attributes

Supported on events

event description data
submit fired when the form is submitted
submit-success fired when the response is successful event.response (Response JSON)
submit-error fired when the response is an error event.response (Response JSON)
valid fired when the form is valid
invalid fired when the form is invalid

dys-dynamic

This is a required element for AMP enhanced blocks. AMP enhanced blocks allow you to dynamically submit a form to a provided action-xhr endpoint.

dys-static

This is a required element for AMP enhanced blocks and can be left empty. This element accepts any valid DML elements.

Content inside the static element will be shown if AMP isn't supported in the recipient's email client.

dys-input

This element contains the input fields for your dys-form. The following types of inputs are supported: text, email, tel, file, submit, and radio.

attribute unit description default value
editable string content can be modified in the visual editor n/a
type string text/email/tel/file/submit/radio n/a
autoexpand string allows the textarea input type to expand and shrink n/a
css-class string class name, added to the root HTML element created center
font-family string font name Helvetica, Arial, sans-serif
id string unique id n/a
label string provides a label for the input n/a
name string provides a name for the input n/a
placeholder string provides a placeholder for the input n/a
required string input is required to submit the form n/a
value string provides a placeholder for the input n/a
on string used to add event handlers on the input element e.g. change: AMP.setState({...}) n/a

Supported on events for all input types

event description Data
tap fired when the element is clicked/tapped
change fired when the value of the element is changed event.min, event.max, event.value, event.valueAsNumber
input-debounced fired when the value of the element is changed, but only fires after 300ms has passed after the value of the input has stopped changing Same as the change event
input-throttled fired when the value of the element is changed, but it is throttled to firing at most once every 100ms while the value of the input is changing Same as the change event

radio and checkbox input types have an additional event.checked data value.

dys-option

dys-option is a child element to dys-input and used in conjunction with type=select. The option element provides values to select menu.

attribute unit description default value
value string content can be modified in the visual editor n/a

dys-success

Content within this element will be displayed if the response is successful (i.e., has a status of 2XX). Typically used to display a success message to the user.

attribute unit description default value
submit-success string content can be modified in the visual editor n/a
template string content can be modified in the visual editor n/a

dys-error

Content within this element will be displayed if the response is unsuccessful (i.e., does not have a status of 2XX). Typically used to display a submission error message to the user.

attribute unit description default value
submit-error string content can be modified in the visual editor n/a
template string content can be modified in the visual editor n/a

Templating

Use DML's templating system to build and export dynamic emails that work with multiple email service providers. DML supports variable replacement, conditionals, iteration, as well as provides advanced support to conditionally export content depending on the ESP.

For a complete list of supported ESPs see the Export Languages section.

dys-inputs

Container for the inputs into the block. Use dys-inputs to add placeholder values to fill in variables and preview logic in a block. These placeholder values will be used to populate previews in the block editor and the visual editor. dys-inputs will be overwritten by any sample data and will not be present in exported templates.

<dys-block>
  <dys-inputs>
    <dys-string key="url" placeholder="dyspatch.io" />

    <dys-bool key="order" placeholder="true" />

    <dys-number key="amount" placeholder="3" />

    <dys-array key="purchases" placeholder="['kite','string','windbreaker']" />

    <dys-object key="customer">
      <dys-string key="first_name" placeholder="Kieran" />
      <dys-bool key="pro_subscriber" placeholder="true" />
    </dys-object>

    <dys-array>
      <dys-object>
        <dys-string key="item" placeholder="bananas"/>
        <dys-number key="amount" placeholder="3"/>
      </dys-object>
      <dys-object>
        <dys-string key="item" placeholder="apples"/>
        <dys-number key="amount" placeholder="3"/>
      </dys-object>
    </dys-array>
  </dys-inputs>
</dys-block>

DML supports 5 inputs for different data types:

attribute description
key Assign a reference for the input to be used as a variable. Called in block content using @{key}
placeholder Add placeholder content to fill in variables for the visual editor. The placeholder attribute is not valid on the dys-object tag.

dys-for

Loop over each item in a sequence with the dys-for tag.

<!-- for loop using each -->
<dys-block>
  <dys-inputs>
    <dys-array key="pets" placeholder="['cat','dog','rabbit']" />
  </dys-inputs>
  <dys-row>
    <dys-column>
      <dys-text>
        <dys-for each="pet in pets">
          @{pet}
        </dys-for>
      </dys-text>
    </dys-column>
  </dys-row>

  <!-- for loop using range -->
  <dys-row>
    <dys-column>
      <dys-text>
        <dys-for range="1 to 3">
          @{item}
        </dys-for>
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>
                                        cat
                                        dog
                                        rabbit 
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!-- for loop using range -->
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>
                                        1
                                        2
                                        3 
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute description
each iterate over an array
range iterate over a given range

Validation:

dys-if

Include content only if a condition evaluates to true.

<dys-block>
  <dys-inputs>
    <dys-string key='first_name' placeholder='Hina' />
    <dys-string key='membership' placeholder='premium' />  
    <dys-number key='recent_purchase_amount' placeholder='100' />  
    <dys-array key='purchases' placeholder="['kite','string','windbreaker']" />     
  </dys-inputs>  

  <dys-row>
    <dys-column>
      <dys-text>
        Hello <dys-if cond="first_name != ''">@{first_name}</dys-if>  
      </dys-text>
    </dys-column>
  </dys-row>  
  <dys-row>
    <dys-column>
      <dys-text>
        <dys-if cond="recent_purchase_amount > 50 && membership == 'premium'">        
          Thanks for being an active premium member!
        </dys-if>
        <dys-if cond="'kite' in purchases">        
          Are you enjoying your new kite?
        </dys-if>
      </dys-text>        
    </dys-column>
  </dys-row>  
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>Hello Hina </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>
                                        Thanks for being an active premium member!
                                        Are you enjoying your new kite? 
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute description
cond condition to evaluate

Validation:

Supported comparison operators:

Supported modifiers:

Supported logical operators:

dys-export

Allows exporting content only for the specified target language.

For example, if you use multiple email service providers and each have different capabilities in what they support, dys-export will allow you to write content for those specific platforms.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-text>
        This content will show for all export languages. Notice in the DML example to the right --->
      </dys-text>

      <dys-export targets='handlebars, ampscript'>
        <dys-text>
          This content will only show if I am exporting to Handlebars or AMPscript.
        </dys-text>
      </dys-export>
    </dys-column>
  </dys-row>

  <!-- Below is an example of different targeted languages -->
  <dys-row>
    <dys-column>
      <dys-export targets="html, handlebars"> <!-- Export only for HTML, Handlebars -->
        <dys-for range="1 to 3">
          <dys-text align="center">@{item}</dys-text>
        </dys-for>
      </dys-export>
    </dys-column>
  </dys-row>

  <dys-row>
    <dys-column>
      <dys-export targets="cheetah"> <!-- Export only for Cheetah -->
        <dys-text align="center">Default Content for Cheetah Export</dys-text>
      </dys-export>
    </dys-column>
  </dys-row>
</dys-block>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <tr>
                                <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>
                                        This content will show for all export languages. Notice in the DML example to the right ---> 
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!-- Below is an example of different targeted languages -->
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                            <!-- Export only for HTML, Handlebars -->
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;'>1</div>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;'>2</div>
                                </td>
                            </tr>
                            <tr>
                                <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                                    <div style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;'>3</div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style='margin:0px auto;max-width:600px;'>
    <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
            <tr>
                <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;'>
                    <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
                    <div class='dys-column-per-100 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:100%;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'></table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

attribute description
targets accepts one or more valid export languages separated by commas

Validation:

Supported targets:

dys-raw

The raw tag allows you to pass content directly to the template, it will not be modified or parsed by Dyspatch

<dys-block>
  <dys-raw>
    Content here goes directly to the template and you won't see content here in Dyspatch
  </dys-raw>
</dys-block>

Themes

Themes are used in the Dyspatch Visual Editor to control the look and feel of all the blocks in a template. Think of it as the <head> tag of an email. Themes are where fonts and additional required styling would be configured.

The below section provides an overview of what can be used in the "Advanced" section of a Dyspatch theme.

dys-attributes

<dys-attributes>
  <dys-body background-color="#FFFFFF" width="800px" />
  <dys-text background-color="#000000" />
  <dys-a font-color="#0000BB" text-decoration="none" />
</dys-attributes>

dys-attributes allow users to change the default styling on abstractions.

Supported attributes:

dys-body

dys-body is similar to the body tag in HTML. Here you can set background attributes, apply a CSS class, and customize the width of the email.

attribute unit description default value
max-width px Email body width 600px
background-color color Email body background color #FFFFFF
background-url string URL to an image n/a
background-position string background image position n/a
background-size percent/px CSS background size n/a
background-repeat string CSS background repeat n/a

dys-text

Use dys-text to set the default look and feel for text in the theme. See dys-text for a list of supported attributes.

dys-title

Similar to dys-text, but for titles instead. Use this to further control how your blocks display in a specific theme. See dys-title for a list of supported attributes.

dys-a

Use dys-a to modify how links appear when used in a dys-text.

attribute unit description default value
color color Link color #0000EE
text-decoration string CSS text-decoration value underline

dys-font

dys-font allows for the inclusion of fonts in an email safe manner.

attribute unit description default value
href string Font URL n/a
name string Font Name (used in the font-family attribute) n/a
<dys-font href="https://fonts.googleapis.com/css?family=Modak" name="Modak" />

dys-style

The CSS included in the dys-style tag will be rendered into the <head> tag of the email. CSS can also be inlined, add styles directly to HTML elements by applying the "inline" attribute on the dys-style tag.

<dys-style>
  h1 {
     color: MediumSpringGreen;
  }
</dys-style>

<!-- Below example has inline styling active -->

<dys-style inline>
  .green-text {
     color: MediumSpringGreen;
  }
</dys-style>
attribute unit description default value
inline string styles will be inlined. n/a

Export Languages

Dyspatch provides support for exporting DML into these languages:

Changelog

Updates and major changes to the DML language are listed below.

2020-12-21

2020-12-14