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
