Cannoli
Search…
⌃K

Supported MJML components

Here you can find the MJML components supported in Cannoli.
Below this table there is an example that illustrates how the MJML output looks on Cannoli
MJML tag
MJML output
Supported
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
mj-title
<mj-title>
TBD
head
mj-accordion
<mj-accordion>
TBD
body
mj-carousel
<mj-carousel>
TBD
body
mj-hero
<mj-hero>
TBD
This element doesn't render as expected on outlook. Read more about this issue here.
body
mj-navbar
<mj-navbar>
TBD
body
mj-raw
<mj-raw>
TBD
This component does not have a visual representation, it is used to add raw HTML code.
body
mj-table
<mj-table>
TBD
body

MJML output example in Cannoli

1
<mjml>
2
<mj-head>
3
<mj-preview>
4
Example
5
</mj-preview>
6
<mj-breakpoint width="480px"></mj-breakpoint>
7
<mj-attributes>
8
<mj-wrapper padding="0"></mj-wrapper>
9
<mj-divider padding="0"></mj-divider>
10
<mj-spacer padding="0"></mj-spacer>
11
<mj-section padding="0"></mj-section>
12
<mj-column padding="0"></mj-column>
13
<mj-image padding="0"></mj-image>
14
<mj-text padding="0"></mj-text>
15
<mj-button padding="0"></mj-button>
16
<mj-social-element padding="0"></mj-social-element>
17
<mj-social padding="0"></mj-social>
18
</mj-attributes>
19
<mj-style>
20
@media only screen and (max-width: 720px) {
21
.wrapper > table > tbody > tr > td {
22
padding-left: 0px !important;
23
padding-right: 0px !important;
24
}
25
26
.section > table > tbody > tr > td {
27
padding-left: 20px !important;
28
padding-right: 20px !important;
29
}
30
31
.column > table > tbody > tr > td {
32
padding-left: 0px !important;
33
padding-right: 0px !important;
34
}
35
36
.padB40 {
37
padding-bottom: 40px !important;
38
}
39
40
.image {
41
padding-left: 0px !important;
42
padding-right: 0px !important;
43
}
44
45
.image > table {
46
text-align: center !important;
47
margin: 0 auto !important;
48
}
49
50
.image > table > tbody > tr > td > a > img {
51
height: auto !important;
52
}
53
54
.divider {
55
padding-left: 0px !important;
56
padding-right: 0px !important;
57
}
58
59
.button > table {
60
width: 100% !important;
61
}
62
63
.button > table > tbody > tr > td > a {
64
width: 80% !important;
65
}
66
}
67
68
</mj-style>
69
<mj-font href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500;700&display=swap" name="Roboto"></mj-font>
70
<mj-font href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:[email protected]&display=swap" name="Roboto Condensed"></mj-font>
71
</mj-head>
72
<mj-body width="720px">
73
<mj-wrapper background-color="#ebe7e1" css-class="wrapper" padding="32px 64px 32px 64px">
74
<mj-section css-class="section">
75
<mj-column css-class="column" padding="0px 0px 0px 0px" vertical-align="middle" width="50%">
76
<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">
77
Limited Editions Waiting For You
78
<br/>
79
</mj-text>
80
<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">
81
Find out what you’re missing with 20% off your first purchase.
82
<br/>
83
</mj-text>
84
<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">
85
Dig It!
86
</mj-button>
87
</mj-column>
88
<mj-column css-class="column" vertical-align="top" width="50%">
89
<mj-image align="right" alt="Image" css-class="image" height="259px" href="#" src="https://media.cannoli.app/media/figma/2ae2a49de05e02151ee4a77b9eb73f47.png" width="296px">
90
91
</mj-image>
92
</mj-column>
93
</mj-section>
94
</mj-wrapper>
95
<mj-wrapper background-color="#000000" css-class="wrapper" padding="32px 64px 32px 64px">
96
<mj-section css-class="section">
97
<mj-group>
98
<mj-column css-class="column" padding="0px 380px 0px 0px" vertical-align="top" width="87.67%">
99
<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">
100
best sellers
101
<br/>award winners
102
<br/>new releases
103
<br/>
104
</mj-text>
105
</mj-column>
106
<mj-column css-class="column" padding="0px 8px 0px 8px" vertical-align="top" width="12.33%">
107
<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">
108
109
</mj-image>
110
</mj-column>
111
</mj-group>
112
</mj-section>
113
<mj-section>
114
<mj-column>
115
<mj-spacer height="16px"></mj-spacer>
116
</mj-column>
117
</mj-section>
118
<mj-section css-class="section">
119
<mj-column css-class="column" vertical-align="top" width="100%">
120
<mj-divider align="left" border-color="#f9f9f9" border-style="solid" border-width="1px" css-class="divider" padding="0px 0px 22px 0px">
121
122
</mj-divider>
123
<mj-social align="left" css-class="social" padding="0px 0px 22px 0px">
124
<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">
125
126
</mj-social-element>
127
<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">
128
129
</mj-social-element>
130
<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">
131
132
</mj-social-element>
133
</mj-social>
134
<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">
135
Copyright 2021 Atomic Publishers. All rights reserved.
136
<br/>
137
</mj-text>
138
</mj-column>
139
</mj-section>
140
</mj-wrapper>
141
</mj-body>
142
</mjml>