Skip to content

Instantly share code, notes, and snippets.

@drwpow
Created July 26, 2016 13:12
Show Gist options
  • Save drwpow/c4e66cd4c34eeb20681c20be970ac2b3 to your computer and use it in GitHub Desktop.
Save drwpow/c4e66cd4c34eeb20681c20be970ac2b3 to your computer and use it in GitHub Desktop.
$ in MJML template
<!--
#f0f0f0 / Light gray (margin color)
#d9d9d9 / Medium gray
#455660 / Dark gray (elements)
#88cc00 / Bright green (highlight color)
#333333 / Charcoal (text color)
#41bdeb / Turquoise (link color)
#ffffff / White (background color)
-->
<mjml>
<mj-head>
<!-- Title -->
<mj-title>
Auto-Renew for tyler_leaddyno (Tech Rocket)
</mj-title>
<!-- Custom Font -->
<mj-font name="Lato" href="https://fonts.googleapis.com/css?family=Lato"/>
<mj-attributes>
<!-- Styles -->
<mj-class name="body-cta" color="white" background-color="#41bdeb" inner-padding="10 15"/>
<mj-class name="body-img" padding="0" />
<mj-class name="body-title" color="#999999" font-size="22" line-height="22" font-weight="bold" padding="15 0"/>
<mj-class name="header-contact" color="#ffffff" font-size="14" line-height="20" padding="30 20 0" />
<mj-class name="header-title" color="#ffffff" font-size="19" font-weight="bold" line-height="18" padding="0" />
<mj-class name="footer" color="#999999" font-size="14" line-height="25" padding="10 20 50 10"/>
<mj-class name="footer-divider" border-width="1px" border-style="solid" border-color="#efefef" padding="15 30"/>
<mj-all color="#333333" font-family="Lato, Arial, sans-serif" font-size="15"/>
</mj-attributes>
</mj-head>
<mj-body background-color="#f0f0f0">
<mj-container background-color="#f0f0f0">
<!-- Branding -->
<mj-section background-color="#455660">
<mj-column padding="20">
<mj-image src="../images/techrocket.png" align="left" alt="Tech Rocket" width="240"/>
</mj-column>
<mj-column padding="20" vertical-align="middle">
<mj-text mj-class="header-contact" align="right">
1-844-662-RCKT (7258)
<br/>
<a href="mailto:[email protected]" style="color:#88cc00;">[email protected]</a>
</mj-text>
</mj-column>
</mj-section>
<!-- Body -->
<mj-section background-color="#ffffff">
<mj-column>
<mj-text align="center" mj-class="body-title">
Auto-Renew Payment Confirmation from Tech Rocket
</mj-text>
<mj-text mj-class="body-text">
<p>Dear Tech Rocketeer,</p>
<p>In order to renew your monthly membership for <b>tyler_leaddyno</b> through 04/02/2015, we charged <b>&#36;29.00</b> to your credit card ending in 0005.</p>
<p>If you have questions or concerns, please DO NOT reply to this message. Instead, please contact us at <a href="mailto:[email protected]" style="color:#88cc00">[email protected]</a> or call us at 1-844-662-RCKT (7258).</p>
<p>Thank you,</p>
<p><b>Tech Rocket</b><br/>
Online Learning</p>
</mj-text>
<mj-button href="https://techrocket.com/account/billing" mj-class="body-cta">
Manage billing settings
</mj-button>
</mj-column>
</mj-section>
<!-- Footer -->
<mj-section background-color="#ffffff" padding="0">
<mj-column>
<mj-divider mj-class="footer-divider"/>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff">
<mj-column width="33.3333%">
<mj-section>
<mj-column>
<mj-image padding="0" href="https://www.youtube.com/user/techrocketlearning" src="../images/youtube.png" title="Tech Rocket on YouTube" width="32" height="32">
</mj-column>
<mj-column>
<mj-image padding="0" href="https://www.facebook.com/techrocketlearning" src="../images/facebook.png" title="Tech Rocket on Facebook" width="32" height="32">
</mj-column>
<mj-column>
<mj-image padding="0" href="https://twitter.com/TechRocket" src="../images/twitter.png" title="Tech Rocket on Twitter" width="32" height="32">
</mj-column>
<mj-section>
</mj-column>
<mj-column width="66.6666%">
<mj-text align="right" mj-class="footer">
910&nbsp;E.&nbsp;Hamilton&nbsp;Ave, Ste.&nbsp;300, Campbell,&nbsp;CA&nbsp;95008<br/>
Toll&nbsp;Free: 1-844-662-RCKT&nbsp;(7258)<br/>
<a href="mailto:[email protected]" style="color:#41bdeb">[email protected]</a>&nbsp;|&nbsp;<a href="https://techrocket.com" style="color:#41bdeb">TechRocket.com</a>
</mj-text>
</mj-column>
</mj-section>
<mj-container>
</mj-body>
</mjml>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment