NAV
DML HTML AMPHTML

DML Introduction

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

Looking for a guided introduction for DML? Check out our DML 101 guide!

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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

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 email builder, 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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-50' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-img' style='font-size:0;line-height:0;padding:10px 25px;text-align:center;'>
          <div style='border:none;display:inline-block;font-size:0;line-height:0;max-width:100%;position:relative;width:50px;'>
            <amp-img alt='Descriptive alternative text' class='contain' height='1' layout='responsive' src='https://d1pgqke3goo8l6.cloudfront.net/n8yBxvNaR2293QAhTZw5_templateimage.png' style='' width='1'></amp-img>
          </div>
        </div>
      </amp-layout>
    </div>
  </div>
  <div class='dys-column-per-50' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

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 class='dys-button-a' 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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='padding:10px 25px;word-break:break-word;'>
          <div [text]='"#Invites:" + state.invites' style='color:#000000;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;'>
            #Invites: 0
          </div>
        </div>
        <div class='dys-button' style='padding:10px 25px;text-align:center;'>
          <button class='dys-button-a' on='tap:AMP.setState({ state: { invites: state.invites + 1 }})' style='align-items:center;background:orange;border:none;border-radius:3px;color:black;display:inline-flex;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;height:auto;line-height:120%;padding:10px 25px;text-decoration:none;text-transform:none;'>
            <span style='flex:1 1 100%;word-break:break-word;'>
              Invite more people
            </span>
          </button>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

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>
  <dys-comment> This example will update when the text in the first column is clicked </dys-comment>
  <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>
  <dys-comment>
    A simple example using AMP actions to show and hide buttons
  </dys-comment>
  <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.

dys-template

You can use the AMP templating system 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.

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-dynamic>
      <dys-template>
        Tickets remaining: {{tickets}}
      </dys-template>
    </dys-dynamic>
  </dys-list>
</dys-block>

dys-templates

You can use a top level dys-templates element in a block to write out and store the dys-template elements a block will use.

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

  ...

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

Components

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

Editables & Localizables

The editable attribute is available for many DML components, allowing you to control which content in the block will be available for customization in the email builder. For example, an editable attribute added to a <dys-img> tag will only allow the src, alt text, and href to be editable in the template builder.

When an editable attribute is added to an element, the content becomes placeholder text that will be visible and editable in the template builder. Without the editable attribute the content saved in the block will be locked in and unavailable for editing in the template builder.

The localizable attribute allows you to mark up specific content that you want to translate at the block level. This is especially useful for blocks that contain content that needs to be localized, like footers, but shouldn't be modified by users building templates.

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

Empowering Email Builders

Some attributes change how the elements in the block will behave in Dyspatch's email builder. This enables you to set up blocks with optional elements, or restrict which fields users can change, or allow users to change some design elements.

editable-fields

Use editable-fields to control what can actually change in the email builder. For example, use editable-fields='content' on a button to only allow users to change the button's text but not link.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-comment>
      Only the "Click me!" can be changed and the URL is locked in the email
      builder
      </dys-comment>
      <dys-button editable="button" editable-fields="content" href="https://www.dyspatch.io">
        Click me!
      </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='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 class='dys-button-a' href='https://www.dyspatch.io' 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>
            </table>
          </div>
          <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-button' style='padding:10px 25px;text-align:center;'>
          <a class='dys-button-a' href='https://www.dyspatch.io' style='align-items:center;background:#414141;border:none;border-radius:3px;color:#ffffff;display:inline-flex;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;height:auto;line-height:120%;padding:10px 25px;text-decoration:none;text-transform:none;' target='_blank'>
            <span style='flex:1 1 100%;word-break:break-word;'>
              Click me!
            </span>
          </a>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

editable-styles

editable-styles gives users the ability to change the look and feel of elements. Use this with dys-palette when you have elements, like dys-text, that can have different colors.

<dys-block>
  <dys-comment>
    Users can change the background colour and padding for the row 
    and column in the example below
  </dys-comment>
  <dys-row editable="row" editable-styles="background-color,padding">
    <dys-column editable="column" editable-styles="background-color,padding">
      <dys-text editable="text" editable-styles="line-height" color="#FFFFFF">
        Users can modify the line-height for this dys-text element
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>

editable-group

Use editable-group to connect similar elements together. For example, you could use it to connect two dys-text's in a dys-mobile and dys-desktop so they're updated at the same time.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-desktop>
        <dys-text editable-group='text' editable='Desktop Text' font-size='22px'>
          This text is linked and will edited at the same time in the email builder
        </dys-text>
      </dys-desktop>
      <dys-mobile>
        <dys-text editable-group='text' editable='Mobile Text' font-size='16px'>
          This text is linked and will edited at the same time in the email builder
        </dys-text>
      </dys-mobile>
    </dys-column>
  </dys-row>
</dys-block>

show

The show attribute allows users to show and hide elements in a block. This is especially useful if you have blocks that are similar but one of them has an extra element in it.

For example, use show='false' to add an optional subtitle to a title block that's hidden by default. Elements where show='false' won't be in the exported email.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-title editable="Title" show="'true'">
        This title is optional and will be shown by default. An end user can hide it in the email builder.
      </dys-title>
      <dys-text editable="Text">
        This text isn't optional and will allways be shown
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>

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>
  <dys-comment>
    All block content goes in here
  </dys-comment>

  <dys-export targets="ampscript">
    <dys-raw>
    <dys-comment>
      AMPScript tracking snippet
    </dys-comment>
      <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>
