Elements

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

re-head

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

<re-html>
    <re-head>
        <re-title>Message</re-title>
        <re-font href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i"></re-font>
        <re-style>
        .myclass {
            width: 100%;
        }
        </re-style>
    </re-head>
    <re-body></re-body>
</re-html>

re-title

The re-title contains a title of the email.

<re-title>Message</re-title>

re-font

Possible attributes:

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

re-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) {
    .mobile-card {
        padding: 40px 20px !important;
    }
}
</re-style>

re-body

Possible attributes:

  • background-color
  • background-image
  • background-size
<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body>
        ...
    </re-body>
</re-html>

re-main

Possible attributes:

  • padding
  • class

The main content wrapper.

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body>
        <re-main>
            <re-container></re-container>
            <re-container></re-container>
            <re-container></re-container>
        </re-main>
    </re-body>
</re-html>

re-container

Possible attributes:

  • width (600px by default)
  • background-color
  • background-image
  • background-size
  • padding
  • class
  • border
  • border-radius

The wrapper for headers, footers, and cards.

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body>
        <re-main>
            <re-container>
                <re-header>
                    ...
                </re-header>
            </re-container>
            <re-container>
                <re-card>
                    ...
                </re-card>
            </re-container>
            <re-container>
                <re-footer>
                    ...
                </re-footer>
            </re-container>
        </re-main>
    </re-body>
</re-html>

re-header

Possible attributes:

  • width (100% by default)
  • padding
  • align
  • background-color
  • background-image
  • background-size
  • class
  • border
  • border-radius

The header of email.

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body>
        <re-main>
            <re-container>
                <re-header background-color="#ffffff">
                    ...
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

re-footer

Possible attributes:

  • width (100% by default)
  • padding
  • align
  • background-color
  • background-image
  • background-size
  • class
  • border
  • border-radius

The footer of email.

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body>
        <re-main>
            <re-container>
                <re-header background-color="#ffffff">
                    ...
                </re-header>
            </re-container>
            <re-container>
                ...
            </re-container>
            <re-container>
                <re-footer background-color="#ffffff">
                    ...
                </re-footer>
            </re-container>
        </re-main>
    </re-body>
</re-html>

re-card

Possible attributes:

  • width (100% by default)
  • padding
  • background-color
  • background-image
  • background-size
  • class
  • border
  • border-radius

The main element of template content.

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body>
        <re-main>
            <re-container>
                <re-card background-color="#ffffff" padding="40px 20px">
                    ...
                </re-card>
            </re-container>
        </re-main>
    </re-body>
</re-html>

re-block

Possible attributes:

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

re-spacer

Possible attributes:

  • width (100% by default)
  • height
<re-spacer height="2px"></re-spacer>

re-divider

Possible attributes:

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

re-grid

Markup the grid in the template.

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

re-row

Markup the grid row in the template.

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

re-column

Possible attributes:

  • align
  • valign
  • width
  • padding
  • background-color
  • class

Markup the column in the template grid.

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

re-column-spacer

Possible attributes:

  • width

Markup the space between columns.

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

re-text

Possible attributes:

  • align
  • padding
  • color
  • class
  • font-size
  • font-weight
  • line-height
<re-block padding="0 0 20px 0">
    <re-text>...</re-text>
</re-block>

re-heading

Possible attributes:

  • align
  • padding
  • class
  • href
  • text-decoration (none by default)
  • color
  • font-size
  • font-weight
  • line-height
  • type (h1, h2, h3)
<re-block padding="0 0 20px 0">
    <re-heading type="h2">...</re-heading>
</re-block>

Heading with link:

<re-block padding="0 0 20px 0">
    <re-heading href="http://example.com">...</re-heading>
</re-block>

re-button

Possible attributes:

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

re-button-link

Possible attributes:

  • padding
  • href
  • color
  • text-decoration
  • font-size
  • font-weight
  • line-height
  • class
<re-block padding="0 0 20px 0">
    <re-button-link href="http://example.com/">Try Now</re-button-link>
</re-block>

re-button-app

Possible attributes:

  • width
  • src
  • href
<re-block align="center" padding="32px 0">
    <re-button-app width="130px" src="images/badge-app-store.png" href="http://example.com/">App Store</re-button-app>
    <re-inline-spacer padding="0 4px"></re-inline-spacer>
    <re-button-app width="130px" src="images/badge-google-play.png" href="http://example.com/">Google Play</re-button-app>
</re-block>

re-image

Possible attributes:

  • width (100% by default)
  • align
  • padding
  • class
  • src
  • href
  • border-radius
<re-image src="images/myimage.jpg"></re-image>
<re-image href="http://example.com/" src="images/myimage.jpg"></re-image>

re-link

Possible attributes:

  • href
  • color
  • text-decoration
  • font-size
  • font-weight
  • line-height
  • class
<re-link href="http://example.com">My Link</re-link>

re-social-link

Possible attributes:

  • width (20px by default)
  • href
  • src
<re-block>
    <re-social-link src="images/facebook.png" href="http://facebook.com/">Facebook</re-social-link>
    <re-inline-spacer padding="0 2px"></re-inline-spacer>
    <re-social-link src="images/twitter.png" href="http://twitter.com/">Twitter</re-social-link>
</re-block>

re-menu-link

Possible attributes:

  • href
  • color
  • font-size
  • font-weight
  • text-decoration
  • class
<re-block padding="20px 24px" align="center">
    <re-menu-link href="http://example.com/">Summer</re-menu-link>
    <re-inline-spacer padding="0 6px"></re-inline-spacer>
    <re-menu-link href="http://example.com/">Autumn</re-menu-link>
    <re-inline-spacer padding="0 6px"></re-inline-spacer>
    <re-menu-link href="http://example.com/">Winter</re-menu-link>
    <re-inline-spacer padding="0 6px"></re-inline-spacer>
    <re-menu-link href="http://example.com/">Spring</re-menu-link>
</re-block>

re-inline-spacer

Possible attributes:

  • padding
  • color
  • font-size
  • font-weight
  • class
<re-inline-spacer padding="0 2px"></re-inline-spacer>

re-preheader

<re-body background-color="#f6f6f6">
    <re-preheader>
        This is preheader and it will show as a preview in some mail clients.
    </re-preheader>
    ...
</re-body>