# Dyspatch DML Reference — LLM Edition > Auto-generated for AI crawlers. Humans should use the normal docs. --- # Changelog Updates and major changes to the DML language are listed below. #### 2025-12-04 - Added support for `border-color`, `border-style` and `border-width` on dys-column. - Added `border-style`, `border-radius`,`border-width`, and `border-color` as valid `editable-styles` to dys-column. #### 2025-11-26 - Added a new `dys-pill` component. Use it to display compact, rounded label-style elements (pills) with optional icons. The `dys-pill` supports editable color, border, and icon attributes. - New attributes: `icon-src`, `icon-alt`, `icon-title`, `icon-width`, `icon-position`, `icon-spacing`, `icon-vertical-align`, `variant`. - Supports editable-styles: `color`, `background-color`, `border-color`, `border-radius`, `padding`, `font-size`, `align`, and icon-related attributes. #### 2025-10-08 - Added `dys-includes`, `dys-partials`, and `dys-include` DML elements. #### 2025-09-29 - Added attribute `variant` to the following supporting elements: - `dys-button`, `dys-text`, `dys-row`, `dys-column`, `dys-title`, `dys-divider`, `dys-spacer`, `dys-group`, `dys-img`, `dys-table`. #### 2025-08-25 - Links that have the attribute `target="_blank"` will also have the attribute `rel="noopener noreferrer"` added. ### 2024-01-30 - Added `dys-if-else`, `dys-else` and `dys-elif` conditional templating constructs. ### 2023-11-23 - Added a new `dys-repeat` component. Use it to allow DML components to be repeated when editing in the email builder. ### 2023-11-01 - `dys-group` now supports `border-radius`, `padding` and `background-color` as editable-styles. Use these to control how your groups look inside the email builder. ### 2023-10-18 - `dys-group` now supports `border-radius` and `padding`. Use these to control the shape and spacing of your `dys-group`s. ### 2023-10-10 - Added `dys-attribute` support for `dys-table`. - `dys-button` now supports `border-radius` as an editable-style. Use this to control the shape of your buttons in the email builder. ### 2023-10-05 - The `outlook-conditional` attribute was added for `dys-style`. Use this in your theme or blocks to add overrides styles for specific versions of outlook. ### 2023-05-01 - The `show` attribute was added for `dys-spacer`. Use this to build blocks with optional elements that be toggled in the builder. ### 2023-03-09 - The `show` attribute was added for `dys-row`, `dys-column` and `dys-divider`. Use this to build blocks with optional elements that can be toggled in the builder. ### 2023-03-01 - `dys-title` now supports `align` as an editable-style. Use this to control how titles align in the email builder. ### 2023-02-06 - `dys-divider` now supports `border-width`, `border-color` and `padding` as editable-styles. Use these to control how your dividers look inside the email builder. ### 2023-01-12 - The `show` attribute was added for `dys-button`, `dys-img`, and `dys-text`, `dys-title`. Use this to build blocks with optional elements that can be toggled in the builder. ### 2023-01-10 - Added `editable-style` support for `dys-column` and `dys-wrapper`. Padding and background-color can now be changed for either element in the email builder. ### 2023-01-03 - Added the `nil` keyword for conditionals to improve truthy/falsey handling. ### 2022-12-08 - Improved support for localizing emails by extending dys-row's direction attribute to support a special `reverse` attribute which will flip column order to match the locale. - `dys-button` now supports `align` as an editable-style. Use this to control how buttons align in the email builder. ### 2022-12-05 - Added `font-weight`, `font-size`, and `line-height` as valid `editable-styles` for `dys-title` and `dys-text`. Use this to optionally control how text appears in the email builder. ### 2022-12-01 - Added the `level` attribute to `dys-title` so users can control which heading level gets output for semantic markup. ### 2022-11-01 - Added `editable-styles` support for `dys-img`. Height and width can now be modified in the email builder. ### 2022-07-25 - Added `dys-attribute` support for `dys-row`, `dys-column`, `dys-img`, and `dys-divider`. ### 2022-03-02 - Added `editable-style` support for `dys-row`. Row padding and background-color can now be changed in the email builder. ### 2021-12-17 - Added new `dys-mobile` and `dys-desktop` components, which allow you to have greater control over how your blocks will display on different devices. ### 2020-12-21 - Added a new `dys-hero` component. Use it to build hero's with editable backgrounds. ### 2020-12-14 - `dys-carousel` now has a `ratio` attribute to set image ratios on the AMP version. ### 2020-03-08 - The `localizable` attribute can now be used in the block editor to localize content at the block level. Use it for header and footer blocks so you only have to translate that content once.
























--- # 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. ```dml Hello @{name} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed nulla nibh. ``` --- # Export Languages Dyspatch provides support for exporting DML into these languages: - HTML - Handlebars - CheetahMail - Salesforce AMPscript - Salesforce Pardot Merge Language - Apache FreeMarker - Liquid - Marketo Email Syntax - Oracle Reponsys Personalization Language - Mandrill Handlebars - Handlebars.java --- # AMP for Email ## Introduction [AMP for email](https://amp.dev/documentation/guides-and-tutorials/?format=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: - Replying to a notification - Inviting more users to their account - Displaying relevant items in a targeted email - Adding more items to a cart - Confirming an order Read our [AMP documentation](https://docs.dyspatch.io/email/getting_started_with_amp/) 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. ```dml #Invites: 0 Invite more people ``` 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"`. ```dml Displays even numbers from an array named "numbers" Evaluate ``` [Read more here.](https://amp.dev/documentation/components/amp-bind/?format=email) 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. ```dml This example will update when the text in the first column is clicked Hello there! Will update ``` 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'` ```dml A simple example using AMP actions to show and hide buttons Toggle Button 2 ``` ## 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](https://amp.dev/documentation/components/amp-mustache/?format=email#syntax). 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](#dys-form) and [List](#dys-list) for more information. ```dml Tickets remaining: {{tickets}} ``` ## 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. ```dml Tickets remaining: {{tickets}} ... ... ``` --- ## dys-block All block content must be placed inside `dys-block` tags. Most blocks you create will just contain `` and ``, 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. ```dml All block content goes in here AMPScript tracking snippet Hello! ``` --- ## dys-button AMP Icon This is an AMP enhanced block. Displays a customizable button that works across all email clients. ```dml Placeholder URL Default button style Click me! Style button with variable Styled Button Only allow link to be modified. Non-Editable Button Text Update AMP state on click. Update AMP state! Style button with an icon Button with Icon ``` 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 | | max-chars | string | define a character limit for the button content in the email builder | 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 | | variant | string | predefined style modifier from theme | n/a | | width | px/% | button width | n/a | --- ## dys-carousel 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. ```dml ``` | 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 | ### dys-carousel-image 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-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`. ```dml Your first column First Column Content Your second column Second Column Content ``` | 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-color | color | column border-color | 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-style | string | column border-style (`dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, `outset`) | n/a | | border-top | string | css border format | n/a | | border-width | px | column border-width (max 8px) | n/a | | css-class | string | class name, added to the root HTML element created | n/a | | 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`, `border-width`, `border-style`, `border-color`, `border-radius`) | 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 | | variant | string | predefined style modifier from theme | 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-comment ```dml We use the "personsOfInterest" variable for historical reasons. Don't change it! @{user.name} ``` 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. --- # 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 `` 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 | --- ## dys-desktop Elements within `dys-desktop` will only display when the block is being viewed on a device with a screen larger than 480px. ```dml Oh hi, you are on a big screen. Look at you, you're on a small screen! ``` --- ## dys-divider The `dys-divider` tag displays a horizontal divider that can be customized like a HTML border. ```dml ``` | 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 | | variant | string | predefined style modifier from theme | n/a | | width | px/% | divider width | 100% | --- ## 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. ```dml Only the "Click me!" can be changed and the URL is locked in the email builder Click me! ``` ### editable-styles `editable-styles` gives users the ability to change the look and feel of elements. Use this with [dys-palette](#dys-palette) when you have elements, like dys-text, that can have different colors. ```dml Users can change the background colour and padding for the row and column in the example below Users can modify the line-height for this dys-text element ``` ### 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. ```dml This text is linked and will edited at the same time in the email builder This text is linked and will edited at the same time in the email builder ``` ### 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. ```dml This title is optional and will be shown by default. An end user can hide it in the email builder. This text isn't optional and will allways be shown ``` ### variant The `variant` attribute lets you apply predefined styling from your theme to specific elements at the block level. For example, adding `variant="primary"` to an element automatically applies all the styles defined for the “primary” named variant in your theme. ```dml Primary Variant ``` --- ## 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. ```dml