<!--[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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

dys-wrapper

dys-wrapper allows you to wrap multiple rows together. This is really useful when you want nested layouts to share the same border.

It's important to note that you cannot nest a full-width dys-row inside a full-width dys-wrapper. dys-row will act as a non full-width dys-row.

In addition, if you are using a background-url to display an image on dys-wrapper attempting to put one inside of a dys-row will likely render your email incorrectly in some versions of Outlook.

Finally, if you use background-color on dys-wrapper and a background-url in its dys-hero or dys-row, the background-color will be over the background-image in some versions of Outlook. Unfortunately, there is no way to keep the image under the content and over dys-wrapper's background-color due to z-index being ignored on most tags in some versions of Outlook.

<dys-block>
   <dys-wrapper border = "1px solid #000000" padding = "20px 30px">
      <dys-row>
         <dys-column>
            <dys-img src = "https://picsum.photos/id/1022/600" width = "600px" alt = "Northern Lights" padding = "0" />
         </dys-column>
      </dys-row>
      <dys-spacer />
      <dys-row border = "1px solid #000000">
         <dys-column>
            <dys-text>
                First line of text
            </dys-text>
            <dys-divider border-width = "1px" />
            <dys-text>
                Second line of text
            </dys-text>
         </dys-column>
      </dys-row>
   </dys-wrapper>
</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='border:1px solid #000000;direction:ltr;font-size:0px;padding:20px 30px;text-align:center;vertical-align:top;'>
          <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
          <!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:540px;" width="540"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
          <div style='margin:0px auto;max-width:540px;'>
            <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:540px;">
<![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:0;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:540px;'>
                                    <img alt='Northern Lights' height='auto' src='https://picsum.photos/id/1022/600' style='border:none;display:block;font-size:13px;height:auto;outline:none;text-decoration:none;width:100%;' width='540' />
                                  </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]-->
          <!--[if mso | IE]>

<![endif]-->
          <div style='height:20px;line-height:20px;'>
            &#8202;
          </div>
          <!--[if mso | IE]>

<![endif]-->
          <!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:540px;" width="540"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
          <div style='margin:0px auto;max-width:540px;'>
            <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
              <tbody>
                <tr>
                  <td style='border:1px solid #000000;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:540px;">
<![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;'>
                              First line of text
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                            <p style='border-top-color:#000000;border-top-style:solid;border-top-width:1px;font-size:1px;margin:0px auto;width:100%;'></p>
                            <!--[if mso | IE]><table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-top-color:#000000;border-top-style:solid;border-top-width:1px;font-size:1px;margin:0px auto;width:490px;' width='490px'><tr><td style='height:0;line-height:0;'>&nbsp</td></tr></table><![endif]-->
                          </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;'>
                              Second line of text
                            </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]>
</td></tr></table>
<![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<div class='wrapper' style='border:1px solid #000000;direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 30px;text-align:center;vertical-align:top;'>
  <div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:540px;padding:20px 0;text-align:center;vertical-align:top;'>
    <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
      <div style=''>
        <amp-layout layout='container'>
          <div class='dys-img' style='font-size:0;line-height:0;padding:0;text-align:center;'>
            <div style='border:none;display:inline-block;font-size:0;line-height:0;max-width:100%;position:relative;width:540px;'>
              <amp-img alt='Northern Lights' class='contain' height='1' layout='responsive' src='https://picsum.photos/id/1022/600' style='' width='1'></amp-img>
            </div>
          </div>
        </amp-layout>
      </div>
    </div>
  </div>
  <div style='font-size:0;word-break:break-word;'>
    <div style='height:20px;line-height:20px;'>
      &#8202;
    </div>
  </div>
  <div class='row' style='border:1px solid #000000;direction:ltr;margin-left:auto;margin-right:auto;max-width:540px;padding:20px 0;text-align:center;vertical-align:top;'>
    <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
      <div style=''>
        <amp-layout layout='container'>
          <div class='dys-text' style='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 line of text
            </div>
          </div>
          <div style='display:flex;font-size:1px;justify-content:center;padding:10px 25px;'>
            <div style='border-top-color:#000000;border-top-style:solid;border-top-width:1px;font-size:1px;width:100%;'></div>
          </div>
          <div class='dys-text' style='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 line of text
            </div>
          </div>
        </amp-layout>
      </div>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
background-color color section color n/a
background-position percent/'left','top',...(2 values max) css background position top center
background-position-x percent/keyword css background position x none
background-position-y percent/keyword css background position y none
background-repeat string css background repeat repeat
background-size px/percent/'cover'/'contain' 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-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
editable string makes the wrapper editable in the email builder. required for editable-styles n/a
editable-styles keyword ability to edit css styling in the email builder (background-color, padding) n/a
full-width string make the wrapper full-width n/a
padding px supports up to 4 parameters 20px 0
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
text-align string css text-align center

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.

The direction attribute will control which order the columns show on desktop devices. Using the special value reverse will make the row "language" aware and flip for right-to-left languages. This way your template designs are maintained no matter which locale they're in.

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>

  <dys-comment>
    Full width row
  </dys-comment>
  <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-color:#00bdb1;margin:0px auto;max-width:600px;'>
  <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='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]-->
<table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='background-color:#00bdb1;width:100%;'>
  <tbody>
    <tr>
      <td>
        <!--[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:#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>
        <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
      </td>
    </tr>
  </tbody>
</table>
<div class='row' style='background:#00bdb1;background-color:#00bdb1;direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
</div>
<div class='row-wrapper' style='background:#00bdb1;background-color:#00bdb1;direction:ltr;margin-left:auto;margin-right:auto;padding:20px 0;text-align:center;vertical-align:top;width:100%;'>
  <div class='row' style='max-width:600px;'>
    <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
      <div style=''>
        <amp-layout layout='container'>
          <div class='dys-text' style='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>
          </div>
        </amp-layout>
      </div>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
background-color color background color for the row n/a
background-position px/% css background position (left,center, right, top, bottom) top center
background-position-x px/% css background position x (left, center, right) none
background-position-y px/% css background position y (top,center, bottom) none
background-repeat string css background repeat (repeat, no-repeat) repeat
background-size px/% css background size (contain, cover, auto, px, percent) 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 set the display order of direct children (ltr,rtl) ltr
editable string makes the row editable in the email builder. required for editable-styles n/a
editable-styles keyword ability to edit css styling in the email builder (background-color, padding) n/a
full-width string make the row full-width n/a
hidden n/a only used in AMP emails. the element will not be displayed 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
show true/false enable the ability to optionally show/hide the element in the email builder n/a
text-align string css text-align (left, center, right, start, end) center
vertical-align string css vertical align (top, middle, bottom) top

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>

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

    <dys-comment>
      Your second column
    </dys-comment>
    <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><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><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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-50' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
  <div class='dys-column-per-50' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default attributes
background-color color 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-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 set the display order of direct children (ltr,rtl) ltr
editable string makes the column editable in the email builder. required for editable-styles n/a
editable-styles keyword ability to edit css styling in the email builder (background-color, padding) n/a
hidden n/a only used in AMP emails. the element will not be displayed n/a
inner-background-color color inner background color for a column n/a
inner-border 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-radius px/% inner border radius n/a
inner-border-right string inner css border format n/a
inner-border-top string inner css border format n/a
padding px supports up to 4 parameters 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
padding-top px row top offset n/a
show true/false enable the ability to optionally show/hide the element in the email builder n/a
vertical-align string css vertical align (top, middle, bottom) top
width px/% column width (100 / number of non-raw elements in row)%

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 email builder.

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"
      editable-styles="color">
        Hello again, but bolder!
      </dys-text>
    </dys-column>
  </dys-row>


  <dys-row>
    <dys-column>
      <dys-comment>
        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 Email Builder.
      </dys-comment>
      <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%'>
              <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 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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-50' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
  <div class='dys-column-per-50' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
</div>
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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 href='https://docs.dyspatch.io/dml/'>
              this is a link!
            </a>
          </div>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
align keyword aligns the text (left, right, center, justify, start, end) start
color color text color #000000
container-background-color color inner element background color n/a
css-class string class name, added to the root HTML element created n/a
editable string allows content to be modified and localized in the email builder n/a
editable-styles keyword ability to edit css styling in the email builder (color, font-size, font-weight, line-height) n/a
editable-group string link the editable fields with other components so they all update together in the email builder n/a
font-family string css font family Helvetica, Arial, sans-serif
font-size px text size 13px
font-style string css font style (normal, italic, oblique) n/a
font-weight number text thickness n/a
height px/% the height of the element n/a
hidden n/a only used in AMP emails. the element will not be displayed n/a
id string unique id n/a
letter-spacing px/% letter spacing none
line-height px/%/em space between the lines 1
localizable n/a allows content to be localized in the block editor n/a
on string only used in AMP emails. used to install event handlers 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
role string describes the functional role of the element, required to use AMP on= attribute n/a
show true/false enable the ability to optionally show/hide the element in the email builder n/a
tabindex number allow/prevent sequential focus navigation & define order, required to use AMP on= attribute n/a
text-decoration string css text decoration (underline, overline, line-through, none) n/a
text-transform string css text transform (uppercase, lowercase, capitalize) 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" editable-styles="color">
        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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-title' style='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>
        </div>
        <div class='dys-title' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
align keyword aligns the title (left, right, center, justify, start, end) start
color color title text color #000000
container-background-color color inner element background color n/a
css-class string class name, added to the root HTML element created n/a
editable string allows content to be modified and localized in the email builder n/a
editable-styles keyword ability to edit css styling in the email builder (color, font-size, font-weight, level, line-height, align) n/a
editable-group string link the editable fields with other components so they all update together in the email builder n/a
font-family string css font family Helvetica, Arial, sans-serif
font-size px text size 32px
font-style string css font style (normal, italic, oblique) n/a
font-weight number text thickness n/a
height px/% the height of the element n/a
hidden n/a only used in AMP emails. the element will not be displayed n/a
letter-spacing px/% letter spacing none
level keyword sets the underlying HTML tag for semantic markup (h1, h2, h3, h4, h5, h6) h2
line-height px/%/em space between the lines 46px
localizable n/a content can be localized in the block editor n/a
on string only used in AMP emails. used to install event handlers 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
show true/false enable the ability to optionally show/hide the element in the email builder n/a
text-decoration string css text decoration (underline, overline, line-through, none) n/a
text-transform string css text transform (uppercase, lowercase, capitalize) 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 email builder. 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 email builder.

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" />

      <dys-comment>
        Only allow href, alt, and title to be modified.
        Prevents img src to be changed.
      </dys-comment>
      <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"
               editable-styles="height, width" />

    </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>
              <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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-img' style='font-size:0;line-height:0;padding:10px 25px;text-align:center;'>
          <div style='border:none;display:inline-block;font-size:0;line-height:0;max-width:100%;position:relative;width:100px;'>
            <amp-img alt='Descriptive alternative text' class='contain' height='1' layout='responsive' src='https://d1pgqke3goo8l6.cloudfront.net/n8yBxvNaR2293QAhTZw5_templateimage.png' style='' width='1'></amp-img>
          </div>
        </div>
        <div class='dys-img' style='font-size:0;line-height:0;padding:10px 25px;text-align:center;'>
          <a href='link-to-this' style='border:none;display:inline-block;font-size:0;line-height:0;max-width:100%;position:relative;width:100px;' target='_blank'>
            <amp-img alt='Descriptive alternative text' class='contain' height='1' layout='responsive' src='https://d1pgqke3goo8l6.cloudfront.net/n8yBxvNaR2293QAhTZw5_templateimage.png' style='' title='tooltip' width='1'></amp-img>
          </a>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
align keyword aligns the image (left, right, center, start, end) 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
editable n/a content can be modified in the email builder n/a
editable-fields keyword ability to edit specified attributes in the email builder (src, alt, title, href) n/a
editable-styles keyword ability to edit css styling in the email builder (height, width) n/a
editable-group string link the editable fields with other components so they all update together in the email builder 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
hidden n/a only used in AMP emails. the element will not be displayed n/a
href url link to redirect to on click n/a
id string unique id n/a
localizable n/a content can be localized in the block editor n/a
on string only used in AMP emails. Determines what happens when the element is clicked 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 n/a
rel string specify the rel attribute n/a
role string describes the functional role of the element, required to use AMP on= attribute n/a
show true/false enable the ability to optionally show/hide the element in the email builder 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
tabindex number allow/prevent sequential focus navigation & define order, required to use AMP on= attribute 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>
    <dys-comment>
      Placeholder URL
    </dys-comment>
    <dys-string key="url" placeholder="https://example.com" />
  </dys-inputs>

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

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

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

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

      <dys-comment>
        Style button with an icon
      </dys-comment>
      <dys-button icon-src="https://dbvvgh7kbcsjfvr6zdysfcs.s3.us-west-2.amazonaws.com/imgs/fnQVaDKkAgAmtZh4wpdys-icon.png"
                  color="#444444"
                  background-color="#ffffff"
                  border="2px solid #9C58BB"
                  border-radius="8px"
                  font-size="16px"
                  icon-spacing="4px"
                  icon-width="20px"
                  icon-vertical-align="-3px">
       Button with Icon
      </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='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 class='dys-button-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>
              <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 class='dys-button-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>
              <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 class='dys-button-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>
              <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 class='dys-button-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>
              <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='#ffffff' role='presentation' style='background:#ffffff;border:2px solid #9C58BB;border-radius:8px;cursor:auto;mso-padding-alt:10px 25px;' valign='middle'>
                        <p class='dys-button-a' style='background:#ffffff;border-radius:8px;color:#444444;display:inline-block;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;line-height:120%;margin:0;mso-padding-alt:0px;padding:10px 25px;text-decoration:none;text-transform:none;'>
                          <!--[if mso | IE]><span style="mso-text-raise:-3px;"><![endif]-->
                          <img aria-hidden='' src='https://dbvvgh7kbcsjfvr6zdysfcs.s3.us-west-2.amazonaws.com/imgs/fnQVaDKkAgAmtZh4wpdys-icon.png' style='padding-right:4px;vertical-align:-3px;width:20px;' width='20' />
                          <!--[if mso]><span>&nbsp;</span><![endif]-->
                          <!--[if mso | IE]></span><![endif]-->
                          Button with Icon
                        </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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-button' style='padding:10px 25px;text-align:center;'>
          <a class='dys-button-a' href='https://example.com' style='align-items:center;background:#414141;border:none;border-radius:3px;color:#ffffff;display:inline-flex;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;height:auto;line-height:120%;padding:10px 25px;text-decoration:none;text-transform:none;' target='_blank'>
            <span style='flex:1 1 100%;word-break:break-word;'>
              Click me!
            </span>
          </a>
        </div>
        <div class='dys-button' style='padding:15px 30px;text-align:center;'>
          <a class='dys-button-a' href='https://example.com' style='align-items:center;background:#00bdb1;border:none;border-radius:50px;color:#FFFFFF;display:inline-flex;font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:bold;height:auto;line-height:120%;padding:10px 25px;text-decoration:none;text-transform:none;' target='_blank'>
            <span style='flex:1 1 100%;word-break:break-word;'>
              Styled Button
            </span>
          </a>
        </div>
        <div class='dys-button' style='padding:10px 25px;text-align:center;'>
          <a class='dys-button-a' href='editable-href' style='align-items:center;background:#414141;border:none;border-radius:3px;color:#ffffff;display:inline-flex;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;height:auto;line-height:120%;padding:10px 25px;text-decoration:none;text-transform:none;' target='_blank'>
            <span style='flex:1 1 100%;word-break:break-word;'>
              Non-Editable Button Text
            </span>
          </a>
        </div>
        <div class='dys-button' style='padding:10px 25px;text-align:center;'>
          <a class='dys-button-a' href='https://example.com' on='tap: AMP.setState({})' style='align-items:center;background:#414141;border:none;border-radius:3px;color:#ffffff;display:inline-flex;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;height:auto;line-height:120%;padding:10px 25px;text-decoration:none;text-transform:none;' target='_blank'>
            <span style='flex:1 1 100%;word-break:break-word;'>
              Update AMP state!
            </span>
          </a>
        </div>
        <div class='dys-button' style='padding:10px 25px;text-align:center;'>
          <button class='dys-button-a' style='align-items:center;background:#ffffff;border:2px solid #9C58BB;border-radius:8px;color:#444444;display:inline-flex;font-family:Helvetica, Arial, sans-serif;font-size:16px;font-weight:normal;height:auto;line-height:120%;padding:10px 25px;text-decoration:none;text-transform:none;'>
            <div class='dys-img' style='font-size:0;line-height:0;'>
              <div style='display:inline-block;font-size:0;line-height:0;max-width:100%;padding-right:4px;position:relative;width:20px;'>
                <amp-img aria-hidden='' class='contain' height='1' layout='responsive' src='https://dbvvgh7kbcsjfvr6zdysfcs.s3.us-west-2.amazonaws.com/imgs/fnQVaDKkAgAmtZh4wpdys-icon.png' style='' width='1' />
              </div>
            </div>
            <span style='flex:1 1 100%;word-break:break-word;'>
              Button with Icon
            </span>
          </button>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

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 email builder.

attribute unit description default value
align keyword aligns the image (left, right, center, start, end) center
background-color color button background-color #414141
border string css border format none
border-bottom string css border format n/a
border-color color button border-color 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
editable n/a content can be modified in the email builder n/a
editable-fields string ability to edit specified attributes in the email builder (content, href) n/a
editable-group string link the editable fields with other components so they all update together in the email builder n/a
editable-styles string ability to edit css styling in the email builder (align, color, background-color, border-color, border-radius, icon-width, icon-spacing, icon-vertical-align, icon-position) n/a
font-family string css font family Helvetica, Arial, sans-serif
font-size px/% text size 13px
font-style string css font style (normal, italic, oblique) n/a
font-weight number text thickness normal
height px/% button height n/a
hidden n/a only used in AMP emails. the element will not be displayed n/a
href link link to be triggered when the button is clicked n/a
icon-alt string alt text for the icon n/a
icon-position string positioning for the icon (left, right) left
icon-spacing px distance between icon and the content n/a
icon-src string image source for the icon n/a
icon-title string title text for the icon n/a
icon-vertical-align px position of the icon within the button vertically n/a
icon-width px width of the icon n/a
id string unique id n/a
inner-padding px/% inner button padding 10px 25px
letter-spacing px letter spacing none
line-height px/%/none line-height on link 120%
localizable n/a content can be localized in the block editor n/a
name string set html name attribute, can be important for forms n/a
on string only used in AMP emails. Determines what happens when the button is clicked 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
rel string specify the rel attribute for the button link n/a
show true/false enable the ability to optionally show/hide the element in the email builder n/a
target string specify the target attribute for the button link _blank
text-align string text-align button content (left, right, center, start, end) none
text-decoration string css text decoration (underline, overline, line-through, none) none
text-transform string css text transform (uppercase, lowercase, capitalize) none
vertical-align string css vertical align (top, middle, bottom) 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 email builder.

<dys-block>

  <dys-comment>
    Placeholder Dynamic Data
  </dys-comment>
  <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>

        <dys-comment>
          Dynamic data
        </dys-comment>
        <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>
<!--[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>
                    <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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <amp-layout style='font-size:0;line-height:0;padding:10px 25px;padding-left:50px;padding-right:50px;text-align:left;word-break:break-word;'>
          <div style='display:inline-block;width:100%;'>
            <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%;'>
              <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>
              <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>
          </div>
        </amp-layout>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
align keyword aligns the image (left, right, center, start, end) start
cellpadding px space between cells 0
cellspacing px space between cell and border 0
color color text header & footer color #000000
container-background-color color inner element background color n/a
css-class string css class name n/a
font-family string font name Helvetica, Arial, sans-serif
font-size px font size 13px
font-weight string font weight n/a
hidden n/a table will not be displayed n/a
line-height px/% space between lines 22px
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
table-layout string sets the table layout (auto, fixed, initial, inherit) auto
vertical-align string css vertical alignment (top, middle, bottom) n/a
width 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:250px;'>
                            <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='250' />
                          </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-49 outlook-group-fix' style='direction:ltr;display:inline-block;font-size:13px;text-align:left;vertical-align:top;width:49.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:250px;'>
                            <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='250' />
                          </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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-end;direction:ltr;display:flex;flex-wrap:wrap;font-size:0;height:fit-content;line-height:0;min-width:0;text-align:left;'>
    <div class='dys-column-per-50' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
      <div style=''>
        <amp-layout layout='container'>
          <div class='dys-img' style='font-size:0;line-height:0;padding:10px 25px;text-align:center;'>
            <div style='border:none;display:inline-block;font-size:0;line-height:0;max-width:100%;position:relative;width:250px;'>
              <amp-img class='contain' height='1' layout='responsive' src='https://picsum.photos/id/250/250/250' style='' width='1'></amp-img>
            </div>
          </div>
        </amp-layout>
      </div>
    </div>
    <div class='dys-column-per-50' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
      <div style=''>
        <amp-layout layout='container'>
          <div class='dys-img' style='font-size:0;line-height:0;padding:10px 25px;text-align:center;'>
            <div style='border:none;display:inline-block;font-size:0;line-height:0;max-width:100%;position:relative;width:250px;'>
              <amp-img class='contain' height='1' layout='responsive' src='https://picsum.photos/id/251/250/250' style='' width='1'></amp-img>
            </div>
          </div>
        </amp-layout>
      </div>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
background-color string background color for the entire group n/a
border-radius px/% border radius n/a
css-class string class name, added to the root HTML element created n/a
direction string set the display order of direct children (ltr,rtl) ltr
editable string makes the row editable in the email builder. required for editable-styles n/a
editable-styles keyword ability to edit css styling in the email builder (background-color, padding, border-radius) n/a
hidden n/a only used in AMP emails. grouping of elements will not be displayed n/a
padding px supports up to 4 parameters n/a
padding-bottom px group bottom offset n/a
padding-left px group left offset n/a
padding-right px group right offset n/a
padding-top px group top offset n/a
vertical-align string css vertical alignment for columsn (top, middle, bottom) top
width px/% the width of the group section (100 / number of non-raw elements in section)%

dys-mobile

dys-mobile and dys-desktop allow you to have greater control over how your blocks will display on different devices. This is useful for when content should be shown or hidden based on the screen size.

Elements within dys-mobile will only display when the block is being viewed on a mobile device with a screen width of 480px or less.

dys-desktop

Elements within dys-desktop will only display when the block is being viewed on a device with a screen larger than 480px.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-desktop>
        Oh hi, you are on a big screen.
      </dys-desktop>
      <dys-mobile>
        Look at you, you're on a small screen!
      </dys-mobile>
    </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%'>
              <div class='dys-desktop'>
                Oh hi, you are on a big screen.
              </div>
              <div>
                <!--[if !mso]-->
                <div class='dys-mobile' style='display:none;'>
                  Look at you, you're on a small screen!
                </div>
                <!--[endif]-->
              </div>
            </table>
          </div>
          <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-desktop'>
          Oh hi, you are on a big screen.
        </div>
        <div class='dys-mobile'>
          Look at you, you're on a small screen!
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

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"
            background-height="400px"
            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;height:400px;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;'>
          <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]-->
<div class='hero' style='margin:0 auto;max-width:600px;width:100%;'>
  <amp-layout height='400px' layout='fixed-height'>
    <div style='background:#000033 url("https://picsum.photos/id/536/600/400") no-repeat center center / cover;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%;'>
      <div style='margin:0 auto;padding:0px;width:100%;'>
        <div class='dys-title' style='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>
        </div>
        <div class='dys-text' style='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>
        </div>
      </div>
    </div>
  </amp-layout>
</div>

Go to Playground

attribute unit description default value
background-color color row color #ffffff
background-height px height of the image used for outlook. Required for fixed-height heroes n/a
background-position keyword background image position (left/center/right, top/center/bottom) 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
editable n/a allows content to be modified and localized in the email builder n/a
height px image height 0px
localizable n/a allows content to be localized in the block editor n/a
mode keyword hero mode (fluid-height, fixed-height) fixed-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 keyword css vertical alignment for hero content (top, middle, bottom) top
width px/% hero width 100%

dys-comment

<dys-block>
  <dys-comment>
    We use the "personsOfInterest" variable for historical reasons.
    Don't change it!
  </dys-comment>
  <!-- This comment will show in the HTML -->
  <dys-for each="user in personsOfInterest">
     @{user.name}
  </dys-for>
</dys-block>
<!-- This comment will show in the HTML -->
<!-- This comment will show in the HTML -->

Go to Playground

DML supports comments, which you can use to document your block code. Leave yourself and future team members reminders and helpful hints to explain complex templating code.

Unlike HTML comments, dys-comment's are not shown after the template is exported from Dyspatch. You're free to write paragraphs of text and not have to worry about the resulting HTML size or having your customers read your prose.

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' href="https://example.com" />
        <dys-carousel-image src='https://picsum.photos/id/110/600/400' href="https://example.com" />
        <dys-carousel-image src='https://picsum.photos/id/410/600/400' href="https://example.com" />
      </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-0abf02311dc2-radio dys-carousel-0abf02311dc2-radio-1' id='dys-carousel-0abf02311dc2-radio-1' name='dys-carousel-radio-0abf02311dc2' style='display:none;mso-hide:all;' type='radio' />
                    <input class='dys-carousel-radio dys-carousel-0abf02311dc2-radio dys-carousel-0abf02311dc2-radio-2' id='dys-carousel-0abf02311dc2-radio-2' name='dys-carousel-radio-0abf02311dc2' style='display:none;mso-hide:all;' type='radio' />
                    <input class='dys-carousel-radio dys-carousel-0abf02311dc2-radio dys-carousel-0abf02311dc2-radio-3' id='dys-carousel-0abf02311dc2-radio-3' name='dys-carousel-radio-0abf02311dc2' style='display:none;mso-hide:all;' type='radio' />
                    <div class='dys-carousel-content dys-carousel-0abf02311dc2-content' style='display:table;font-size:0px;table-layout:fixed;text-align:center;width:100%;'>
                      <a class='dys-carousel-thumbnail dys-carousel-0abf02311dc2-thumbnail dys-carousel-0abf02311dc2-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-0abf02311dc2-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-0abf02311dc2-thumbnail dys-carousel-0abf02311dc2-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-0abf02311dc2-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-0abf02311dc2-thumbnail dys-carousel-0abf02311dc2-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-0abf02311dc2-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-0abf02311dc2-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-0abf02311dc2-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-0abf02311dc2-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-0abf02311dc2-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=''>
                                  <a href='https://example.com' target='_blank'>
                                    <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' />
                                  </a>
                                </div>
                                <div class='dys-carousel-image dys-carousel-image-2 ' style='display:none;mso-hide:all;'>
                                  <a href='https://example.com' target='_blank'>
                                    <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' />
                                  </a>
                                </div>
                                <div class='dys-carousel-image dys-carousel-image-3 ' style='display:none;mso-hide:all;'>
                                  <a href='https://example.com' target='_blank'>
                                    <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' />
                                  </a>
                                </div>
                              </div>
                            </td>
                            <td class='dys-carousel-0abf02311dc2-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-0abf02311dc2-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-0abf02311dc2-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-0abf02311dc2-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=''><a href='https://example.com' target='_blank'><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' /></a></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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <amp-layout>
          <amp-carousel height='1' layout='responsive' style='border-radius:4px;' type='slides' width='1'>
            <a href='https://example.com' target='_blank'>
              <amp-img class='contain' layout='fill' src='https://picsum.photos/id/536/600/400'></amp-img>
            </a>
            <a href='https://example.com' target='_blank'>
              <amp-img class='contain' layout='fill' src='https://picsum.photos/id/110/600/400'></amp-img>
            </a>
            <a href='https://example.com' target='_blank'>
              <amp-img class='contain' layout='fill' src='https://picsum.photos/id/410/600/400'></amp-img>
            </a>
          </amp-carousel>
        </amp-layout>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
align keyword aligns the carousel (left, right, center, start, end) center
background-color string column background color n/a
border-radius px/% border radius 4px
css-class string class name, added to the root HTML element created n/a
editable n/a content can be modified in the email builder n/a
hidden n/a only used in AMP emails. the element will not be displayed n/a
icon-width px/% width of the icons on left and right of the main image 44px
id string unique id n/a
left-icon url icon on the left of the main image Dyspatch's default left arrow
localizable n/a content can be localized in the block editor n/a
on string only used in AMP emails. used to install event handlers n/a
padding px/% supports up to 4 parameters n/a
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 n/a
right-icon url icon on the right of the main image Dyspatch's default right arrow
tb-border css border format border of the thumbnails 2px solid transparent
tb-border-radius px/% border-radius of the thumbnails 6px
tb-hover-border-color string css border color of the hovered thumbnail lightgrey
tb-selected-border-color string css border color of the selected thumbnail grey
tb-width px/% thumbnail width n/a
thumbnails keyword display or hide the thumbnails (visible, hidden) visible

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
border-radius px/% border radius 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
tb-border css border format border of the thumbnails n/a
tb-border-radius px/% border-radius of the thumbnails n/a
thumbnails-src url image source to have a thumbnail different than the image it's linked to n/a
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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <amp-list height='200' id='myList' layout='responsive' src='https://amp.dev/static/inline-examples/data/amp-list-urls.json' width='396'>
          <template type='amp-mustache'>
            <div class='dys-button' style='padding:10px 25px;text-align:center;'>
              <a class='dys-button-a' href='{{url}}' style='align-items:center;background:#414141;border:none;border-radius:3px;color:#ffffff;display:inline-flex;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;height:auto;line-height:120%;padding:10px 25px;text-decoration:none;text-transform:none;' target='_blank'>
                <span style='flex:1 1 100%;word-break:break-word;'>
                  {{title}}
                </span>
              </a>
            </div>
          </template>
          <div placeholder>
            <div class='dys-text' style='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;'>
                Loading...
              </div>
            </div>
          </div>
          <div fallback>
            <div class='dys-text' style='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;'>
                Fallback value
              </div>
            </div>
          </div>
          <div overflow>
            <div class='dys-text' style='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;'>
                Overflow value
              </div>
            </div>
          </div>
        </amp-list>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
css-class string class name, added to the root HTML element created n/a
height string list height n/a
hidden n/a only used in AMP emails. the element will not be displayed n/a
id string unique id n/a
items string defines the expression to locate the array to be rendered within the response n/a
layout keyword layout for the list (container, fill, fixed, fixed-height, flex-item, nodisplay, responsive) container
max-items int specifying the maximum length of the items array to be rendered n/a
on string used to install event handlers on the list element e.g. tap.myList.refresh n/a
single-item string treat the returned result as if it were a single element array n/a
src string the URL of the remote endpoint that returns the JSON n/a
template string template used to display list results n/a
width string list width 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 pulls 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-fieldset>
                        <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-fieldset>

                    <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 selected disabled 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 class='dys-button-a' 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 class='dys-button-a' 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 class='dys-button-a' 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 class='dys-button-a' 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 class='dys-button-a' 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 class='dys-button-a' 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 class='dys-button-a' 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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
        <form action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr' method='post' style='padding:10px 25px;'>
          <div class='dys-input dys-input-text'>
            <input name='name' placeholder='Name...' required style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='text' />
          </div>
          <div class='dys-input dys-input-submit'>
            <input style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='submit' value='OK' />
          </div>
          <div submit-success>
            Success!
          </div>
          <div submit-error>
            Error!
          </div>
        </form>
        <div class='dys-text' style='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>
        </div>
        <form action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr' method='post' style='padding:10px 25px;'>
          <div class='dys-input dys-input-textarea'>
            <textarea autoexpand name='name' placeholder='Short Story...' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;'></textarea>
          </div>
          <div class='dys-input dys-input-submit'>
            <input style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='submit' value='OK' />
          </div>
          <div submit-success>
            Success!
          </div>
          <div submit-error>
            Error!
          </div>
        </form>
        <div class='dys-text' style='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>
        </div>
        <form action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr' method='post' style='padding:10px 25px;'>
          <div class='dys-input dys-input-date'>
            <input name='select-date' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='date' value='2020-12-30' />
          </div>
          <div class='dys-input dys-input-month'>
            <input name='select-month' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='month' value='2020-12' />
          </div>
          <div class='dys-input dys-input-datetime-local'>
            <input name='select-datetime' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='datetime-local' value='2020-12-30T12:34:56' />
          </div>
          <div class='dys-input dys-input-week'>
            <input name='week_year' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='week' />
          </div>
          <div class='dys-input dys-input-time'>
            <input name='time_now' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='time' />
          </div>
          <div class='dys-input dys-input-submit'>
            <input style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='submit' value='OK' />
          </div>
          <div submit-success>
            Success!
          </div>
          <div submit-error>
            Error!
          </div>
        </form>
        <div class='dys-text' style='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>
        </div>
        <form action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr' method='post' style='padding:10px 25px;'>
          <div class='dys-input dys-input-email'>
            <input name='email' placeholder='email..' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='email' />
          </div>
          <div class='dys-input dys-input-url'>
            <input name='url' placeholder='url..' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='url' />
          </div>
          <div class='dys-input dys-input-submit'>
            <input style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='submit' value='OK' />
          </div>
          <div submit-success>
            Success!
          </div>
          <div submit-error>
            Error!
          </div>
        </form>
        <div class='dys-text' style='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>
        </div>
        <form action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr' method='post' style='padding:10px 25px;'>
          <div class='dys-input dys-input-radio'>
            <input id='cat' name='favourite animal' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='radio' value='cat' />
            <label for='cat' style='color:#333;font-size:14px;padding:8px 0 4px 0;'>
              Cat
            </label>
          </div>
          <div class='dys-input dys-input-radio'>
            <input id='dog' name='favourite animal' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='radio' value='dog' />
            <label for='dog' style='color:#333;font-size:14px;padding:8px 0 4px 0;'>
              Dog
            </label>
          </div>
          <div class='dys-input dys-input-radio'>
            <input id='other' name='favourite animal' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='radio' value='other' />
            <label for='other' style='color:#333;font-size:14px;padding:8px 0 4px 0;'>
              Other
            </label>
          </div>
          <div class='dys-input dys-input-submit'>
            <input style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='submit' value='OK' />
          </div>
          <div submit-success>
            Success!
          </div>
          <div submit-error>
            Error!
          </div>
        </form>
        <div class='dys-text' style='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>
        </div>
        <form action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr' method='post' style='padding:10px 25px;'>
          <fieldset style=''>
            <div class='dys-input dys-input-checkbox'>
              <input id='cat' name='favourite animal' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='checkbox' value='cat' />
              <label for='cat' style='color:#333;font-size:14px;padding:8px 0 4px 0;'>
                Cat
              </label>
            </div>
            <div class='dys-input dys-input-checkbox'>
              <input id='dog' name='favourite animal' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='checkbox' value='dog' />
              <label for='dog' style='color:#333;font-size:14px;padding:8px 0 4px 0;'>
                Dog
              </label>
            </div>
            <div class='dys-input dys-input-checkbox'>
              <input id='other' name='favourite animal' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='checkbox' value='other' />
              <label for='other' style='color:#333;font-size:14px;padding:8px 0 4px 0;'>
                Other
              </label>
            </div>
            <div class='dys-input dys-input-submit'>
              <input style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='submit' value='OK' />
            </div>
          </fieldset>
          <div submit-success>
            Success!
          </div>
          <div submit-error>
            Error!
          </div>
        </form>
        <div class='dys-text' style='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>
        </div>
        <form action-xhr='https://amp.dev/documentation/examples/api/submit-form-xhr' method='post' style='padding:10px 25px;'>
          <div class='dys-input dys-input-select'>
            <label for='cars' style='color:#333;font-size:14px;padding:8px 0 4px 0;'>
              Select a car
            </label>
            <select id='cars' name='cars' style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;'>
              <option disabled selected value='volvo'>
                Volvo
              </option>
              <option value='saab'>
                Saab
              </option>
              <option value='fiat'>
                Fiat
              </option>
              <option value='audi'>
                Audi
              </option>
            </select>
          </div>
          <div class='dys-input dys-input-submit'>
            <input style='background-color:#fff;border:1px solid #444;border-radius:2px;color:#333;font-size:14px;line-height:16px;padding:2px 4px;' type='submit' value='OK' />
          </div>
          <div submit-success>
            Success!
          </div>
          <div submit-error>
            Error!
          </div>
        </form>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
action-xhr string specifies a server endpoint to handle the form input and submit the form via XMLHttpRequest (XHR) n/a
align string aligns the image (left, right, center, start, end) center
css-class string class name, added to the root HTML element created n/a
id string unique id n/a
hidden n/a only used in AMP emails. the element will not be displayed 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
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

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
autoexpand string allows the textarea input type to expand and shrink n/a
background-color string background color for your input #fff
border string css border format 1px solid #444
border-bottom string css border format n/a
border-left string css border format n/a
border-radius px border redius 2px
border-right string css border format n/a
border-top string css border format n/a
color string text color #fff
css-class string class name, added to the root HTML element created center
disabled string disable the input n/a
font-family string font name Helvetica, Arial, sans-serif
font-size px text size 14px
id string unique id n/a
label string provides a label for the input n/a
label-color string text color for the input label #333
label-font-size px font size for the input label 14px
label-padding px/% supports up to 4 parameters 8px 0 4px 0
label-padding-bottom px/% bottom offset for the input label n/a
label-padding-left px/% left offset for the input label n/a
label-padding-right px/% right offset for the input label n/a
label-padding-top px/% top offset for the input label n/a
line-height px/% space between the lines 16px
on string used to add event handlers on the input element e.g. change: AMP.setState({...}) n/a
name string provides a name for the input n/a
padding px/% supports up to 4 parameters 2px 4px
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
placeholder string provides a placeholder for the input n/a
required string input is required to submit the form n/a
type string css type for input (text, email, tel, file, submit, radio) n/a
value string provides a placeholder for the input 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-fieldset

This element is used to group input fields for your dys-form.

attribute unit description default value
css-class string class name, added to the root HTML element created n/a
hidden n/a the element will not be displayed n/a
id string unique id n/a
legend string fieldset legend n/a
padding px/% supports up to 4 parameters n/a
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

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 value sent in form submission n/a
selected n/a initial selected option n/a
disabled n/a prevents user from selecting option 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 displayed on successful request n/a
template string amp-template rendered on success 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 displayed on network error n/a
template string amp-mustache template rendered on error n/a

dys-social

Display links for various social networks with their associated logo. You can add social networks with the dys-social-element tag

<dys-block>
  <dys-row>
    <dys-column>
      <dys-social font-size="15px" icon-size="30px" theme="black" shape="circle">
        <dys-social-element name="facebook" href="https://www.facebook.com/getdyspatch">
          Facebook
        </dys-social-element>
        <dys-social-element  name="twitter" href="https://twitter.com/getdyspatch">
          Twitter
        </dys-social-element>
        <dys-social-element name="linkedin" href="https://www.linkedin.com/company/dyspatch/">
          Linkedin
        </dys-social-element>
       </dys-social>
    </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;'>
                  <!--[if mso | IE]><table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation'><tr><![endif]-->
                  <!--[if mso | IE]><td><![endif]-->
                  <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='display:inline-table;float:none;vertical-align:middle;'>
                    <tr>
                      <td style='padding:4px;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-radius:3px;overflow:hidden;width:30px;'>
                          <tbody>
                            <tr>
                              <td style='font-size:0;height:30px;vertical-align:middle;width:30px;'>
                                <a href='https://www.facebook.com/getdyspatch' target='_blank'>
                                  <img height='30' src='https://d5omksr585ze3.cloudfront.net/dys-social-icons/circle/black/dys-social-facebook.png' style='display:block;' width='30' />
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style='padding:4px 4px 4px 0;vertical-align:middle;'>
                        <a href='https://www.facebook.com/getdyspatch' style='color:#333333;font-family:Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;text-decoration:none;' target='_blank'>
                          <span style='color:#333333;text-decoration:none;'>
                            <span style='color:#333333;font-family:Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;text-decoration:none;'>
                              Facebook
                            </span>
                          </span>
                        </a>
                      </td>
                    </tr>
                  </table>
                  <!--[if mso | IE]></td><![endif]-->
                  <!--[if mso | IE]><td><![endif]-->
                  <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='display:inline-table;float:none;vertical-align:middle;'>
                    <tr>
                      <td style='padding:4px;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-radius:3px;overflow:hidden;width:30px;'>
                          <tbody>
                            <tr>
                              <td style='font-size:0;height:30px;vertical-align:middle;width:30px;'>
                                <a href='https://twitter.com/getdyspatch' target='_blank'>
                                  <img height='30' src='https://d5omksr585ze3.cloudfront.net/dys-social-icons/circle/black/dys-social-twitter.png' style='display:block;' width='30' />
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style='padding:4px 4px 4px 0;vertical-align:middle;'>
                        <a href='https://twitter.com/getdyspatch' style='color:#333333;font-family:Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;text-decoration:none;' target='_blank'>
                          <span style='color:#333333;text-decoration:none;'>
                            <span style='color:#333333;font-family:Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;text-decoration:none;'>
                              Twitter
                            </span>
                          </span>
                        </a>
                      </td>
                    </tr>
                  </table>
                  <!--[if mso | IE]></td><![endif]-->
                  <!--[if mso | IE]><td><![endif]-->
                  <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='display:inline-table;float:none;vertical-align:middle;'>
                    <tr>
                      <td style='padding:4px;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-radius:3px;overflow:hidden;width:30px;'>
                          <tbody>
                            <tr>
                              <td style='font-size:0;height:30px;vertical-align:middle;width:30px;'>
                                <a href='https://www.linkedin.com/company/dyspatch/' target='_blank'>
                                  <img height='30' src='https://d5omksr585ze3.cloudfront.net/dys-social-icons/circle/black/dys-social-linkedin.png' style='display:block;' width='30' />
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style='padding:4px 4px 4px 0;vertical-align:middle;'>
                        <a href='https://www.linkedin.com/company/dyspatch/' style='color:#333333;font-family:Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;text-decoration:none;' target='_blank'>
                          <span style='color:#333333;text-decoration:none;'>
                            <span style='color:#333333;font-family:Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;text-decoration:none;'>
                              Linkedin
                            </span>
                          </span>
                        </a>
                      </td>
                    </tr>
                  </table>
                  <!--[if mso | IE]></td><![endif]-->
                  <!--[if mso | IE]></tr></table><![endif]-->
                </td>
              </tr>
            </table>
          </div>
          <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div style='display:flex;justify-content:center;'>
          <div style='align-items:baseline;display:flex;flex-direction:row;flex-grow:1;flex-wrap:wrap;justify-content:center;padding:10px 25px;'>
            <div style='align-items:center;align-self:stretch;display:flex;'>
              <div style='align-self:center;padding:4px;'>
                <a href='https://www.facebook.com/getdyspatch' style='border-radius:3px;display:block;font-size:0;overflow:hidden;' target='_blank'>
                  <amp-img height='30' src='https://d5omksr585ze3.cloudfront.net/dys-social-icons/circle/black/dys-social-facebook.png' style='display:block;overflow:hidden;' width='30' />
                </a>
              </div>
              <a href='https://www.facebook.com/getdyspatch' style='align-items:center;align-self:stretch;display:flex;padding:4px 4px 4px 0;text-decoration:none;' target='_blank'>
                <span style='text-decoration:none;'>
                  <div style='color:#333333;display:inline;font-family:Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;text-decoration:none;'>
                    Facebook
                  </div>
                </span>
              </a>
            </div>
            <div style='align-items:center;align-self:stretch;display:flex;'>
              <div style='align-self:center;padding:4px;'>
                <a href='https://twitter.com/getdyspatch' style='border-radius:3px;display:block;font-size:0;overflow:hidden;' target='_blank'>
                  <amp-img height='30' src='https://d5omksr585ze3.cloudfront.net/dys-social-icons/circle/black/dys-social-twitter.png' style='display:block;overflow:hidden;' width='30' />
                </a>
              </div>
              <a href='https://twitter.com/getdyspatch' style='align-items:center;align-self:stretch;display:flex;padding:4px 4px 4px 0;text-decoration:none;' target='_blank'>
                <span style='text-decoration:none;'>
                  <div style='color:#333333;display:inline;font-family:Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;text-decoration:none;'>
                    Twitter
                  </div>
                </span>
              </a>
            </div>
            <div style='align-items:center;align-self:stretch;display:flex;'>
              <div style='align-self:center;padding:4px;'>
                <a href='https://www.linkedin.com/company/dyspatch/' style='border-radius:3px;display:block;font-size:0;overflow:hidden;' target='_blank'>
                  <amp-img height='30' src='https://d5omksr585ze3.cloudfront.net/dys-social-icons/circle/black/dys-social-linkedin.png' style='display:block;overflow:hidden;' width='30' />
                </a>
              </div>
              <a href='https://www.linkedin.com/company/dyspatch/' style='align-items:center;align-self:stretch;display:flex;padding:4px 4px 4px 0;text-decoration:none;' target='_blank'>
                <span style='text-decoration:none;'>
                  <div style='color:#333333;display:inline;font-family:Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;text-decoration:none;'>
                    Linkedin
                  </div>
                </span>
              </a>
            </div>
          </div>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
align string css alignment (left, right, center) center
border-radius px/% border radius 3px
container-background-color color container background color n/a
color color text color #333333
css-class string CSS class n/a
font-family string font Helvetica, Arial, sans-serif
font-size px text size 13px
font-style string css font style (normal, italic, oblique) n/a
font-weight string text thickness n/a
icon-size px icon size (width and height) 48px
icon-height px icon height, overrides icon-size n/a
icon-padding px padding around the icons n/a
inner-padding px social network surrounding padding 4px
line-height px/% space between the lines 22px
mode string element mode (vertical, horizontal) horizontal
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
shape string shape of icons (default, circle, square) default
text-decoration string css text decoration (underline, overline, line-through, none) none
text-padding px padding around the texts 4px 4px 4px 0
theme string theme selection for social icons (black, white, color) color

dys-social-element

This component enables you to display a given social network inside dys-social. Icons are displayed for any of the following social network names and custom icons are supported via the src attribute.

attribute unit description default value
align string css alignment (left, right, center) center
alt string image alt attribute n/a
background-color color icon color n/a
border-radius px/% border radius n/a
color string text color n/a
css-class string CSS class n/a
editable n/a allows content to be modified and localized in the email builder n/a
font-family string font type n/a
font-size px text size n/a
font-style string css font style (normal, italic, oblique) n/a
font-weight string text thickness n/a
href url redirection url n/a
icon-height px icon height, overrides icon-size n/a
icon-padding px padding around the icon n/a
icon-size px icon size (width and height) n/a
line-height px/% space between the line n/a
localizable string allows content to be localized in the block editor n/a
name string social network name, see supported list above n/a
padding px supports up to 4 parameters n/a
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
sizes media query & width set icon width based on query n/a
src url image source Each social name has its own default
srcset url & width set a different image source based on the viewport n/a
target string link target _blank
text-decoration string css text decoration (underline, overline, line-through, none) n/a
text-padding padding around the text n/a
title string image title attribute n/a
vertical-align string css vertical align (top, middle, bottom) middle

dys-divider

The dys-divider tag displays a horizontal divider that can be customized like a HTML border.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-divider border-width="2px" border-style="dashed" border-color="lightgrey" />
    </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;'>
                  <p style='border-top-color:lightgrey;border-top-style:dashed;border-top-width:2px;font-size:1px;margin:0px auto;width:100%;'></p>
                  <!--[if mso | IE]><table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-top-color:lightgrey;border-top-style:dashed;border-top-width:2px;font-size:1px;margin:0px auto;width:550px;' width='550px'><tr><td style='height:0;line-height:0;'>&nbsp</td></tr></table><![endif]-->
                </td>
              </tr>
            </table>
          </div>
          <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div style='display:flex;font-size:1px;justify-content:center;padding:10px 25px;'>
          <div style='border-top-color:lightgrey;border-top-style:dashed;border-top-width:2px;font-size:1px;width:100%;'></div>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
align string css alignment (left, right, center) center
border-color color divider color #000000
border-style string css border style (dashed, dotted, solid) solid
border-width px divider's border width 4px
container-background-color color inner element background color n/a
css-class string class name, added to the root HTML element created n/a
editable string makes the divider editable in the email builder. required for editable-styles n/a
editable-styles string ability to edit css styling in the email builder. (border-color,border-width,padding) 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
show true/false enable the ability to optionally show/hide the element in the email builder n/a
width px/% divider width 100%

dys-spacer

dys-spacer displays a blank space to add gaps between elements.

<dys-block>
    <dys-row>
        <dys-column>
            <dys-text>First line of text</dys-text>
            <dys-spacer height="50px" />
            <dys-text>Second line of text</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;'>
                    First line of text
                  </div>
                </td>
              </tr>
              <tr>
                <td style='font-size:0px;word-break:break-word;'>
                  <div style='height:50px;line-height:50px;'>
                    &#8202;
                  </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;'>
                    Second line of text
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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 line of text
          </div>
        </div>
        <div style='font-size:0;word-break:break-word;'>
          <div style='height:50px;line-height:50px;'>
            &#8202;
          </div>
        </div>
        <div class='dys-text' style='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 line of text
          </div>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute unit description default value
container-background-color color inner element background color n/a
css-class string class name, added to the root HTML element created n/a
editable string makes the spacer editable in the email builder. required for editable-styles n/a
editable-styles string ability to edit css styling in the email builder. (height) n/a
height px spacer height 20px
padding px supports up to 4 parameters none
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
show true/false enable the ability to optionally show/hide the element in the email builder 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 email builder. 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>


Go to Playground

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 email builder. The placeholder attribute is not valid on the dys-object tag.

DML supports 5 inputs for different data types:

dys-string

Used for text

dys-bool

Used for booleans

dys-number

Used for numbers

dys-array

Used for arrays and lists of items

dys-object

Used for objects which can contain any of the supported input types

dys-for

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

<dys-block>
  <dys-inputs>
    <dys-array key="pets" placeholder="['cat','dog','rabbit']" />
  </dys-inputs>

  <dys-comment>
    for loop using each
  </dys-comment>
  <dys-row>
    <dys-column>
      <dys-text>
        <dys-for each="pet in pets">
          @{pet}
        </dys-for>
      </dys-text>
    </dys-column>
  </dys-row>

  <dys-comment>
    for loop using range
  </dys-comment>
  <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]-->
<!--[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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
</div>
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

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>
        <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>

  <!-- If @{first_name} is a non-empty string, then show this message -->
  <dys-if cond='first_name != nil'>
    <dys-row>
      <dys-column>
        <dys-text>Hi @{first_name},</dys-text>
      </dys-column>
    </dys-row>
  </dys-if>

  <!-- If @{first_name} is an empty string, then show this message -->
  <dys-if cond='first_name == nil'>
    <dys-row>
      <dys-column>
        <dys-text>Hi there,</dys-text>
      </dys-column>
    </dys-row>
  </dys-if>

</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;'>
                    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]-->
<!-- If Hina is a non-empty string, then show this message -->
<!--[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;'>
                    Hi 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 Hina is an empty string, then show this message -->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
</div>
<!-- If Hina is a non-empty string, then show this message -->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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;'>
            Hi Hina,
          </div>
        </div>
      </amp-layout>
    </div>
  </div>
</div>
<!-- If Hina is an empty string, then show this message -->

Go to Playground

attribute description
cond condition to evaluate

Validation:

Since DML is a typed language, using a condition like cond='variable' will only render if the variable is both a boolean and true. Other templating languages (like handlebars, jinja) will render the variable if it is a non-empty string or a non-zero number.

To account for this, DML supports a special nil keyword. For example, cond='variable == nil' will only render if the string is empty. Meaning you can do cond='variable != nil' for cases where you want a string to be non-empty in the target export language.

Supported comparison operators:

Supported modifiers:

Supported logical operators:

Special keywords:

dys-if-else

dys-if-else allows for extending dys-if with additional conditionial branches using dys-elif and dys-else.

<dys-block>
  <dys-inputs>
    <dys-string key='status' placeholder="PASSED" />
    <dys-number key='grade' placeholder=85 />
  </dys-inputs>

  <dys-row>
    <dys-column>

      <dys-comment>.
        Both dys-else and the corresponding dys-if must be enclosed in a dys-if-else tag
      </dys-comment>
      <dys-if-else>
        <dys-if cond="status == 'PASSED'">
          <dys-text>You passed!</dys-text>
        </dys-if>
        <dys-else>
          <dys-text>Better luck next time</dys-text>
        </dys-else>
      </dys-if-else>

      <dys-text>
        <dys-comment>.
          All dys-elif tags and the corresponding dys-if must be enclosed in a dys-if-else tag
        </dys-comment>
        <dys-if-else>
          <dys-if cond="grade >= 90">
            Grade A
          </dys-if>
          <dys-elif cond="grade >= 80">
            Grade B
          </dys-elif>
          <dys-elif cond="grade >= 70">
            Grade C
          </dys-elif>
          <dys-else>
            Grade D
          </dys-else>
        </dys-if-else>
      </dys-text>

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

dys-else

dys-else allows you to display alternative content when a dys-if condition evaluates to false.

dys-elif

dys-elif allows you to extend dys-if with multiple conditions.

attribute description
cond condition to evaluate

See dys-if for supported 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>

  <dys-comment>
    Below is an example of different targeted languages
  </dys-comment>
  <dys-row>
    <dys-column>
      <dys-export targets="html, handlebars"> <dys-comment> Export only for HTML, Handlebars </dys-comment>
        <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"> <dys-comment> Export only for Cheetah </dys-comment>
        <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]-->
<!--[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;'>
                    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]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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>
        </div>
      </amp-layout>
    </div>
  </div>
</div>
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <tr>
          <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
            <div class='dys-text' style='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>
            </div>
          </td>
        </tr>
        <tr>
          <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
            <div class='dys-text' style='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>
            </div>
          </td>
        </tr>
        <tr>
          <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
            <div class='dys-text' style='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>
            </div>
          </td>
        </tr>
      </amp-layout>
    </div>
  </div>
</div>
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'></amp-layout>
    </div>
  </div>
</div>

Go to Playground

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

Validation:

Supported targets:

dys-raw

The dys-raw tag allows you to pass content directly to the template. It will not be modified or parsed by Dyspatch.

This can be useful for directly calling ESP-specific content without it appearing in the Dyspatch editor.

<dys-block>
  <dys-raw>
    <!-- Content here goes directly to the template and you won't see content here in Dyspatch -->
    <!-- Use this to insert templating logic if required -->
    %%[if emailaddr == "region1" then ]%%
    %%[
    var @URL1,
    set @URL1 = "https://example.com/1"
    ]%%

    %%[ else ]%%
    var @URL1,
    set @URL1 = "https://example.com/2"
    %%[
    endif
    ]%%
  </dys-raw>
  <dys-row>
    <dys-column>
      <dys-text>
        This will be rendered in Dyspatch!
      </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;'>
                    This will be rendered in Dyspatch!
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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 will be rendered in Dyspatch!
          </div>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

dys-repeat

Allow DML components to be repeated as needed using the dys-repeat tag.

In the Email Builder, when you add a block containing a dys-repeat, you will have the option to duplicate the content inside the repeat as many times as you like. The duplicates will appear directly after the original as siblings.

If the DML components inside the dys-repeat are editable, you will also be able to edit the components in the duplicates.

dys-repeat can be used as a wrapper around almost all DML components, and dys-repeat does not add any extra code to the email on its own (only the duplicated content is added).

<dys-block>
  <dys-row>
    <dys-column>
      <dys-comment>
        You will be able to duplicate the dys-text inside the repeat below, and the duplicate will be editable!
      </dys-comment>
      <dys-repeat editable="repeatText">
        <dys-text editable="text">
            My text
        </dys-text>
      </dys-repeat>
    </dys-column>
  </dys-row>

  <dys-comment>
    The entire row with all its children will be duplicated in this repeat. Both the row and the text inside will be editable in the duplicate.
  </dys-comment>
  <dys-repeat editable="repeatRow">
    <dys-row editable="row">
      <dys-column>
        <dys-text editable="text2">
            My text
        </dys-text>
      </dys-column>
    </dys-row>
  </dys-repeat>
</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;'>
                    My text
                  </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;'>
                    My text
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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;'>
            My text
          </div>
        </div>
      </amp-layout>
    </div>
  </div>
</div>
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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;'>
            My text
          </div>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

attribute description
editable id to enable and track the repeated content in the email builder

Validation:

Filters

Many templating systems have a way to modify variables with functions, often called filters, to change how the variable will display. Filters are invoked by using the vertical bar, or pipe, symbol (|) and may have optional arguments in parentheses.

escape

Many templating escape HTML by default, but if your environment does not then you can force escaping by using the escape filter.

Templating Language Export
Django {{var|escape}}
Freemarker ${var?esc}
Jinja {{var|escape}}
Liquid {{var|escape}}
Marketo allowHTML="true" added to header tag*
Responsys ${var?html}

*Note that Marketo does not support escaping at the variable level and that including an escape filter will enable HTML escaping globally.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-text>
        @{user_input|escape}
      </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;'>
                    @{user_input}
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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;'>
            @{user_input}
          </div>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

noescape

Use the noescape filter to prevent HTML from being escaped in your render environment. This is useful when including variables that are expected to contain markup content.

Templating Language Export
Django {{var|safe}}
Freemarker ${var?no_esc}
Handlebars {{{var}}}
Iterable {{{var}}}
Jinja {{var|safe}}
Mandrill {{{var}}}
Pardot {{{var}}}
SendGrid {{{var}}}
<dys-block>
  <dys-row>
    <dys-column>
      <dys-text>
        @{user_input|noescape}
      </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;'>
                    @{user_input}
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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;'>
            @{user_input}
          </div>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

raw

The raw filter is an "escape hatch" that is used to invoke a filter only supported in your rendering environment. Note that Dyspatch's preview can't apply the transform, but it will display the variable.

Language DML Input Output
Django @{var|raw("func1:val|func2")} {{var|func1:val|func2}}
Freemarker @{var|raw("func1(val)?func2")} ${var?func1(val)?func2}
Jinja @{var|raw("func1(val)|func2")} {{var|func1(val)|func2}}
Liquid @{var|raw("func1:val|func2")} {{var|func1:val|func2}}
Responsys @{var|raw("func1(val)?func2")} ${var?func1(val)?func2}
AMPscript @{var|raw("func1(func2(var))")} %%=func1(func2(var))}}
Iterable @{var|raw("func1(func2 var)")} {{func1(func2 var)}}
Mandrill @{var|raw("func var")} {{func1 var}}
<dys-block>
  <dys-row>
    <dys-column>
      <dys-text>
        @{variable|raw("title")}
      </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;'>
                    @{variable}
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<div class='row' style='direction:ltr;margin-left:auto;margin-right:auto;max-width:600px;padding:20px 0;text-align:center;vertical-align:top;'>
  <div class='dys-column-per-100' style='align-self:flex-start;direction:ltr;height:fit-content;min-width:0;'>
    <div style=''>
      <amp-layout layout='container'>
        <div class='dys-text' style='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;'>
            @{variable}
          </div>
        </div>
      </amp-layout>
    </div>
  </div>
