NAV Navbar
DML HTML

DML Introduction

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

Basic Block Structure

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

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

Block Example

A Two Column Block

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

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

Abstractions

dys-row

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

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

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

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

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

dys-column

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

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

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

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

<dys-block>
  <dys-row>

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

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

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

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

dys-text

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

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

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

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

dys-img

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

Add an editable attribute to make the image available in the Dyspatch visual editor. src and alt attributes are editable in the Dyspatch visual editor.

Note that 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-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;height:auto;outline:none;text-decoration:none;width:100%;' width='100' />
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

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

dys-button

Displays a customizable button that works across all email clients.

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

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

      <!-- Style button with variable -->
      <dys-button href="@{url}"
                  color="#FFFFFF"
                  background-color="#00bdb1"
                  font-weight="bold"
                  padding="15px 30px"
                  font-size="18px"
                  border-radius="50px"
                  editable="action">
        Styled Button
      </dys-button>
    </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-color:#414141;border:none;border-radius:3px;cursor:auto;padding:10px 25px;' valign='middle'>
                                                <a href='https://example.com' style='background:#414141;color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;' target='_blank'>Click me! </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <!-- Style button with variable -->
                            <tr>
                                <td align='center' style='font-size:0px;padding:15px 30px;word-break:break-word;' vertical-align='middle'>
                                    <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:separate;line-height:100%;'>
                                        <tr>
                                            <td align='center' bgcolor='#00bdb1' role='presentation' style='background-color:#00bdb1;border:none;border-radius:50px;cursor:auto;padding:10px 25px;' valign='middle'>
                                                <a href='https://example.com' style='background:#00bdb1;color:#FFFFFF;font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:bold;line-height:120%;margin:0;text-decoration:none;text-transform:none;' target='_blank'>Styled Button </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
                </td>
            </tr>
        </tbody>
    </table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->

Add an editable attribute to make the button available in the Dyspatch visual editor. The href attribute and text content are editable in the Dyspatch visual editor.

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

dys-table

dys-table produces an HTML table. This is most useful when paired with dynamic data, such as receipt items.

<dys-block>

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

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

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

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

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

dys-group

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

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

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

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

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

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

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

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

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

dys-raw

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

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

Components

dys-block

The container for all block markup. All block content must be placed inside dys-block tags.

<dys-block>
  <!-- All block content goes in here -->
</dys-block>
<!-- All block content goes in here -->

dys-inputs

Container for the inputs into the block. Only defined inputs can be used as variables in block content.

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

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

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

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

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

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

DML supports 5 inputs for different data types:

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

dys-for

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

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

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

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

Validation:

dys-if

Include content only if a condition evaluates to true.

attribute description
cond true or false condition to evaluate
<dys-block>
  <dys-inputs>
    <dys-bool key="value" placeholder="true" />
  </dys-inputs>
  <dys-if cond="value">
    <dys-row>
      <dys-column>
        <dys-text>Content</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;'>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]-->

Validation:

Themes

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

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

dys-attributes

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

Supported attributes:

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

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

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

Export Languages

Dyspatch provides support for exporting DML into these languages: