<!-- MJML -->
<mj-body>
<mj-section>
<mj-column>
<mj-image src="/assets/img/logo-small.png"></mj-image>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica"
>Hello World</mj-text
>
</mj-column>
</mj-section>
</mj-body>becomes
<!-- HTML -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>undefined</title>
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
@media only screen and (min-width: 480px) {
.mj-2column,
* [aria-labelledby='mj-2column'] {
width: 50% !important;
}
.mj-3column,
* [aria-labelledby='mj-3column'] {
width: 33.3333% !important;
}
.mj-4column,
* [aria-labelledby='mj-4column'] {
width: 25% !important;
}
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
@import url(
https://fonts.googleapis.com/css?family=Ubuntu:400,
500,
700,
300
);
</style>
<style type="text/css">
@media only screen and (max-width: 480px) {
@-ms-viewport {
width: 320px;
}
@viewport {
width: 320px;
}
}
</style>
<link
href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300"
rel="stylesheet"
type="text/css"
/>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width: 480px) {
}
</style>
</head>
<body id="YIELD_MJML" style="">
<div class="mj-body">
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td>
<![endif]-->
<div style="margin:0 auto;max-width:600px;">
<table
class=""
cellpadding="0"
cellspacing="0"
style="width:100%;font-size:0px;"
align="center"
>
<tbody>
<tr>
<td
style="text-align:center;vertical-align:top;font-size:0;padding-top:20px;padding-bottom:20px;"
>
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0"><tr><td style="width:600px;">
<![endif]-->
<div
style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;"
class="mj-1column"
aria-labelledby="mj-1column"
data-column-width="NaN"
>
<table width="100%">
<tbody>
<tr>
<td
style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;"
align="center"
>
<table
cellpadding="0"
cellspacing="0"
style="border-collapse:collapse;border-spacing:0px;"
align="center"
>
<tbody>
<tr>
<td>
<img
alt=""
src="/assets/img/logo-small.png"
style="border:none;display:block;outline:none;text-decoration:none;max-width:NaN;"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;"
>
<div
style="height:0px;font-size:1px;border-color:#F45E43;border-style:solid;border-width:4px 0 0;margin-bottom:30px;margin-left:10px;margin-right:10px;margin-top:30px;"
></div>
</td>
</tr>
<tr>
<td
style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;"
align="left"
>
<div
class="mj-content"
style="cursor:auto;color:#F45E43;font-family:helvetica;font-size:20px;line-height:22px;"
>
Hello World
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</div>
</body>
</html>
MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML's open-source engine generates high quality responsive HTML compliant with best practices.
Visit mjml.io for more details about this open source project initiated by the Mailjet development team.
Find the mjml repository on Github.