A template starts with a re-html
tag, it can contain only re-head
and re-body
tags.
<re-html>
<re-head>...</re-head>
<re-body>...</re-body>
</re-html>
The re-head
tag contains head components such as style, title and font elements.
<re-head>
<re-title>...</re-title>
</re-head>
The re-title
contains a title of the email.
<re-head>
<re-title>My Email</re-title>
</re-head>
Possible attributes:
<re-font href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i"></re-font>
Contains the css styles of the email.
<re-style>
.myclass {
width: 100%;
}
</re-style>
Responsive styles:
<re-style>
@media all and (max-width:639px) {
.block-on-mobile {
padding: 40px 20px !important;
}
}
</re-style>
Possible attributes:
<re-html>
<re-head>
<re-title>My Email</re-title>
</re-head>
<re-body background-color="#f4f4f4">
...
</re-body>
</re-html>
<re-body background-color="#f4f4f4">
<re-preheader>
This is preheader and it will show as a preview in some mail clients.
</re-preheader>
...
</re-body>
Sets the width for header, main, footer. For example, to make the header a full width color, and the header itself with 600px width.
Possible attributes:
<re-container width="100%" background-color="#000">
<re-header>...</re-header>
</re-container>
A way to organize the blocks into a single group.
Possible attributes:
<re-main width="100%">...</re-main>
Possible attributes:
<re-header background-color="#fff">...</re-header>
Possible attributes:
<re-footer background-color="#fff">...</re-footer>
A way to organize elements into a single group.
Possible attributes:
<re-block padding="0 0 20px 0">...</re-block>
Possible attributes:
<re-spacer height="2px"></re-spacer>
Possible attributes:
<re-divider background-color="#000000" height="2px"></re-divider>
<re-grid>
<re-column width="300px">...</re-column>
<re-column width="300px">...</re-column>
</re-grid>
Possible attributes:
<re-column width="300px">...</re-column>
Possible attributes:
<re-column width="300px"></re-column>
<re-column-spacer width="20px"></re-column-spacer>
<re-column width="300px"></re-column>
Possible attributes:
<re-text>...</re-text>
Possible attributes:
<re-heading level="h2">...</re-heading>
Heading with link:
<re-heading href="http://example.com">...</re-heading>
Possible attributes:
<re-link href="https://example.com">Check it out</re-link>
Possible attributes:
<re-block padding="0 0 20px 0">
<re-button href="http://example.com/">Try Now</re-button>
</re-block>
Possible attributes:
<re-image src="images/myimage.jpg"></re-image>
Image with link:
<re-image href="http://example.com/" src="images/myimage.jpg"></re-image>
Possible attributes:
<re-menu>
<re-menu-item href="http://example.com">Item 1</re-menu-item>
<re-menu-spacer> </re-menu-spacer>
<re-menu-item href="http://example.com">Item 2</re-menu-item>
</re-menu>
Possible attributes:
<re-menu-item href="http://example.com">Item 1</re-menu-item>
Possible attributes:
<re-menu-spacer> </re-menu-spacer>
<re-menu-spacer> | </re-menu-spacer>
Possible attributes:
<re-social>
<re-social-item src="facebook.jpg" alt="Facebook"></re-social-item>
<re-social-item src="twitter.jpg" alt="Twitter"></re-social-item>
</re-social>
Possible attributes:
<re-social-item src="twitter.jpg" alt="Twitter"></re-social-item>
Possible attributes:
<re-social-spacer> </re-social-spacer>
<re-social-spacer> | </re-social-spacer>
Possible attributes:
<re-list>
<re-list-item>Item 1</re-list-item>
<re-list-item>Item 2</re-list-item>
</re-list>
Possible attributes:
<re-list-item>Item 1</re-list-item>
Possible attributes:
<re-table></re-table>
Used if the table has a Table Head.
<re-table>
<re-table-head>...</re-table-head>
<re-table-body>...</re-table-body>
</re-table>
Used if the table has a Table Body.
<re-table>
<re-table-head>...</re-table-head>
<re-table-body>...</re-table-body>
</re-table>
Possible attributes:
<re-table-row>
<re-table-cell>...</re-table-cell>
<re-table-cell>...</re-table-cell>
</re-table-row>
Possible attributes:
<re-table-cell>...</re-table-cell>