dojo-templater
Version:
Easy HTML emails with variables
95 lines (91 loc) • 11.9 kB
text/jade
!!! transitional
html(xmlns='http://www.w3.org/1999/xhtml', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
head(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
// If you delete this tag, the sky will fall on your head
meta(name='viewport', content='width=device-width', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
meta(http-equiv='Content-Type', content='text/html; charset=UTF-8', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
title(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;') ClassDojo Email Template
body(bgcolor='#faf9f9', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; height: 100%; width: 100%;')
// HEADER
table.head-wrap(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;')
tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
td.header.container(style='margin: 0 auto; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; display: block; max-width: 600px; clear: both;')
.content(style='margin: 0 auto; padding: 15px; font-family: "Helvetica Neue", arial, sans-serif; max-width: 520px; display: block;')
table(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;')
tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
td(align='center', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
img(src='http://c.classdojo.com/img/email/trigger-email-logo.png', width='300', alt='ClassDojo', style='margin: 0 auto; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; max-width: 100%; display: block;')
// End HEADER
// BODY
table.body-wrap(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;')
tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
td(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
td.container(bgcolor='#faf9f9', style='margin: 0 auto; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; display: block; max-width: 520px; clear: both;')
.content.paper(style='margin: 0 auto; padding: 40px; font-family: "Helvetica Neue", arial, sans-serif; max-width: 520px; display: block; background-color: #ffffff; -webkit-box-shadow: 0px 0px 5px 2px #e0e0e0; box-shadow: 0px 0px 5px 2px #e0e0e0;')
table.body-wrap.clear(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; display: block; clear: both; width: 100%;')
tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
td(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
h2(style='margin: 0; padding: 0; font-family: Georgia, "Lucida Grande", serif; font-weight: 200; text-align: center; line-height: 1.1; margin-bottom: 15px; color: #222; font-size: 37px;') Welcome, Elijah Baily
p.lead(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 17px; line-height: 1.6;')
| You're one small step away from being able to use ClassDojo to build positive behavior and save hours of instructional time this year!
p.lead(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 17px; line-height: 1.6;')
a(href='', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; color: #00b4ff; font-weight: bold; text-decoration: underline;') Add your students
| today and be ready for next week!
// Left buffer, ensures button centering in nice clients
.buffer(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; width: 110px; height: 1px; display: table-cell; float: left;')
.buffer-container(style='margin: 30px 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; width: 300px; display: table-cell; float: left;')
table.body-wrap(border='0', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;')
tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
// Left button cap
td.btn-left(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; background-repeat: no-repeat; width: 5px; height: 64px; background-image: url(http://c.classdojo.com/img/email/btn-bg-left.gif);')
// Fluid, stretching center button section
td.btn-center(width='260px', bgcolor='#FEA302', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; font-size: 28px; font-weight: bold; text-shadow: 0px -1px 2px #999999; color: white; vertical-align: middle; text-align: center; height: 64px; width: 260px; background-color: #FEA302; background-image: url(http://c.classdojo.com/img/email/btn-bg-mid.gif); background-repeat: repeat-x; border: 0;')
a.call-to-action(href='/', style='margin: 0; padding: 15px 0; font-family: "Helvetica Neue", arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none; display: block; width: 100%; height: 34px;') Add your students
// Right button cap
td.btn-right(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; background-repeat: no-repeat; width: 5px; height: 64px; background-image: url(http://c.classdojo.com/img/email/btn-bg-right.gif);')
// Right buffer, ensures button centering in nice clients
.buffer(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; width: 110px; height: 1px; display: table-cell; float: left;')
br.clear(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; display: block; clear: both;')
table.body-wrap.clear(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; display: block; clear: both; width: 100%;')
tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
td(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
// <h3>Title Ipsum <small>This is a note.</small></h3>
p(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;')
| Want us to upload your students for you? Just reply to this email with your class list and we'll get you all set up :)
p(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;')
img(src='http://c.classdojo.com/img/email/upload.png', width='100%', style='margin: 0 auto; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; max-width: 100%; display: block;')
p(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;')
| Again, welcome! And please let us know if there's ever anything we can do for you.
p(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 16px; line-height: 1.6;')
| Cheers,
br(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
| The ClassDojo team
tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
td(align='center', style='color: #db1259; margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;', colspan='3')
| ♥
td(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
// End BODY
// FOOTER
table.footer-wrap(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%; clear: both;')
tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
td.container(colspan='3', style='margin: 0 auto; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; display: block; max-width: 600px; clear: both;')
// content
.content(style='margin: 0 auto; padding: 15px; font-family: "Helvetica Neue", arial, sans-serif; max-width: 520px; display: block;')
table(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; border-collapse: separate; border-spacing: 0; width: 100%;')
tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
td(align='center', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
p.footer(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; margin-bottom: 10px; font-weight: normal; font-size: 14px; line-height: 1.6; text-decoration: none; margin-top: 30px;')
a(href='#', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;') About ClassDojo
span.dot(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; text-align: center; color: #ccc;') •
a(href='#', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;') Our Mission
span.dot(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; text-align: center; color: #ccc;') •
a(href='#', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;') Support
span.dot(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; text-align: center; color: #ccc;') •
a(href='#', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; color: #999; font-weight: normal; text-decoration: underline;') Unsubscribe
tr(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
td.signout(align='center', style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif; text-align: center; font-size: 12px; color: #777;')
| Sent with love from ClassDojo HQ at:
br(style='margin: 0; padding: 0; font-family: "Helvetica Neue", arial, sans-serif;')
| 322 Sixth Street • Suite 6 • San Francisco, CA 94103
// End content
// End FOOTER