Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
78 lines (68 sloc) 3.5 KB

HTML blocks

A HTML block is one of the many block types that you can use in a responsive email. It is a very popular one and it is easy to use: it is just a piece of text, with simple HTML formatting.

{
    "from" : "info@example.com",
    "subject" : "Email with only one text block",
    "content" : {
        "blocks" : [ {
            "type" : "html",
            "content" : "Example <b>HTML</b> code"
        } ]
    }
}

The example above demonstrates how to include a HTML block in your email. As you can see, you can use simple markup tags like <p>, <b>, <i>, <a>, etc. We recommend to not really go beyond these tags, because it might cause compatibility issues across different email clients.

Inside the block you can use sub properties. The most obvious ones were already demonstrated in the example, content and type, but there are many more. The following tables lists all supported properties.

HTML block properties

Property Value Description
type "html" Identifies the block as a HTML block.
content string The textual content of the block. This may include HTML.
url string A url to fetch the html content from.
font object Override the template wide default font properties.
background object The background of the text block.
margin mixed Margins around the text.
padding mixed Whitespace around the block, this whitespace will have a background
visibility object Visibility based on device, client and/or receiver.
rewrite object Rewrite rules for urls.
container object Access to the surrounding container

Example

The following JSON input shows a more extensive example how to use all the properties of a HTML block.

{
    "from" : "info@example.com",
    "subject" : "Email with only one HTML block",
    "content" : {
        "blocks" : [ {
            "type" : "html",
            "content" : "Example <b>HTML</b> code",
            "font" : {
                "family" : "verdana,arial,helvetica",
                "size" : "14px",
                "color" : "black"
            },
            "background" : {
                "color" : "#eee"
            },
            "margin" : {
                "top" : 10,
                "bottom" : 20
            },
            "container" : {
                "css" : {
                    "border": "solid 1px red"
                }
            }
        } ]
    }
}
You can’t perform that action at this time.