Basic Text Input

 Success! Error! Basic Text Input

Text Area Input

 Success! Error! Text Area Input

Time Based Inputs

 Success! Error! Time Based Inputs

Validated Inputs

 Success! Error! Validated Inputs

Radio

Label tag is auto created if a label= attribute is supplied to input Success! Error! Radio

Checkbox

 Success! Error! Checkbox

Select

 Volvo Saab Fiat Audi Success! Error! Select ``` | 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-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. ```dml ``` | 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 | | variant | string | predefined style modifier from theme | 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-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. ```dml I need a gyro Maybe with a side of tabbouleh ``` | 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-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`](https://amp.dev/documentation/components/amp-img/?format=email) element when exporting to AMP. `dys-img` can only be used in `dys-column`. ```dml Only allow href, alt, and title to be modified. Prevents img src to be changed. ``` | 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 | | border-width | 0px-8px | border width | n/a | | border-style | keyword | border style (`dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, `outset`) | n/a | | border-color | color | border color | 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`, `border-width`, `border-style`, `border-color`, `border-radius`) | 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 | | variant | string | predefined style modifier from theme | n/a | | width | px | image width | 100% | --- ## 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. ```dml {{title}} Loading... Fallback value Overflow value Static Content! ``` | 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](#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-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. --- ## Partials and Includes Partials are reusable code snippets defined within a single block. They are designed to reduce repetition and make your DML code more maintainable. ### dys-includes A container tag that holds reusable definitions such as `dys-partial` components and embedded blocks. All partials must be defined inside a single `dys-includes` element within the block. ### dys-partial Defines a reusable section of content or layout that can be included multiple times within a block. Partials are defined within a `dys-includes` container using the `dys-partial` tag. Each partial must have a unique `name` attribute. | attribute | unit | description | default value | | --------- | ------ | -------------------------------------- | ------------- | | name | string | unique identifier string for a partial | n/a | ### dys-include A placeholder tag used to insert and display the content of a defined `dys-partial` or an embedded block. Reference the target component by its `name` attribute. When including a partial that contains `editable` or localizable attributes, use the `id-prefix` or `id-suffix` attributes on `dys-include` to ensure unique editable or localizable IDs and avoid conflicts in repeated partials or embedded blocks. | attribute | unit | description | default value | | --------- | ------ | ------------------------------------------------------------- | ------------- | | name | string | specifies the name of the `dys-partial` referenced (required) | n/a | | id-prefix | string | prepends value to the start of an editable-id | n/a | | id-suffix | string | appends value to the end of an editable-id | n/a | ```dml Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Button Text ``` --- ## dys-pill AMP Icon This is an AMP enhanced block. Displays a customizable pill that works across all email clients. ```dml Horizontal “chip group” First Second Third Horizontal with icons Left Icon Right Icon Vertical stack First Second Third ``` Add an `editable` attribute to make the pill available in the Dyspatch visual editor. Add an `editable-fields` with the `editable` attribute to selectively control which fields are editable. | attribute | unit | description | default value | | ------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | | align | keyword | horizontal alignment (`left`, `right`, `center`, `start`, `end`) | left | | background-color | color | pill background color | #F2F3F5 | | border | string | css border format | none | | border-bottom | string | css border format | n/a | | border-color | color | border color | n/a | | border-left | string | css border format | n/a | | border-radius | px/% | border radius (supports 1–4 values) | 999px | | border-right | string | css border format | n/a | | border-top | string | css border format | n/a | | color | color | text color | #333333 | | css-class | string | class name added to the root HTML element | n/a | | custom-attrs | string | additional attributes passthrough (feature-flag controlled) | n/a | | editable | n/a | content can be modified in the email builder | n/a | | editable-fields | string | restrict which attributes are editable in the builder (`content`, `icon-src`, `icon-alt`, `icon-title`, etc.) | n/a | | editable-group | string | link editable fields with other components so they update together | n/a | | editable-styles | string | allow CSS styling edits in the builder (`color`, `background-color`, `border-color`, `border-radius`, `padding`, `padding-top`, `padding-bottom`, `padding-left`, `padding-right`, `font-size`, `align`, `icon-width`, `icon-spacing`, `icon-vertical-align`, `variant`) | 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 | 500 | | hidden | n/a | AMP only: the element will not be displayed | n/a | | icon-alt | string | alt text for the icon | n/a | | icon-position | string | icon placement (`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 pill vertically (emits `mso-text-raise` in Outlook) | n/a | | icon-width | px | width of the icon (height matches unless `icon-height` provided) | 13px | | id | string | unique id | n/a | | inner-padding | px/% | inner pill padding, shape the chip and control text spacing inside the pill | 4px 10px | | letter-spacing | px | letter spacing | none | | line-height | px/%/none | line-height | 120% | | localizable | n/a | content can be localized in the block editor | n/a | | max-chars | number | define a character limit for the pill content in the email builder; extra characters are replaced with an ellipsis (`…`) | n/a (no truncation) | | name | string | set HTML name attribute | 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-align | string | text alignment (`left`, `right`, `center`, `start`, `end`) | n/a | | text-decoration | string | css text decoration (`underline`, `overline`, `line-through`, `none`) | none | | text-transform | string | css text transform (`uppercase`, `lowercase`, `capitalize`) | none | | title | string | HTML title attribute (allowed only if feature flag enabled) | n/a | | vertical-align | string | css vertical align (`top`, `middle`, `bottom`) | middle | | variant | string | predefined style modifier from theme | n/a | | width | px/% | pill width | n/a | --- ## 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. ```dml This is a row Full width row This is a full width row, you may need to increase your browser width to see the difference! ``` | 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 | | variant | string | predefined style modifier from theme | n/a | | vertical-align | string | css vertical align (`top`, `middle`, `bottom`) | top | --- ## dys-social Display links for various social networks with their associated logo. You can add social networks with the `dys-social-element` tag ```dml Facebook Twitter Linkedin ``` | 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. - apple - discord - dribbble - facebook - github - google-play - instagram - linkedin - medium - pinterest - reddit - snapchat - soundcloud - spotify - threads - tiktok - tumblr - twitch - twitter - vimeo - wechat - whatsapp - x - xing - youtube | 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-spacer `dys-spacer` displays a blank space to add gaps between elements. ```dml First line of text Second line of text ``` | 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 | | variant | string | predefined style modifier from theme | n/a | --- ## dys-style The CSS included in the `dys-style` tag will be rendered into the `` 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. ```dml h1 { color: MediumSpringGreen; } .green-text { color: MediumSpringGreen; } .green-text { color: MediumSpringGreen; } ``` | 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 | --- ## dys-table `dys-table` produces an HTML table. This is most useful when paired with dynamic data, such as receipt items. Note that `` and `` elements can be marked as editable and used in Dyspatch's email builder. ```dml Placeholder Dynamic Data Item Price Apples $1.00/lb Oranges $1.22/lb Dynamic data @{item.name} @{item.price} ``` | 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 | | variant | string | predefined style modifier from theme | n/a | | vertical-align | string | css vertical alignment (`top`, `middle`, `bottom`) | n/a | | width | px/% | table width | 100% | --- ## 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`. ```dml Hello again! Hello again, but bolder! 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. Hello, this is a link! ``` | 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 | | max-chars | string | define a character limit for the text content in the email builder | 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 | | prevent-loner-words | true/false | prevents loner words (single words appearing alone on the last line) | 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 | | variant | string | predefined style modifier from theme | 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`. ```dml Welcome to Dyspatch! Check out these templates 😎 ``` | 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 | | max-chars | string | define a character limit for the title content in the email builder | 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 | | prevent-loner-words | true/false | prevents loner words (single words appearing alone on the last line) | 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 | | variant | string | predefined style modifier from theme | n/a | --- ## 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. ```dml First line of text Second line of text ``` | 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`, `border`, `border-width`, `border-style`, `border-color`) | 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 | --- ## default The `default` filter provides a fallback value to be used if the variable is not present. This will render different output depending on the templating language it's exported to. Below is the expected output per language for DML input of `@{var|default(there)}`: | Language | Output | | ---------- | ---------------------------------------------------------------------------------------------- | | Django | {{var|default_if_none:"there"}} | | Handlebars | {{#if var}}{{var}}{{else}}there{{/if}} | | Jinja | {{var|default("there")}} | | Liquid | {{var|default:"there"}} | | Marketo | ${var|'there'} | | AMPscript | %%[ IF Empty(@var) OR @var == "Unknown" THEN set @var = "there" ENDIF ]%% %%var%% | | Iterable | {{defaultIfEmpty var "there"}} | | Mandrill | {{#if var}}{{var}}{{else}}there{{/if}} | | Responsys | ${var!"there"} | ```dml Hi, @{var|default(there)}! ``` --- ## 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._ ```dml @{user_input|escape} ``` --- # 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. --- ## 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}}} | ```dml @{user_input|noescape} ``` --- ## 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}} | ```dml @{variable|raw("title")} ``` --- # 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](https://docs.dyspatch.io/dml_101/intro/)! ## Basic Block Structure ```dml Hello there! ``` 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. --- ## 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. ```dml This content will show for all export languages. Notice in the DML example to the right ---> This content will only show if I am exporting to Handlebars or AMPscript. Below is an example of different targeted languages Export only for HTML, Handlebars @{item} Export only for Cheetah Default Content for Cheetah Export ``` | attribute | description | | --------- | ----------------------------------------------------------------------------------- | | targets | accepts one or more valid [export languages](#export-languages) separated by commas | Validation: - Requires a `targets` attribute Supported targets: - `html` - `ampscript` - `cheetah` - `django` - `freemarker` - `getresponse` - `handlebars` - `iterablehandlebars` - `jinja` - `liquid` - `mandrillhandlebars` - `marketo` - `pardot` - `sendgridhandlebars` - `sendpulse` --- ## dys-for Loop over each item in a sequence with the dys-for tag. ```dml for loop using each @{pet} for loop using range @{item} ``` | attribute | description | | --------- | -------------------------- | | each | iterate over an array | | range | iterate over a given range | Validation: - Requires either an `each` or a `range` attribute --- ## dys-if Include content only if a condition evaluates to true. ```dml Thanks for being an active premium member! Are you enjoying your new kite? Hi @{first_name}, Hi there, ``` | attribute | description | |-----------|-----------------------| | cond | condition to evaluate | Validation: - Requires a `cond` attribute 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: - `==` equal to - `!=` not equal to - `>` greater than - `<` less than - `>=` greater than or equal to - `<=` less than or equal to - `in` is in Supported modifiers: - `+` plus - `-` minus - `*` multiply - `/` divide - `%` modulus Supported logical operators: - `&&` and - `||` or Special keywords: - `nil` falsey/truthy ### dys-if-else `dys-if-else` allows for extending `dys-if` with additional conditionial branches using `dys-elif` and `dys-else`. ```dml . Both dys-else and the corresponding dys-if must be enclosed in a dys-if-else tag You passed! Better luck next time . All dys-elif tags and the corresponding dys-if must be enclosed in a dys-if-else tag Grade A Grade B Grade C Grade D ``` ### 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-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. ```dml ``` | 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-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. ```dml %%[if emailaddr == "region1" then ]%% %%[ var @URL1, set @URL1 = "https://example.com/1" ]%% %%[ else ]%% var @URL1, set @URL1 = "https://example.com/2" %%[ endif ]%% This will be rendered in Dyspatch! ``` --- ## 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). ```dml You will be able to duplicate the dys-text inside the repeat below, and the duplicate will be editable! My text 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. My text ``` | attribute | description | | --------- | ---------------------------------------------------------------- | | editable | id to enable and track the repeated content in the email builder | Validation: - Requires an `editable` value - Requires at least one child element









--- # 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](#dys-export) depending on the ESP. For a complete list of supported ESPs see the [Export Languages](#export-languages) section. --- ## dys-attributes ```xml ``` `dys-attributes` allow users to change the default styling on abstractions. Supported attributes: - dys-body - dys-text - dys-title - dys-button - dys-a (links) - dys-palette - dys-row - dys-column - dys-img - dys-divider - dys-table ### 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 | | ------------------- | ---------- | ------------------------------------- | ------------- | | css-class | string | Class name, added to the body element | n/a | | 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`](#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`](#dys-title) for a list of supported attributes. ### dys-a Use `dys-a` to modify how links appear when used in a [`dys-text`](#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 | --- # 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 `` 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](https://app.dyspatch.io/themes). --- ## Variants The variant attribute allows you to create multiple named style variations for a single DML element. This provides template builders a curated set of design choices, while maintaining control over your theme's consistency. Variants automatically **inherit the styles from their base element.** This ensures that default formatting and alignment remain consistent unless explicitly overridden. ### Elements Supporting Variant Items - `dys-button` - `dys-text` - `dys-row` - `dys-column` - `dys-title` - `dys-divider` - `dys-spacer` - `dys-group` - `dys-img` - `dys-table` ### Example *Note: Each button variant in the example inherits center alignment from the parent element, while other style attributes differ based on the variant’s own definitions.* ```xml Default Button Primary Variant Error Button ``` --- ## DML Autocomplete Schema ```json {"dys-block":{"attrs":{},"attrsDesc":{},"children":["dys-wrapper","dys-row","dys-dynamic","dys-export","dys-hero","dys-inputs","dys-raw","dys-static","dys-comment","dys-templates","dys-repeat","dys-style","dys-includes","dys-include"],"info":"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 al...","selfClosing":false},"dys-button":{"attrs":{"align":null,"background-color":null,"border":null,"border-bottom":null,"border-color":null,"border-left":null,"border-radius":null,"border-right":null,"border-top":null,"color":null,"container-background-color":null,"css-class":null,"editable":null,"editable-fields":null,"editable-group":null,"editable-styles":null,"font-family":null,"font-size":null,"font-style":null,"font-weight":null,"height":null,"hidden":null,"href":null,"icon-alt":null,"icon-position":null,"icon-spacing":null,"icon-src":null,"icon-title":null,"icon-vertical-align":null,"icon-width":null,"id":null,"inner-padding":null,"letter-spacing":null,"line-height":null,"localizable":null,"max-chars":null,"name":null,"on":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"rel":null,"show":null,"target":null,"text-align":null,"text-decoration":null,"text-transform":null,"vertical-align":null,"variant":null,"width":null},"attrsDesc":{"align":"aligns the image (`left`, `right`, `center`, `start`, `end`)","background-color":"button background-color","border":"css border format","border-bottom":"css border format","border-color":"button border-color","border-left":"css border format","border-radius":"border radius","border-right":"css border format","border-top":"css border format","color":"text color","container-background-color":"button container background color","css-class":"class name, added to the root HTML element created","editable":"content can be modified in the email builder","editable-fields":"ability to edit specified attributes in the email builder (`content`, `href`)","editable-group":"link the editable fields with other components so they all update together in the email builder","editable-styles":"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`)","font-family":"css font family","font-size":"text size","font-style":"css font style (`normal`, `italic`, `oblique`)","font-weight":"text thickness","height":"button height","hidden":"only used in AMP emails. the element will not be displayed","href":"link to be triggered when the button is clicked","icon-alt":"alt text for the icon","icon-position":"positioning for the icon (`left`, `right`)","icon-spacing":"distance between icon and the content","icon-src":"image source for the icon","icon-title":"title text for the icon","icon-vertical-align":"position of the icon within the button vertically","icon-width":"width of the icon","id":"unique id","inner-padding":"inner button padding","letter-spacing":"letter spacing","line-height":"line-height on link","localizable":"content can be localized in the block editor","max-chars":"define a character limit for the button content in the email builder","name":"set html name attribute, can be important for forms","on":"only used in AMP emails. Determines what happens when the button is clicked","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","rel":"specify the rel attribute for the button link","show":"enable the ability to optionally show/hide the element in the email builder","target":"specify the target attribute for the button link","text-align":"text-align button content (`left`, `right`, `center`, `start`, `end`)","text-decoration":"css text decoration (`underline`, `overline`, `line-through`, `none`)","text-transform":"css text transform (`uppercase`, `lowercase`, `capitalize`)","vertical-align":"css vertical align (`top`, `middle`, `bottom`)","variant":"predefined style modifier from theme","width":"button width"},"children":[],"info":"Displays a customizable button that works across all email clients....","selfClosing":false},"dys-carousel":{"attrs":{"align":null,"background-color":null,"border-radius":null,"css-class":null,"editable":null,"hidden":null,"icon-width":null,"id":null,"left-icon":null,"localizable":null,"on":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"ratio":null,"right-icon":null,"tb-border":null,"tb-border-radius":null,"tb-hover-border-color":null,"tb-selected-border-color":null,"tb-width":null,"thumbnails":null},"attrsDesc":{"align":"aligns the carousel (`left`, `right`, `center`, `start`, `end`)","background-color":"column background color","border-radius":"border radius","css-class":"class name, added to the root HTML element created","editable":"content can be modified in the email builder","hidden":"only used in AMP emails. the element will not be displayed","icon-width":"width of the icons on left and right of the main image","id":"unique id","left-icon":"icon on the left of the main image","localizable":"content can be localized in the block editor","on":"only used in AMP emails. used to install event handlers","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","ratio":"controls the aspect ratio for AMP emails","right-icon":"icon on the right of the main image","tb-border":"border of the thumbnails","tb-border-radius":"border-radius of the thumbnails","tb-hover-border-color":"css border color of the hovered thumbnail","tb-selected-border-color":"css border color of the selected thumbnail","tb-width":"thumbnail width","thumbnails":"display or hide the thumbnails (`visible`, `hidden`)"},"children":["dys-carousel-image"],"info":"Carousels are a great way to show a user a variety of related images while saving on vertical space....","selfClosing":false},"dys-carousel-image":{"attrs":{"alt":null,"border-radius":null,"href":null,"rel":null,"src":null,"target":null,"tb-border":null,"tb-border-radius":null,"thumbnails-src":null,"title":null},"attrsDesc":{"alt":"image description","border-radius":"border radius","href":"link to redirect to when clicked","rel":"specify the rel attribute","src":"image source","target":"link target on click","tb-border":"border of the thumbnails","tb-border-radius":"border-radius of the thumbnails","thumbnails-src":"image source to have a thumbnail different than the image it's linked to","title":"tooltip & accessibility"},"children":[],"info":"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....","selfClosing":true},"dys-column":{"attrs":{"background-color":null,"border":null,"border-bottom":null,"border-color":null,"border-left":null,"border-radius":null,"border-right":null,"border-style":null,"border-top":null,"border-width":null,"css-class":null,"editable":null,"editable-styles":null,"hidden":null,"inner-background-color":null,"inner-border":null,"inner-border-bottom":null,"inner-border-left":null,"inner-border-radius":null,"inner-border-right":null,"inner-border-top":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"show":null,"variant":null,"vertical-align":null,"width":null},"attrsDesc":{"background-color":"background color for a column","border":"css border format","border-bottom":"css border format","border-color":"column border-color","border-left":"css border format","border-radius":"border radius","border-right":"css border format","border-style":"column border-style (`dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, `outset`)","border-top":"css border format","border-width":"column border-width (max 8px)","css-class":"class name, added to the root HTML element created","editable":"makes the column editable in the email builder. required for `editable-styles`","editable-styles":"ability to edit css styling in the email builder (`background-color`, `padding`, `border-width`, `border-style`, `border-color`, `border-radius`)","hidden":"only used in AMP emails. the element will not be displayed","inner-background-color":"inner background color for a column","inner-border":"inner css border format","inner-border-bottom":"inner css border format","inner-border-left":"inner css border format","inner-border-radius":"inner border radius","inner-border-right":"inner css border format","inner-border-top":"inner css border format","padding":"supports up to 4 parameters","padding-bottom":"row bottom offset","padding-left":"row left offset","padding-right":"row right offset","padding-top":"row top offset","show":"enable the ability to optionally show/hide the element in the email builder","variant":"predefined style modifier from theme","vertical-align":"css vertical align (`top`, `middle`, `bottom`)","width":"column width"},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"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 th...","selfClosing":false},"dys-comment":{"attrs":{},"attrsDesc":{},"children":[],"info":"DML supports comments, which you can use to document your block code. Leave yourself and future team members reminders and helpful hints to explain...","selfClosing":false},"dys-desktop":{"attrs":{},"attrsDesc":{},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"Elements within dys-desktop will only display when the block is being viewed on a device with a screen larger than 480px....","selfClosing":false},"dys-divider":{"attrs":{"align":null,"border-color":null,"border-style":null,"border-width":null,"container-background-color":null,"css-class":null,"editable":null,"editable-styles":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"show":null,"variant":null,"width":null},"attrsDesc":{"align":"css alignment (`left`, `right`, `center`)","border-color":"divider color","border-style":"css border style (`dashed`, `dotted`, `solid`)","border-width":"divider's border width","container-background-color":"inner element background color","css-class":"class name, added to the root HTML element created","editable":"makes the divider editable in the email builder. required for `editable-styles`","editable-styles":"ability to edit css styling in the email builder. (`border-color,border-width,padding`)","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","show":"enable the ability to optionally show/hide the element in the email builder","variant":"predefined style modifier from theme","width":"divider width"},"children":[],"info":"The dys-divider tag displays a horizontal divider that can be customized like a HTML border....","selfClosing":true},"dys-form":{"attrs":{"action-xhr":null,"align":null,"css-class":null,"id":null,"hidden":null,"method":null,"on":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null},"attrsDesc":{"action-xhr":"specifies a server endpoint to handle the form input and submit the form via XMLHttpRequest (XHR)","align":"aligns the image (`left`, `right`, `center`, `start`, `end`)","css-class":"class name, added to the root HTML element created","id":"unique id","hidden":"only used in AMP emails. the element will not be displayed","method":"specifies the form method. get/post","on":"used to add event handlers on the form element e.g. `submit-success: AMP.setState({...})`","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset"},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"Display a form to your users and specify an action to have recipients fill in data....","selfClosing":false},"dys-dynamic":{"attrs":{},"attrsDesc":{},"children":["dys-error","dys-input","dys-success","dys-template","dys-comment","dys-mobile","dys-desktop","dys-fieldset"],"info":"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...","selfClosing":false},"dys-static":{"attrs":{},"attrsDesc":{},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"This is a required element for AMP enhanced blocks and can be left empty. This element accepts any valid DML elements....","selfClosing":false},"dys-input":{"attrs":{"autoexpand":null,"background-color":null,"border":null,"border-bottom":null,"border-left":null,"border-radius":null,"border-right":null,"border-top":null,"color":null,"css-class":null,"disabled":null,"font-family":null,"font-size":null,"id":null,"label":null,"label-color":null,"label-font-size":null,"label-padding":null,"label-padding-bottom":null,"label-padding-left":null,"label-padding-right":null,"label-padding-top":null,"line-height":null,"on":null,"name":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"placeholder":null,"required":null,"type":null,"value":null},"attrsDesc":{"autoexpand":"allows the `textarea` input type to expand and shrink","background-color":"background color for your input","border":"css border format","border-bottom":"css border format","border-left":"css border format","border-radius":"border redius","border-right":"css border format","border-top":"css border format","color":"text color","css-class":"class name, added to the root HTML element created","disabled":"disable the input","font-family":"font name","font-size":"text size","id":"unique id","label":"provides a label for the input","label-color":"text color for the input label","label-font-size":"font size for the input label","label-padding":"supports up to 4 parameters","label-padding-bottom":"bottom offset for the input label","label-padding-left":"left offset for the input label","label-padding-right":"right offset for the input label","label-padding-top":"top offset for the input label","line-height":"space between the lines","on":"used to add event handlers on the input element e.g. `change: AMP.setState({...})`","name":"provides a name for the input","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","placeholder":"provides a placeholder for the input","required":"input is required to submit the form","type":"css type for input (`text`, `email`, `tel`, `file`, `submit`, `radio`)","value":"provides a placeholder for the input"},"children":["dys-option","dys-comment"],"info":"This element contains the input fields for your dys-form. The following types of inputs are supported: text, email, tel, file, submit, ...","selfClosing":true},"dys-fieldset":{"attrs":{"css-class":null,"hidden":null,"id":null,"legend":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null},"attrsDesc":{"css-class":"class name, added to the root HTML element created","hidden":"the element will not be displayed","id":"unique id","legend":"fieldset legend","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset"},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"This element is used to group input fields for your dys-form....","selfClosing":false},"dys-option":{"attrs":{"value":null,"selected":null,"disabled":null},"attrsDesc":{"value":"value sent in form submission","selected":"initial selected option","disabled":"prevents user from selecting option"},"children":[],"info":"dys-option is a child element to dys-input and used in conjunction with type=select. The option element provides values to select menu....","selfClosing":false},"dys-success":{"attrs":{"submit-success":null,"template":null},"attrsDesc":{"submit-success":"content displayed on successful request","template":"amp-template rendered on success"},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"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 messag...","selfClosing":false},"dys-error":{"attrs":{"submit-error":null,"template":null},"attrsDesc":{"submit-error":"content displayed on network error","template":"amp-mustache template rendered on error"},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"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 su...","selfClosing":false},"dys-group":{"attrs":{"background-color":null,"border-radius":null,"css-class":null,"direction":null,"editable":null,"editable-styles":null,"hidden":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"variant":null,"vertical-align":null,"width":null},"attrsDesc":{"background-color":"background color for the entire group","border-radius":"border radius","css-class":"class name, added to the root HTML element created","direction":"set the display order of direct children (`ltr`,`rtl`)","editable":"makes the row editable in the email builder. required for `editable-styles`","editable-styles":"ability to edit css styling in the email builder (`background-color`, `padding`, `border-radius`)","hidden":"only used in AMP emails. grouping of elements will not be displayed","padding":"supports up to 4 parameters","padding-bottom":"group bottom offset","padding-left":"group left offset","padding-right":"group right offset","padding-top":"group top offset","variant":"predefined style modifier from theme","vertical-align":"css vertical alignment for columsn (`top`, `middle`, `bottom`)","width":"the width of the group section"},"children":["dys-column","dys-comment","dys-repeat","dys-include"],"info":"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....","selfClosing":false},"dys-hero":{"attrs":{"background-color":null,"background-height":null,"background-position":null,"background-url":null,"background-width":null,"border-radius":null,"css-class":null,"editable":null,"height":null,"localizable":null,"mode":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"vertical-align":null,"width":null},"attrsDesc":{"background-color":"row color","background-height":"height of the image used for outlook. Required for `fixed-height` heroes","background-position":"background image position (`left/center/right`, `top/center/bottom`)","background-url":"background url","background-width":"width of the image used","border-radius":"border radius","css-class":"class name, added to the root HTML element created","editable":"allows content to be modified and localized in the email builder","height":"image height","localizable":"allows content to be localized in the block editor","mode":"hero mode (`fluid-height`, `fixed-height`)","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","vertical-align":"css vertical alignment for hero content (`top`, `middle`, `bottom`)","width":"hero width"},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"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 you...","selfClosing":false},"dys-img":{"attrs":{"align":null,"alt":null,"border":null,"border-radius":null,"border-width":null,"border-style":null,"border-color":null,"container-background-color":null,"css-class":null,"editable":null,"editable-fields":null,"editable-styles":null,"editable-group":null,"fluid-on-mobile":null,"height":null,"hidden":null,"href":null,"id":null,"localizable":null,"on":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"ratio":null,"rel":null,"role":null,"show":null,"src":null,"srcset":null,"tabindex":null,"target":null,"title":null,"variant":null,"width":null},"attrsDesc":{"align":"aligns the image (`left`, `right`, `center`, `start`, `end`)","alt":"image description","border":"css border definition","border-radius":"border radius","border-width":"border width","border-style":"border style (`dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, `outset`)","border-color":"border color","container-background-color":"inner element background color","css-class":"class name, added to the root HTML element created","editable":"content can be modified in the email builder","editable-fields":"ability to edit specified attributes in the email builder (`src`, `alt`, `title`, `href`)","editable-styles":"ability to edit css styling in the email builder (`height`, `width`, `border-width`, `border-style`, `border-color`, `border-radius`)","editable-group":"link the editable fields with other components so they all update together in the email builder","fluid-on-mobile":"if `true`, will be full width on mobile even if width is set","height":"image height","hidden":"only used in AMP emails. the element will not be displayed","href":"link to redirect to on click","id":"unique id","localizable":"content can be localized in the block editor","on":"only used in AMP emails. Determines what happens when the element is clicked","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","ratio":"controls the aspect ratio for AMP emails","rel":"specify the rel attribute","role":"describes the functional role of the element, required to use AMP on= attribute","show":"enable the ability to optionally show/hide the element in the email builder","src":"image source","srcset":"enables to set a different image source based on the viewport. _Note:_ Does not work in AMP.","tabindex":"allow/prevent sequential focus navigation & define order, required to use AMP on= attribute","target":"link target on click","title":"tooltip & accessibility","variant":"predefined style modifier from theme","width":"image width"},"children":[],"info":"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....","selfClosing":true},"dys-list":{"attrs":{"css-class":null,"height":null,"hidden":null,"id":null,"items":null,"layout":null,"max-items":null,"on":null,"single-item":null,"src":null,"template":null,"width":null},"attrsDesc":{"css-class":"class name, added to the root HTML element created","height":"list height","hidden":"only used in AMP emails. the element will not be displayed","id":"unique id","items":"defines the expression to locate the array to be rendered within the response","layout":"layout for the list (`container`, `fill`, `fixed`, `fixed-height`, `flex-item`, `nodisplay`, `responsive`)","max-items":"specifying the maximum length of the items array to be rendered","on":"used to install event handlers on the list element e.g. `tap.myList.refresh`","single-item":"treat the returned result as if it were a single element array","src":"the URL of the remote endpoint that returns the JSON","template":"template used to display list results","width":"list width"},"children":["dys-dynamic","dys-fallback","dys-overflow","dys-placeholder","dys-static","dys-template","dys-comment"],"info":"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 t...","selfClosing":false},"dys-template":{"attrs":{},"attrsDesc":{},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"You can use the AMP templating system in DML with the dys-template element. Note that variables will need to be in [AMP mustache\nformat](https:/...","selfClosing":false},"dys-fallback":{"attrs":{},"attrsDesc":{},"children":[],"info":"Content within the fallback element will be shown if the list source fails to load. This element accepts any valid DML elements....","selfClosing":false},"dys-placeholder":{"attrs":{},"attrsDesc":{},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"Content within the placeholder element will be shown while the list source is loading. This element accepts any valid DML elements....","selfClosing":false},"dys-overflow":{"attrs":{},"attrsDesc":{},"children":[],"info":"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 item...","selfClosing":false},"dys-mobile":{"attrs":{},"attrsDesc":{},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"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 c...","selfClosing":false},"dys-includes":{"attrs":{},"attrsDesc":{},"children":["dys-partial"],"info":"A container tag that holds reusable definitions such as dys-partial components and embedded blocks. All partials must be defined inside a single ...","selfClosing":false},"dys-partial":{"attrs":{"name":null},"attrsDesc":{"name":"unique identifier string for a partial"},"children":[],"info":"Defines a reusable section of content or layout that can be included multiple times within a block. Partials are defined within a dys-includes co...","selfClosing":false},"dys-include":{"attrs":{"name":null,"id-prefix":null,"id-suffix":null},"attrsDesc":{"name":"specifies the name of the `dys-partial` referenced (required)","id-prefix":"prepends value to the start of an editable-id","id-suffix":"appends value to the end of an editable-id"},"children":[],"info":"A placeholder tag used to insert and display the content of a defined dys-partial or an embedded block. Reference the target component by its `na...","selfClosing":false},"dys-pill":{"attrs":{"align":null,"background-color":null,"border":null,"border-bottom":null,"border-color":null,"border-left":null,"border-radius":null,"border-right":null,"border-top":null,"color":null,"css-class":null,"custom-attrs":null,"editable":null,"editable-fields":null,"editable-group":null,"editable-styles":null,"font-family":null,"font-size":null,"font-style":null,"font-weight":null,"hidden":null,"icon-alt":null,"icon-position":null,"icon-spacing":null,"icon-src":null,"icon-title":null,"icon-vertical-align":null,"icon-width":null,"id":null,"inner-padding":null,"letter-spacing":null,"line-height":null,"localizable":null,"max-chars":null,"name":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"show":null,"text-align":null,"text-decoration":null,"text-transform":null,"title":null,"vertical-align":null,"variant":null,"width":null},"attrsDesc":{"align":"horizontal alignment (`left`, `right`, `center`, `start`, `end`)","background-color":"pill background color","border":"css border format","border-bottom":"css border format","border-color":"border color","border-left":"css border format","border-radius":"border radius (supports 1–4 values)","border-right":"css border format","border-top":"css border format","color":"text color","css-class":"class name added to the root HTML element","custom-attrs":"additional attributes passthrough (feature-flag controlled)","editable":"content can be modified in the email builder","editable-fields":"restrict which attributes are editable in the builder (`content`, `icon-src`, `icon-alt`, `icon-title`, etc.)","editable-group":"link editable fields with other components so they update together","editable-styles":"allow CSS styling edits in the builder (`color`, `background-color`, `border-color`, `border-radius`, `padding`, `padding-top`, `padding-bottom`, `padding-left`, `padding-right`, `font-size`, `align`, `icon-width`, `icon-spacing`, `icon-vertical-align`, `variant`)","font-family":"css font family","font-size":"text size","font-style":"css font style (`normal`, `italic`, `oblique`)","font-weight":"text thickness","hidden":"AMP only: the element will not be displayed","icon-alt":"alt text for the icon","icon-position":"icon placement (`left`, `right`)","icon-spacing":"distance between icon and the content","icon-src":"image source for the icon","icon-title":"title text for the icon","icon-vertical-align":"position of the icon within the pill vertically (emits `mso-text-raise` in Outlook)","icon-width":"width of the icon (height matches unless `icon-height` provided)","id":"unique id","inner-padding":"inner pill padding, shape the chip and control text spacing inside the pill","letter-spacing":"letter spacing","line-height":"line-height","localizable":"content can be localized in the block editor","max-chars":"define a character limit for the pill content in the email builder; extra characters are replaced with an ellipsis (`…`)","name":"set HTML name attribute","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","show":"enable the ability to optionally show/hide the element in the email builder","text-align":"text alignment (`left`, `right`, `center`, `start`, `end`)","text-decoration":"css text decoration (`underline`, `overline`, `line-through`, `none`)","text-transform":"css text transform (`uppercase`, `lowercase`, `capitalize`)","title":"HTML title attribute (allowed only if feature flag enabled)","vertical-align":"css vertical align (`top`, `middle`, `bottom`)","variant":"predefined style modifier from theme","width":"pill width"},"children":[],"info":"Displays a customizable pill that works across all email clients....","selfClosing":false},"dys-row":{"attrs":{"background-color":null,"background-position":null,"background-position-x":null,"background-position-y":null,"background-repeat":null,"background-size":null,"background-url":null,"border":null,"border-bottom":null,"border-left":null,"border-radius":null,"border-right":null,"border-top":null,"css-class":null,"direction":null,"editable":null,"editable-styles":null,"full-width":null,"hidden":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"show":null,"text-align":null,"variant":null,"vertical-align":null},"attrsDesc":{"background-color":"background color for the row","background-position":"css background position (`left`,`center`, `right`, `top`, `bottom`)","background-position-x":"css background position x (`left`, `center`, `right`)","background-position-y":"css background position y (`top`,`center`, `bottom`)","background-repeat":"css background repeat (`repeat`, `no-repeat`)","background-size":"css background size (`contain`, `cover`, `auto`, px, percent)","background-url":"background url","border":"css border format","border-bottom":"css border format","border-left":"css border format","border-radius":"border radius","border-right":"css border format","border-top":"css border format","css-class":"class name, added to the root HTML element created","direction":"set the display order of direct children (`ltr`,`rtl`)","editable":"makes the row editable in the email builder. required for `editable-styles`","editable-styles":"ability to edit css styling in the email builder (`background-color`, `padding`)","full-width":"make the row full-width","hidden":"only used in AMP emails. the element will not be displayed","padding":"supports up to 4 parameters","padding-bottom":"row bottom offset","padding-left":"row left offset","padding-right":"row right offset","padding-top":"row top offset","show":"enable the ability to optionally show/hide the element in the email builder","text-align":"css text-align (`left`, `center`, `right`, `start`, `end`)","variant":"predefined style modifier from theme","vertical-align":"css vertical align (`top`, `middle`, `bottom`)"},"children":["dys-column","dys-group","dys-comment","dys-repeat","dys-include"],"info":"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 `6...","selfClosing":false},"dys-social":{"attrs":{"align":null,"border-radius":null,"container-background-color":null,"color":null,"css-class":null,"font-family":null,"font-size":null,"font-style":null,"font-weight":null,"icon-size":null,"icon-height":null,"icon-padding":null,"inner-padding":null,"line-height":null,"mode":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"shape":null,"text-decoration":null,"text-padding":null,"theme":null},"attrsDesc":{"align":"css alignment (`left`, `right`, `center`)","border-radius":"border radius","container-background-color":"container background color","color":"text color","css-class":"CSS class","font-family":"font","font-size":"text size","font-style":"css font style (`normal`, `italic`, `oblique`)","font-weight":"text thickness","icon-size":"icon size (width and height)","icon-height":"icon height, overrides icon-size","icon-padding":"padding around the icons","inner-padding":"social network surrounding padding","line-height":"space between the lines","mode":"element mode (`vertical`, `horizontal`)","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","shape":"shape of icons (`default`, `circle`, `square`)","text-decoration":"css text decoration (`underline`, `overline`, `line-through`, `none`)","text-padding":"padding around the texts","theme":"theme selection for social icons (`black`, `white`, `color`)"},"children":["dys-social-element"],"info":"Display links for various social networks with their associated logo. You can add social networks with the dys-social-element tag...","selfClosing":false},"dys-social-element":{"attrs":{"align":null,"alt":null,"background-color":null,"border-radius":null,"color":null,"css-class":null,"editable":null,"font-family":null,"font-size":null,"font-style":null,"font-weight":null,"href":null,"icon-height":null,"icon-padding":null,"icon-size":null,"line-height":null,"localizable":null,"name":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"sizes":null,"src":null,"srcset":null,"target":null,"text-decoration":null,"text-padding":null,"title":null,"vertical-align":null},"attrsDesc":{"align":"css alignment (`left`, `right`, `center`)","alt":"image alt attribute","background-color":"icon color","border-radius":"border radius","color":"text color","css-class":"CSS class","editable":"allows content to be modified and localized in the email builder","font-family":"font type","font-size":"text size","font-style":"css font style (`normal`, `italic`, `oblique`)","font-weight":"text thickness","href":"redirection url","icon-height":"icon height, overrides icon-size","icon-padding":"padding around the icon","icon-size":"icon size (width and height)","line-height":"space between the line","localizable":"allows content to be localized in the block editor","name":"social network name, see supported list above","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","sizes":"set icon width based on query","src":"image source","srcset":"set a different image source based on the viewport","target":"link target","text-decoration":"css text decoration (`underline`, `overline`, `line-through`, `none`)","text-padding":"padding around the text","title":"image title attribute","vertical-align":"css vertical align (`top`, `middle`, `bottom`)"},"children":[],"info":"This component enables you to display a given social network inside dys-social. Icons are displayed for any of the following social network names...","selfClosing":false},"dys-spacer":{"attrs":{"container-background-color":null,"css-class":null,"editable":null,"editable-styles":null,"height":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"show":null,"variant":null},"attrsDesc":{"container-background-color":"inner element background color","css-class":"class name, added to the root HTML element created","editable":"makes the spacer editable in the email builder. required for `editable-styles`","editable-styles":"ability to edit css styling in the email builder. (`height`)","height":"spacer height","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","show":"enable the ability to optionally show/hide the element in the email builder","variant":"predefined style modifier from theme"},"children":[],"info":"dys-spacer displays a blank space to add gaps between elements....","selfClosing":false},"dys-style":{"attrs":{"inline":null,"outlook-conditional":null},"attrsDesc":{"inline":"styles in this tag will be inlined","outlook-conditional":"wrap the style tag in an outlook conditional statement"},"children":[],"info":"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 e...","selfClosing":false},"dys-table":{"attrs":{"align":null,"cellpadding":null,"cellspacing":null,"color":null,"container-background-color":null,"css-class":null,"font-family":null,"font-size":null,"font-weight":null,"hidden":null,"line-height":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"table-layout":null,"variant":null,"vertical-align":null,"width":null},"attrsDesc":{"align":"aligns the image (`left`, `right`, `center`, `start`, `end`)","cellpadding":"space between cells","cellspacing":"space between cell and border","color":"text header & footer color","container-background-color":"inner element background color","css-class":"css class name","font-family":"font name","font-size":"font size","font-weight":"font weight","hidden":"table will not be displayed","line-height":"space between lines","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","table-layout":"sets the table layout (`auto`, `fixed`, `initial`, `inherit`)","variant":"predefined style modifier from theme","vertical-align":"css vertical alignment (`top`, `middle`, `bottom`)","width":"table width"},"children":[],"info":"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 ...","selfClosing":false},"dys-text":{"attrs":{"align":null,"color":null,"container-background-color":null,"css-class":null,"editable":null,"editable-styles":null,"editable-group":null,"font-family":null,"font-size":null,"font-style":null,"font-weight":null,"height":null,"hidden":null,"id":null,"letter-spacing":null,"line-height":null,"localizable":null,"max-chars":null,"on":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"prevent-loner-words":null,"role":null,"show":null,"tabindex":null,"text-decoration":null,"text-transform":null,"variant":null},"attrsDesc":{"align":"aligns the text (`left`, `right`, `center`, `justify`, `start`, `end`)","color":"text color","container-background-color":"inner element background color","css-class":"class name, added to the root HTML element created","editable":"allows content to be modified and localized in the email builder","editable-styles":"ability to edit css styling in the email builder (`color`, `font-size`, `font-weight`, `line-height`)","editable-group":"link the editable fields with other components so they all update together in the email builder","font-family":"css font family","font-size":"text size","font-style":"css font style (`normal`, `italic`, `oblique`)","font-weight":"text thickness","height":"the height of the element","hidden":"only used in AMP emails. the element will not be displayed","id":"unique id","letter-spacing":"letter spacing","line-height":"space between the lines","localizable":"allows content to be localized in the block editor","max-chars":"define a character limit for the text content in the email builder","on":"only used in AMP emails. used to install event handlers","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","prevent-loner-words":"prevents loner words (single words appearing alone on the last line)","role":"describes the functional role of the element, required to use AMP on= attribute","show":"enable the ability to optionally show/hide the element in the email builder","tabindex":"allow/prevent sequential focus navigation & define order, required to use AMP on= attribute","text-decoration":"css text decoration (`underline`, `overline`, `line-through`, `none`)","text-transform":"css text transform (`uppercase`, `lowercase`, `capitalize`)","variant":"predefined style modifier from theme"},"children":[],"info":"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 Dys...","selfClosing":false},"dys-title":{"attrs":{"align":null,"color":null,"container-background-color":null,"css-class":null,"editable":null,"editable-styles":null,"editable-group":null,"font-family":null,"font-size":null,"font-style":null,"font-weight":null,"height":null,"hidden":null,"letter-spacing":null,"level":null,"line-height":null,"localizable":null,"max-chars":null,"on":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"prevent-loner-words":null,"show":null,"text-decoration":null,"text-transform":null,"variant":null},"attrsDesc":{"align":"aligns the title (`left`, `right`, `center`, `justify`, `start`, `end`)","color":"title text color","container-background-color":"inner element background color","css-class":"class name, added to the root HTML element created","editable":"allows content to be modified and localized in the email builder","editable-styles":"ability to edit css styling in the email builder (`color`, `font-size`, `font-weight`, `level`, `line-height`, `align`)","editable-group":"link the editable fields with other components so they all update together in the email builder","font-family":"css font family","font-size":"text size","font-style":"css font style (`normal`, `italic`, `oblique`)","font-weight":"text thickness","height":"the height of the element","hidden":"only used in AMP emails. the element will not be displayed","letter-spacing":"letter spacing","level":"sets the underlying HTML tag for semantic markup (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`)","line-height":"space between the lines","localizable":"content can be localized in the block editor","max-chars":"define a character limit for the title content in the email builder","on":"only used in AMP emails. used to install event handlers","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","prevent-loner-words":"prevents loner words (single words appearing alone on the last line)","show":"enable the ability to optionally show/hide the element in the email builder","text-decoration":"css text decoration (`underline`, `overline`, `line-through`, `none`)","text-transform":"css text transform (`uppercase`, `lowercase`, `capitalize`)","variant":"predefined style modifier from theme"},"children":[],"info":"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 bl...","selfClosing":false},"dys-wrapper":{"attrs":{"background-color":null,"background-position":null,"background-position-x":null,"background-position-y":null,"background-repeat":null,"background-size":null,"background-url":null,"border":null,"border-bottom":null,"border-left":null,"border-right":null,"border-top":null,"css-class":null,"editable":null,"editable-styles":null,"full-width":null,"padding":null,"padding-bottom":null,"padding-left":null,"padding-right":null,"padding-top":null,"text-align":null},"attrsDesc":{"background-color":"section color","background-position":"css background position","background-position-x":"css background position x","background-position-y":"css background position y","background-repeat":"css background repeat","background-size":"css background size","background-url":"background url","border":"css border format","border-bottom":"css border format","border-left":"css border format","border-right":"css border format","border-top":"css border format","css-class":"class name, added to the root HTML element created","editable":"makes the wrapper editable in the email builder. required for `editable-styles`","editable-styles":"ability to edit css styling in the email builder (`background-color`, `padding`, `border`, `border-width`, `border-style`, `border-color`)","full-width":"make the wrapper full-width","padding":"supports up to 4 parameters","padding-bottom":"bottom offset","padding-left":"left offset","padding-right":"right offset","padding-top":"top offset","text-align":"css text-align"},"children":[],"info":"dys-wrapper allows you to wrap multiple rows together. This is really useful when you want nested layouts to share the same border....","selfClosing":false},"!top":["dys-block"],"dys-export":{"attrs":{"targets":null},"attrsDesc":{"targets":"accepts one or more valid [export languages](#export-languages) separated by commas"},"children":["dys-button","dys-carousel","dys-export","dys-for","dys-form","dys-if","dys-if-else","dys-img","dys-list","dys-table","dys-text","dys-title","dys-comment","dys-social","dys-divider","dys-spacer","dys-pill","dys-wrapper","dys-repeat"],"info":"Allows exporting content only for the specified target language....","selfClosing":false},"dys-for":{"attrs":{"each":null,"range":null},"attrsDesc":{"each":"iterate over an array","range":"iterate over a given range"},"children":[],"info":"Loop over each item in a sequence with the dys-for tag....","selfClosing":false},"dys-if":{"attrs":{"cond":null},"attrsDesc":{"cond":"condition to evaluate"},"children":[],"info":"Include content only if a condition evaluates to true....","selfClosing":false},"dys-if-else":{"attrs":{},"attrsDesc":{},"children":["dys-if","dys-elif","dys-else"],"info":"dys-if-else allows for extending dys-if with additional conditionial branches using dys-elif and dys-else....","selfClosing":false},"dys-else":{"attrs":{},"attrsDesc":{},"children":[],"info":"dys-else allows you to display alternative content when a dys-if condition evaluates to false....","selfClosing":false},"dys-elif":{"attrs":{"cond":null},"attrsDesc":{"cond":"condition to evaluate"},"children":[],"info":"dys-elif allows you to extend dys-if with multiple conditions....","selfClosing":false},"dys-inputs":{"attrs":{},"attrsDesc":{},"children":["dys-array","dys-bool","dys-number","dys-object","dys-string","dys-comment"],"info":"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 placeh...","selfClosing":false},"dys-string":{"attrs":{"key":null,"placeholder":null},"attrsDesc":{"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."},"children":[],"info":"Used for text...","selfClosing":true},"dys-bool":{"attrs":{"key":null,"placeholder":null},"attrsDesc":{"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."},"children":[],"info":"Used for booleans...","selfClosing":true},"dys-number":{"attrs":{"key":null,"placeholder":null},"attrsDesc":{"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."},"children":[],"info":"Used for numbers...","selfClosing":true},"dys-array":{"attrs":{"key":null,"placeholder":null},"attrsDesc":{"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."},"children":[],"info":"Used for arrays and lists of items...","selfClosing":true},"dys-object":{"attrs":{"key":null,"placeholder":null},"attrsDesc":{"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."},"children":[],"info":"Used for objects which can contain any of the supported input types...","selfClosing":false},"dys-raw":{"attrs":{},"attrsDesc":{},"children":[],"info":"The dys-raw tag allows you to pass content directly to the template. It will not be modified or parsed by Dyspatch....","selfClosing":false},"dys-repeat":{"attrs":{"editable":null},"attrsDesc":{"editable":"id to enable and track the repeated content in the email builder"},"children":[],"info":"Allow DML components to be repeated as needed using the dys-repeat tag....","selfClosing":false},"dys-templates":{"attrs":{},"attrsDesc":{},"children":["dys-template"],"info":"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. ...","selfClosing":false}} ```