Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<mjml>
<mj-body background-color="#ccd3e0" font-size="13px">
<mj-section background-color="#fff" padding-bottom="20px" padding-top="20px">
<mj-column width="100%">
<mj-image src="https://www.andersonassociates.net/img/favicons/anderson-logo-large.png" alt="" align="center" border="none" width="100px" padding-left="0px" padding-right="0px" padding-bottom="10px" padding-top="10px"></mj-image>
<mj-text align="center" color="#356cc7" font-size="13px" font-family="Helvetica" padding-left="25px" padding-right="25px" padding-bottom="28px" padding-top="28px">
<span style="font-size: 28px">Anderson & Associates</span><br/>
<span style="font-size: 20px">Invoice [[InvoiceDate]]</span>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#356cc7" padding-bottom="0px" padding-top="0">
<mj-column width="100%">
<mj-text align="center" font-size="13px" color="#ABCDEA" font-family="Ubuntu, Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="18px" padding-top="28px">BillTo
<p style="font-size:16px; color:white">[[CustomerName]]</p>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#356cc7" padding-bottom="5px" padding-top="0">
<mj-column width="100%">
<mj-divider border-color="#ffffff" border-width="2px" border-style="solid" padding-left="20px" padding-right="20px" padding-bottom="0px" padding-top="0"></mj-divider>
<mj-text align="center" color="#FFF" font-size="13px" font-family="Helvetica" padding-left="25px" padding-right="25px" padding-bottom="28px" padding-top="28px"><span style="font-size:20px; font-weight:bold">Thank you very much for your purchase.</span>
<br/>
<span style="font-size:15px">Please find the receipt below.</span></mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#568feb" padding-bottom="15px">
<mj-column>
<mj-text align="center" color="#FFF" font-size="15px" font-family="Ubuntu, Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="0px"><strong>Order Number</strong></mj-text>
<mj-text align="center" color="#FFF" font-size="13px" font-family="Helvetica" padding-left="25px" padding-right="25px" padding-bottom="20px" padding-top="10px">[[OrderNumber]]</mj-text>
</mj-column>
<mj-column>
<mj-text align="center" color="#FFF" font-size="15px" font-family="Ubuntu, Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="0px"><strong>Order Date</strong></mj-text>
<mj-text align="center" color="#FFF" font-size="13px" font-family="Helvetica" padding-left="25px" padding-right="25px" padding-bottom="20px" padding-top="10px">[[OrderDate]]</mj-text>
</mj-column>
<mj-column>
<mj-text align="center" color="#FFF" font-size="15px" font-family="Ubuntu, Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="0px"><strong>Total Price</strong></mj-text>
<mj-text align="center" color="#FFF" font-size="13px" font-family="Helvetica" padding-left="25px" padding-right="25px" padding-bottom="20px" padding-top="10px">[[TotalPrice]]</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#356CC7" padding-bottom="20px" padding-top="20px">
<mj-column width="50%">
<mj-button background-color="#ffae00" color="#FFF" font-size="14px" align="center" font-weight="bold" border="none" padding="15px 30px" border-radius="10px" href="https://mjml.io" font-family="Helvetica" padding-left="25px" padding-right="25px" padding-bottom="10px">Download Receipt</mj-button>
</mj-column>
<mj-column width="50%">
<mj-button background-color="#ffae00" color="#FFF" font-size="14px" align="center" font-weight="bold" border="none" padding="15px 30px" border-radius="10px" href="https://mjml.io" font-family="Helvetica" padding-left="25px" padding-right="25px" padding-bottom="12px">Track My Order</mj-button>
</mj-column>
</mj-section>
<mj-section background-color="#356cc7" padding-bottom="5px" padding-top="0">
<mj-column width="100%">
<mj-divider border-color="#ffffff" border-width="2px" border-style="solid" padding-left="20px" padding-right="20px" padding-bottom="0px" padding-top="0"></mj-divider>
<mj-text align="center" color="#FFF" font-size="15px" font-family="Helvetica" padding-left="25px" padding-right="25px" padding-bottom="20px" padding-top="20px">Cheers,
<br/>
<span style="font-size:15px">The Anderson & Associates Team</span></mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.