</div>

Go to Playground

Themes

Themes are used in the Dyspatch email builder 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-palette colors='#FFFFFF, #000000, #0000EE' />
  <dys-row padding='10px 15px' background-color="chartreuse" />
</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-palette

Use dys-palette to set a color palette of up to 12 colors for your theme. These can be selected in the email builder for elements using the editable-styles attribute.

attribute unit description default value
colors color Default theme colors n/a

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-block>
  <dys-style>
    h1 {
      color: MediumSpringGreen;
    }
  </dys-style>

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

  <dys-style inline>
    .green-text {
      color: MediumSpringGreen;
    }
  </dys-style>

  <!-- Below example wraps the style in an outlook condition -->

  <dys-style outlook-conditional="gte mso 9">
    .green-text {
      color: MediumSpringGreen;
    }
  </dys-style>
</dys-block>
<!-- Below example has inline styling active -->
<!-- Below example wraps the style in an outlook condition -->
<!-- Below example has inline styling active -->
<!-- Below example wraps the style in an outlook condition -->

Go to Playground

attribute unit description default value
inline string styles in this tag will be inlined n/a
outlook-conditional string wrap the style tag in an outlook conditional statement 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.

2024-01-30

2023-11-23

2023-11-01

2023-10-18

2023-10-10

2023-10-05

2023-05-01

2023-03-09

2023-03-01

2023-02-06

2023-01-12

2023-01-10

2023-01-03

2022-12-08

2022-12-05

2022-12-01

2022-11-01

2022-07-25

2022-03-02

2021-12-17

2020-12-21

2020-12-14

2020-03-08