Menu
Syntax
Documentation

Tags

html

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>

head

The re-head tag contains head components such as style, title and font elements.

<re-head>
    <re-title>...</re-title>
</re-head>

title

The re-title contains a title of the email.

<re-head>
    <re-title>My Email</re-title>
</re-head>

font

Possible attributes:

  • href
<re-font href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i"></re-font>

style

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>

body

Possible attributes:

  • background-color
  • background-image
  • background-size
  • padding
<re-html>
    <re-head>
        <re-title>My Email</re-title>
    </re-head>
    <re-body background-color="#f4f4f4">
        ...
    </re-body>
</re-html>

preheader

<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>

container

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:

  • width (600px by default)
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius
<re-container width="100%" background-color="#000">
    <re-header>...</re-header>
</re-container>

main

A way to organize the blocks into a single group.

Possible attributes:

  • width (600px by default)
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius
<re-main width="100%">...</re-main>

header

Possible attributes:

  • width (600px by default)
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius
<re-header background-color="#fff">...</re-header>

footer

Possible attributes:

  • width (600px by default)
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius
<re-footer background-color="#fff">...</re-footer>

block

A way to organize elements into a single group.

Possible attributes:

  • align
  • valign
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius
  • class
<re-block padding="0 0 20px 0">...</re-block>

spacer

Possible attributes:

  • height
<re-spacer height="2px"></re-spacer>

divider

Possible attributes:

  • width (100% by default)
  • height
  • background-color
<re-divider background-color="#000000" height="2px"></re-divider>

grid

<re-grid>
    <re-column width="300px">...</re-column>
    <re-column width="300px">...</re-column>
</re-grid>

column

Possible attributes:

  • align
  • valign
  • width
  • padding
  • background-color
  • background-image
  • background-size
  • border
  • border-radius — td
  • class — td
<re-column width="300px">...</re-column>

column-spacer

Possible attributes:

  • width
<re-column width="300px"></re-column>
<re-column-spacer width="20px"></re-column-spacer>
<re-column width="300px"></re-column>

text

Possible attributes:

  • align
  • margin
  • color
  • class
  • font-size
  • font-weight
  • font-style
  • line-height
  • text-decoration
<re-text>...</re-text>

heading

Possible attributes:

  • align
  • level (h1, h2, h3 etc)
  • href
  • margin
  • color
  • class
  • font-weight
  • font-style
  • text-decoration
<re-heading level="h2">...</re-heading>

Heading with link:

<re-heading href="http://example.com">...</re-heading>

link

Possible attributes:

  • align
  • margin
  • href
  • color
  • class
  • font-size
  • font-weight
  • font-style
  • line-height
  • text-decoration
<re-link href="https://example.com">Check it out</re-link>

button

Possible attributes:

  • class
  • font-size
  • font-style
  • font-weight
  • background-color
  • color
  • border
  • border-radius
  • margin
  • href
<re-block padding="0 0 20px 0">
    <re-button href="http://example.com/">Try Now</re-button>
</re-block>

image

Possible attributes:

  • width (100% by default)
  • margin
  • class
  • src
  • alt
  • href
  • border-radius
  • border
<re-image src="images/myimage.jpg"></re-image>

Image with link:

<re-image href="http://example.com/" src="images/myimage.jpg"></re-image>

menu

Possible attributes:

  • align
  • color
  • margin
  • class
<re-menu>
    <re-menu-item href="http://example.com">Item 1</re-menu-item>
    <re-menu-spacer>&nbsp;</re-menu-spacer>
    <re-menu-item href="http://example.com">Item 2</re-menu-item>
</re-menu>

menu-item

Possible attributes:

  • href
  • color
  • class
  • font-size
  • font-weight
  • text-decoration
<re-menu-item href="http://example.com">Item 1</re-menu-item>

menu-spacer

Possible attributes:

  • color
  • font-size
  • font-weight
  • text-decoration
  • class
<re-menu-spacer>&nbsp;</re-menu-spacer>
<re-menu-spacer>&nbsp;|&nbsp;</re-menu-spacer>

social

Possible attributes:

  • align
  • margin
  • class
<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>

social-item

Possible attributes:

  • href
  • width
  • alt
  • src
  • class
<re-social-item src="twitter.jpg" alt="Twitter"></re-social-item>

social-spacer

Possible attributes:

  • color
  • font-size
  • font-weight
  • class
<re-social-spacer>&nbsp;</re-social-spacer>
<re-social-spacer>&nbsp;|&nbsp;</re-social-spacer>

list

Possible attributes:

  • type (unordered, ordered)
  • font-size
  • font-weight
  • line-height
  • color
  • class
<re-list>
    <re-list-item>Item 1</re-list-item>
    <re-list-item>Item 2</re-list-item>
</re-list>

list-item

Possible attributes:

  • class
<re-list-item>Item 1</re-list-item>

table

Possible attributes:

  • padding
  • border
  • bckground-color
  • class
<re-table></re-table>

table-body

Used if the table has a Table Head.

<re-table>
    <re-table-head>...</re-table-head>
    <re-table-body>...</re-table-body>
</re-table>

table-head

Used if the table has a Table Body.

<re-table>
    <re-table-head>...</re-table-head>
    <re-table-body>...</re-table-body>
</re-table>

table-row

Possible attributes:

  • style
<re-table-row>
    <re-table-cell>...</re-table-cell>
    <re-table-cell>...</re-table-cell>
</re-table-row>

table-cell

Possible attributes:

  • width
  • align
  • rowspan
  • colspan
  • padding
  • border
  • color
  • font-size
  • background-color
  • class
  • style
<re-table-cell>...</re-table-cell>