Separator block

The separator is presented as a horizontal rule, equivalent to the HTML <hr> tag. However, since the HTML <hr> is difficult to consistently style across different browsers and email clients, we do not actually output a <hr> tag in the responsive email, but a HTML <div> appropriately styled in order to look like an <hr> tag.

Seperator block properties

Property Value Desc.
type "separator" Identifies the block as a separator
color string The color of the seperator. Default #cccccc
style string The style of the seperator.
height integer The height of the seperator in pixels. Defaults to 4.
css object Add custom css to the generated HTML element
attributes object Add custom HTML attributes to HTML element
visibility object Visibility based on device, client and/or receiver.
container object Get access to the table cell that houses this block
margin mixed Whitespace around the block
padding mixed Whitespace around the block, this whitespace will have a background
background object The background of the block.

Example

The following JSON can be used to generate an email with two paragraphs, separated by a dotted, red, 10 pixels high separator.

{
    "from" : "info@example.com",
    "subject" : "Email with a red, dotted separator",
    "content" : {
        "blocks" : [ {
            "type" : "text",
            "content" : "First paragraph"
        }, {
            "type" : "separator",
            "color" : "red",
            "style" : "dotted",
            "height" : 10
        }, {
            "type" : "text",
            "content" : "Second paragraph"
        } ]
    }
}

Found a typo?

You can find this documentation page on GitHub.
Propose a change