| MJML tag | MJML output | Figma Naming Convention | Considerations | Location |
|---|---|---|---|---|
| mj-preview | <mj-preview> | Not necessary to add this element neither rename layers with this tag in Figma. | ||
| head | ||||
| mj-breakpoint | <mj-breakpoint width="480px"> | Not necessary to add this element neither rename layers with this tag in Figma. | This tag allows you to control the breakpoint at which the layout shifts from desktop to mobile and vice versa. | head |
| mj-attributes | <mj-attributes> | Not necessary to add this element neither rename layers with this tag in Figma. | ||
| head | ||||
| mj-style | <mj-style> | Not necessary to add this element neither rename layers with this tag in Figma. | ||
| head | ||||
| mj-body | <mj-body> | Not necessary to add this element neither rename layers with this tag in Figma. | If you want to have a margin in the email with a different color than the sections, then you can use the mj-body tag in an auto-layout frame that also contains an mj-wrapper. | mjml |
| mj-button | <mj-button> | mj-button | ||
| body | ||||
| mj-column | <mj-column> | mj-column | ||
| body | ||||
| mj-divider | <mj-divider> | mj-divider | ||
| body | ||||
| mj-group | <mj-group> | mj-section-group | Helps to keep the columns together, so they wont stack on top of each other on mobile. | body |
| mj-image | <mj-image> | mj-image | ||
| body | ||||
| mj-section | <mj-section> | mj-section | ||
| body | ||||
| mj-social | <mj-social> | mj-social | ||
| body | ||||
| mj-social-element | <mj-social-element> | mj-social-element | ||
| body | ||||
| mj-spacer | <mj-spacer> | Not necessary to add this element neither rename layers with this tag in Figma. | ||
| body | ||||
| mj-text | <mj-text> | mj-text | ||
| body | ||||
| mj-wrapper | <mj-wrapper> | mj-wrapper | Allows to wrap multiple sections together. | body |
<mjml>
<mj-head>
<mj-preview>
Example
</mj-preview>
<mj-breakpoint width="480px"></mj-breakpoint>
<mj-attributes>
<mj-wrapper padding="0"></mj-wrapper>
<mj-divider padding="0"></mj-divider>
<mj-spacer padding="0"></mj-spacer>
<mj-section padding="0"></mj-section>
<mj-column padding="0"></mj-column>
<mj-image padding="0"></mj-image>
<mj-text padding="0"></mj-text>
<mj-button padding="0"></mj-button>
<mj-social-element padding="0"></mj-social-element>
<mj-social padding="0"></mj-social>
</mj-attributes>
<mj-style>
@media only screen and (max-width: 720px) {
.wrapper > table > tbody > tr > td {
padding-left: 0px !important;
padding-right: 0px !important;
}
.section > table > tbody > tr > td {
padding-left: 20px !important;
padding-right: 20px !important;
}
.column > table > tbody > tr > td {
padding-left: 0px !important;
padding-right: 0px !important;
}
.padB40 {
padding-bottom: 40px !important;
}
.image {
padding-left: 0px !important;
padding-right: 0px !important;
}
.image > table {
text-align: center !important;
margin: 0 auto !important;
}
.image > table > tbody > tr > td > a > img {
height: auto !important;
}
.divider {
padding-left: 0px !important;
padding-right: 0px !important;
}
.button > table {
width: 100% !important;
}
.button > table > tbody > tr > td > a {
width: 80% !important;
}
}
</mj-style>
<mj-font href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap>" name="Roboto"></mj-font>
<mj-font href="<https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400&display=swap>" name="Roboto Condensed"></mj-font>
</mj-head>
<mj-body width="720px">
<mj-wrapper background-color="#ebe7e1" css-class="wrapper" padding="32px 64px 32px 64px">
<mj-section css-class="section">
<mj-column css-class="column" padding="0px 0px 0px 0px" vertical-align="middle" width="50%">
<mj-text align="left" color="#00989f" css-class="text" font-family="Roboto" font-size="30px" font-weight="700" letter-spacing="0px" line-height="35px" padding="20px 0px 20px 0px">
Limited Editions Waiting For You
<br/>
</mj-text>
<mj-text align="left" color="#4d5043" css-class="text" font-family="Roboto" font-size="18px" font-weight="400" letter-spacing="0px" line-height="28px" padding="0px 0px 20px 0px">
Find out what you’re missing with 20% off your first purchase.
<br/>
</mj-text>
<mj-button align="left" background-color="#4d5043" border-radius="4px" color="#ebe7e1" font-family="Roboto" font-size="17px" font-weight="500" href="#" inner-padding="10px 0px 10px 0px" letter-spacing="0px" line-height="19px" padding="0px 0px 0px 0px" width="85px">
Dig It!
</mj-button>
</mj-column>
<mj-column css-class="column" vertical-align="top" width="50%">
<mj-image align="right" alt="Image" css-class="image" height="259px" href="#" src="<https://media.cannoli.app/media/figma/2ae2a49de05e02151ee4a77b9eb73f47.png>" width="296px">
</mj-image>
</mj-column>
</mj-section>
</mj-wrapper>
<mj-wrapper background-color="#000000" css-class="wrapper" padding="32px 64px 32px 64px">
<mj-section css-class="section">
<mj-group>
<mj-column css-class="column" padding="0px 380px 0px 0px" vertical-align="top" width="87.67%">
<mj-text align="left" color="#f9f9f9" css-class="text" font-family="Roboto Condensed" font-size="12px" font-weight="400" letter-spacing="2px" line-height="25px" padding="0px 0px 0px 0px" text-transform="uppercase">
best sellers
<br/>award winners
<br/>new releases
<br/>
</mj-text>
</mj-column>
<mj-column css-class="column" padding="0px 8px 0px 8px" vertical-align="top" width="12.33%">
<mj-image align="left" alt="Atomica 1" css-class="image" height="66px" href="#" padding="8px 0px 8px 0px" src="<https://media.cannoli.app/media/figma/106dca045fdf1dc12d21497fa47dabbb.png>" width="57px">
</mj-image>
</mj-column>
</mj-group>
</mj-section>
<mj-section>
<mj-column>
<mj-spacer height="16px"></mj-spacer>
</mj-column>
</mj-section>
<mj-section css-class="section">
<mj-column css-class="column" vertical-align="top" width="100%">
<mj-divider align="left" border-color="#f9f9f9" border-style="solid" border-width="1px" css-class="divider" padding="0px 0px 22px 0px">
</mj-divider>
<mj-social align="left" css-class="social" padding="0px 0px 22px 0px">
<mj-social-element border-radius="0px" href="#" icon-size="19px" name="Icon" padding="0px 20px 0px 0px" src="<https://media.cannoli.app/media/figma/18a641008a28a2c8e268c18c407de3c6.png>">
</mj-social-element>
<mj-social-element border-radius="0px" href="#" icon-size="17px" name="Icon" padding="0px 20px 0px 0px" src="<https://media.cannoli.app/media/figma/99cef1b77fd84c825d29b59a6ab61a17.png>">
</mj-social-element>
<mj-social-element border-radius="0px" href="#" icon-size="9px" name="Icon" padding="0px 0px 0px 0px" src="<https://media.cannoli.app/media/figma/9d9b73848496999f1117684a91b9ef02.png>">
</mj-social-element>
</mj-social>
<mj-text align="left" color="#f9f9f9" css-class="text" font-family="Roboto" font-size="14px" font-weight="400" letter-spacing="0px" line-height="20px" padding="0px 0px 0px 0px">
Copyright 2021 Atomic Publishers. All rights reserved.
<br/>
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
</mj-body>
</mjml>