Headers

#01

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#ffffff">
                    <re-block padding="20px 24px" align="center">
                        <re-image align="center" href="http://example.com/" src="images/logo.png" width="83"></re-image>
                    </re-block>
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#02

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#ffffff">
                    <re-block padding="20px 24px">
                        <re-grid>
                            <re-row>
                                <re-column width="300px" align="left" class="mobile-center" valign="middle">
                                    <re-image href="http://example.com/" src="images/logo.png" width="83"></re-image>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="300px" align="right" class="mobile-center" valign="middle">
                                    <re-mobile-spacer padding="5px 0"></re-mobile-spacer>
                                    <re-social-link src="images/facebook.png" href="http://facebook.com/">Facebook</re-social-link>
                                    <re-inline-spacer padding="0 3px"></re-inline-spacer>
                                    <re-social-link src="images/twitter.png" href="http://twitter.com/">Twitter</re-social-link>
                                </re-column>
                            </re-row>
                        </re-grid>
                    </re-block>
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#03

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#ffffff">
                    <re-block padding="20px 24px">
                        <re-grid>
                            <re-row>
                                <re-column width="300px" align="left" class="mobile-center" valign="middle">
                                    <re-image href="http://example.com/" src="images/logo.png" width="83"></re-image>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="300px" align="right" class="mobile-center" valign="middle">
                                    <re-mobile-spacer padding="5px 0"></re-mobile-spacer>
                                    <re-menu-link href="http://example.com/">Sale</re-menu-link>
                                    <re-inline-spacer padding="0 8px"></re-inline-spacer>
                                    <re-menu-link href="http://example.com/">Store</re-menu-link>
                                </re-column>
                            </re-row>
                        </re-grid>
                    </re-block>
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#04

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#ffffff">
                    <re-block padding="20px 24px">
                        <re-grid>
                            <re-row>
                                <re-column width="200px" align="left" valign="middle"></re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="200px" align="center" valign="middle">
                                    <re-image align="center" href="http://example.com/" src="images/logo.png" width="83"></re-image>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="200px" align="right" class="mobile-center" valign="middle">
                                    <re-mobile-spacer padding="5px 0"></re-mobile-spacer>
                                    <re-social-link src="images/facebook.png" href="http://facebook.com/">Facebook</re-social-link>
                                    <re-inline-spacer padding="0 3px"></re-inline-spacer>
                                    <re-social-link src="images/twitter.png" href="http://twitter.com/">Twitter</re-social-link>
                                </re-column>
                            </re-row>
                        </re-grid>
                    </re-block>
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#05

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#ffffff">
                    <re-block padding="20px 24px">
                        <re-grid>
                            <re-row>
                                <re-column width="200px" align="left" class="mobile-center" valign="middle">
                                    <re-menu-link href="http://example.com/">Sale</re-menu-link>
                                    <re-inline-spacer padding="0 8px"></re-inline-spacer>
                                    <re-menu-link href="http://example.com/">Store</re-menu-link>
                                    <re-mobile-spacer padding="5px 0"></re-mobile-spacer>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="200px" align="center" valign="middle">
                                    <re-image align="center" href="http://example.com/" src="images/logo.png" width="83"></re-image>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="200px" align="right" class="mobile-center" valign="middle">
                                    <re-mobile-spacer padding="8px 0"></re-mobile-spacer>
                                    <re-social-link src="images/facebook.png" href="http://facebook.com/">Facebook</re-social-link>
                                    <re-inline-spacer padding="0 3px"></re-inline-spacer>
                                    <re-social-link src="images/twitter.png" href="http://twitter.com/">Twitter</re-social-link>
                                </re-column>
                            </re-row>
                        </re-grid>
                    </re-block>
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#06

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#ffffff">
                    <re-block padding="20px 24px">
                        <re-grid>
                            <re-row>
                                <re-column width="300px" align="left" class="mobile-center" valign="middle">
                                    <re-image href="http://example.com/" src="images/logo.png" width="83"></re-image>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="300px" align="right" class="mobile-center" valign="middle">
                                    <re-mobile-spacer padding="8px 0"></re-mobile-spacer>
                                    <re-link href="http://example.com" color="#000000" font-weight="bold" font-size="12px">Visit Website</re-link>
                                </re-column>
                            </re-row>
                        </re-grid>
                    </re-block>
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#07

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#ffffff">
                    <re-block padding="20px 24px">
                        <re-grid>
                            <re-row>
                                <re-column width="300px" align="left" class="mobile-center" valign="middle">
                                    <re-image href="http://example.com/" src="images/logo.png" width="83"></re-image>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="300px" align="right" class="mobile-center" valign="middle">
                                    <re-mobile-spacer padding="8px 0"></re-mobile-spacer>
                                    <re-link href="http://example.com" color="#000000" font-weight="bold" font-size="12px">Visit Website</re-link>
                                    <re-mobile-spacer padding="8px 0"></re-mobile-spacer>
                                    <re-inline-spacer padding="0 8px" class="mobile-hidden"></re-inline-spacer>
                                    <re-social-link src="images/facebook.png" href="http://facebook.com/">Facebook</re-social-link>
                                    <re-inline-spacer padding="0 3px"></re-inline-spacer>
                                    <re-social-link src="images/twitter.png" href="http://twitter.com/">Twitter</re-social-link>
                                </re-column>
                            </re-row>
                        </re-grid>
                    </re-block>
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#08

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#ffffff">
                    <re-block padding="20px 24px">
                        <re-grid>
                            <re-row>
                                <re-column width="300px" align="left" class="mobile-center" valign="middle">
                                    <re-image href="http://example.com/" src="images/logo.png" width="83"></re-image>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="300px" align="right" class="mobile-center" valign="middle">
                                    <re-mobile-spacer padding="5px 0"></re-mobile-spacer>
                                    <re-text align="right" class="mobile-center" font-size="12px" color="#666666">Sunday, August 26, 2018</re-text>
                                </re-column>
                            </re-row>
                        </re-grid>
                    </re-block>
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#09

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#ffffff">
                    <re-block padding="20px 24px">
                        <re-grid>
                            <re-row>
                                <re-column width="200px" align="left" class="mobile-center" valign="middle">
                                    <re-social-link src="images/facebook.png" href="http://facebook.com/">Facebook</re-social-link>
                                    <re-inline-spacer padding="0 3px"></re-inline-spacer>
                                    <re-social-link src="images/twitter.png" href="http://twitter.com/">Twitter</re-social-link>
                                    <re-mobile-spacer padding="8px 0"></re-mobile-spacer>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="200px" align="center" valign="middle">
                                    <re-image align="center" href="http://example.com/" src="images/logo.png" width="83"></re-image>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="200px" align="right" class="mobile-center" valign="middle">
                                    <re-mobile-spacer padding="8px 0"></re-mobile-spacer>
                                    <re-link href="http://example.com" color="#000000" font-weight="bold" font-size="12px">Visit Website</re-link>
                                </re-column>
                            </re-row>
                        </re-grid>
                    </re-block>
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#10

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#ffffff">
                    <re-block padding="20px 24px">
                        <re-grid>
                            <re-row>
                                <re-column width="300px" align="left" class="mobile-center" valign="middle">
                                    <re-image href="http://example.com/" src="images/logo.png" width="83"></re-image>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="300px" align="right" class="mobile-center" valign="middle">
                                    <re-mobile-spacer padding="8px 0"></re-mobile-spacer>
                                    <re-social-link src="images/facebook.png" href="http://facebook.com/">Facebook</re-social-link>
                                    <re-inline-spacer padding="0 3px"></re-inline-spacer>
                                    <re-social-link src="images/twitter.png" href="http://twitter.com/">Twitter</re-social-link>
                                </re-column>
                            </re-row>
                        </re-grid>
                    </re-block>
                    <re-divider background-color="#eeeeee" height="1px"></re-divider>
                    <re-block padding="20px 24px" class="mobile-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-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#11

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#ffffff">
                    <re-block padding="20px 24px" align="center">
                        <re-image align="center" href="http://example.com/" src="images/logo.png" width="83"></re-image>
                    </re-block>
                    <re-divider background-color="#eeeeee" height="1px"></re-divider>
                    <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-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#08 dark

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#111111">
                    <re-block padding="20px 24px">
                        <re-grid>
                            <re-row>
                                <re-column width="300px" align="left" class="mobile-center" valign="middle">
                                    <re-image href="http://example.com/" src="images/logo-white.png" width="83"></re-image>
                                </re-column>
                                <re-column-spacer width="10px"></re-column-spacer>
                                <re-column width="300px" align="right" class="mobile-center" valign="middle">
                                    <re-mobile-spacer padding="5px 0"></re-mobile-spacer>
                                    <re-text align="right" class="mobile-center" font-size="12px" color="#eeeeee">Sunday, August 26, 2018</re-text>
                                </re-column>
                            </re-row>
                        </re-grid>
                    </re-block>
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>

#11 dark

<re-html>
    <re-head>
        <re-title>Message</re-title>
    </re-head>
    <re-body background-color="#f6f6f6">
        <re-main padding="8px">
            <re-container>
                <re-header background-color="#111111">
                    <re-block padding="20px 24px" align="center">
                        <re-image align="center" href="http://example.com/" src="images/logo-white.png" width="83"></re-image>
                    </re-block>
                    <re-divider background-color="#333333" height="1px"></re-divider>
                    <re-block padding="20px 24px" align="center">
                        <re-menu-link color="#eeeeee" href="http://example.com/">Summer</re-menu-link>
                        <re-inline-spacer padding="0 6px"></re-inline-spacer>
                        <re-menu-link color="#eeeeee" href="http://example.com/">Autumn</re-menu-link>
                        <re-inline-spacer padding="0 6px"></re-inline-spacer>
                        <re-menu-link color="#eeeeee" href="http://example.com/">Winter</re-menu-link>
                        <re-inline-spacer padding="0 6px"></re-inline-spacer>
                        <re-menu-link color="#eeeeee" href="http://example.com/">Spring</re-menu-link>
                    </re-block>
                </re-header>
            </re-container>
        </re-main>
    </re-body>
</re-html>