forked from blocksedit/starter-email-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblocks-starter.mjml
206 lines (189 loc) · 19.8 KB
/
blocks-starter.mjml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<mjml>
<mj-head>
<mj-title>Starter Email Template</mj-title>
<mj-style inline="inline">
/* Adds Blocks Edit editable tags */
.edit-image img, .edit-text div, .edit-button a, .edit-nav a {
-block-edit: true;
}
.edit-region < tr {
-block-region: true;
}
.edit-remove < tr {
-block-remove: true;
}
body > div:first-child {
-block-preview: true;
}
.edit-text-30 div {
-block-maxchar: 30;
}
</mj-style>
<mj-preview>Short line of preview text goes here</mj-preview>
</mj-head>
<mj-body background-color="#FFFFFF">
<mj-raw><div class="block-region" data-group="header"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px">
<mj-column width="33.3%" vertical-align="middle">
<mj-image css-class="edit-image" padding-top="0px" padding-right="0px" padding-bottom="10px" padding-left="0px" src="http://placehold.it/400x160" href="https://blocksedit.com/#" alt=""></mj-image>
</mj-column>
<mj-column width="66.6%" vertical-align="middle">
<mj-text css-class="edit-text edit-text-30" padding-top="0px" padding-bottom="10px" padding-right="0px" padding-left="0px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%" align="center">Tagline/title</mj-text>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-region" data-group="header"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px">
<mj-column width="33.3%" vertical-align="middle">
<mj-image css-class="edit-image" padding-top="0px" padding-right="0px" padding-bottom="10px" padding-left="0px" src="http://placehold.it/400x160" href="https://blocksedit.com/#" alt=""></mj-image>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-region" data-group="header"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px">
<mj-column width="66.6%" vertical-align="middle">
<mj-text css-class="edit-text edit-text-30" padding-top="0px" padding-bottom="10px" padding-right="0px" padding-left="0px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%" align="center">Tagline/title</mj-text>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section"></mj-raw>
<mj-section background-color="#333" padding="0px">
<mj-column>
<mj-navbar base-url="#" hamburger="hamburger" ico-color="#ffffff" css-class="edit-nav">
<mj-navbar-link href="https://blocksedit.com/#" color="#ffffff" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="16px" line-height="22.4px%">Nav item 1</mj-navbar-link>
<mj-navbar-link href="https://blocksedit.com/#" color="#ffffff" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="16px" line-height="22.4px%">Nav item 2</mj-navbar-link>
<mj-navbar-link href="https://blocksedit.com/#" color="#ffffff" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="16px" line-height="22.4px%">Nav item 3</mj-navbar-link>
<mj-navbar-link href="https://blocksedit.com/#" color="#ffffff" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="16px" line-height="22.4px%">Nav item 4</mj-navbar-link>
<mj-navbar-link href="https://blocksedit.com/#" color="#ffffff" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="16px" line-height="22.4px%">Nav item 5</mj-navbar-link>
</mj-navbar>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px">
<mj-column vertical-align="middle">
<mj-image css-class="edit-image" padding-bottom="20px" padding-top="0px" padding-left="0px" padding-right="0px" src="http://placehold.it/1200x400" href="https://blocksedit.com/#" alt=""></mj-image>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section"></mj-raw>
<mj-hero mode="fixed-height" height="350px" background-width="600px" background-height="350px" background-url="http://placehold.it/1200x700" padding="100px 0px">
<mj-text css-class="edit-text" padding="20px" color="#ffffff" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" align="center" font-size="28px">Headline text</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" href="https://blocksedit.com/#" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" href="#" align="center">Call to Action</mj-button>
</mj-hero>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section" data-group="basic"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px">
<mj-column>
<mj-text css-class="edit-text" padding-top="0px" padding-right="0px" padding-bottom="10px" padding-left="0px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="28px">Simple headline, description and call to action</mj-text>
<mj-text css-class="edit-text" padding-top="0px" padding-right="0px" padding-bottom="10px" padding-left="0px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%">Perhaps the most straightforward format, with the description text kept relatively short, either a couple of sentences, or a paragraph max.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-bottom="20px" href="https://blocksedit.com/#" align="left" padding-left="0" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section" data-group="basic"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px">
<mj-column>
<mj-text css-class="edit-text" padding-top="0px" padding-right="0px" padding-bottom="10px" padding-left="0px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" align="center" font-size="28px">Simple headline, description and call to action</mj-text>
<mj-text css-class="edit-text" padding-top="0px" padding-right="0px" padding-bottom="10px" align="center" padding-left="0px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%">Perhaps the most straightforward format, with the description text kept relatively short, either a couple of sentences, or a paragraph max.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-right="0px" padding-bottom="20px" padding-left="0px" align="center" href="https://blocksedit.com/#" align="left" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section" data-group="basic"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px" background-color="#eee">
<mj-column>
<mj-text css-class="edit-text" padding-top="0px" padding-bottom="10px" padding-left="15px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="28px">Simple headline, description and call to action</mj-text>
<mj-text css-class="edit-text" padding-top="0px" padding-bottom="10px" padding-left="15px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%">Perhaps the most straightforward format, with the description text kept relatively short, either a couple of sentences, or a paragraph max.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-bottom="20px" href="https://blocksedit.com/#" align="left" padding-left="15px" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section" data-group="basic"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px" background-color="#eee">
<mj-column>
<mj-text css-class="edit-text" padding-top="0px" padding-bottom="10px" padding-left="15px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" align="center" font-size="28px">Simple headline, description and call to action</mj-text>
<mj-text css-class="edit-text" padding-top="0px" padding-bottom="10px" align="center" padding-left="15px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%">Perhaps the most straightforward format, with the description text kept relatively short, either a couple of sentences, or a paragraph max.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-bottom="20px" align="center" href="https://blocksedit.com/#" align="left" padding-left="15px" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px">
<mj-column vertical-align="top">
<mj-image css-class="edit-image" padding-bottom="10px" padding-top="0px" padding-left="0px" padding-right="0px" src="http://placehold.it/600x450" href="https://blocksedit.com/#" alt=""></mj-image>
</mj-column>
<mj-column vertical-align="top">
<mj-text css-class="edit-text" padding-top="0px" padding-right="0px" padding-bottom="10px" padding-left="15px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="28px">Section with image on the left</mj-text>
<mj-text css-class="edit-text" padding-top="0px" padding-right="0px" padding-bottom="10px" padding-left="15px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%">Description, usually a few lines long to fill up the space that comes from the image's height. Sometimes a link is included.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-right="0px" padding-bottom="20px" padding-left="15px" href="https://blocksedit.com/#" align="left" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px" direction="rtl">
<mj-column vertical-align="top">
<mj-image css-class="edit-image" padding-bottom="10px" padding-top="0px" padding-left="0px" padding-right="0px" src="http://placehold.it/600x450" href="https://blocksedit.com/#" alt=""></mj-image>
</mj-column>
<mj-column vertical-align="top">
<mj-text css-class="edit-text" padding-top="0px" padding-right="15px" padding-bottom="10px" padding-left="0px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="28px">Section with image on the right</mj-text>
<mj-text css-class="edit-text" padding-top="0px" padding-right="15px" padding-bottom="10px" padding-left="0px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%">Description, usually a few lines long to fill up the space that comes from the image's height. Sometimes a link is included.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-right="15px" padding-bottom="20px" href="https://blocksedit.com/#" align="left" padding-left="0px" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px">
<mj-column vertical-align="top">
<mj-image css-class="edit-image" padding-top="0px" padding-right="5px" padding-bottom="0px" padding-left="0px" src="http://placehold.it/600x300" href="https://blocksedit.com/#" alt=""></mj-image>
<mj-text css-class="edit-text" padding-top="10px" padding-right="5px" padding-bottom="10px" padding-left="0px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%" align="center">Column-based layouts allow showcasing multiple items. Typically, same-sized images for each item help draw attention and glance at items before reading their description.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-right="5px" padding-bottom="20px" padding-left="0px" href="https://blocksedit.com/#" align="center" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
<mj-column vertical-align="top">
<mj-image css-class="edit-image" padding-top="0px" padding-right="0px" padding-bottom="0px" padding-left="5px" src="http://placehold.it/600x300" href="https://blocksedit.com/#" alt=""></mj-image>
<mj-text css-class="edit-text" padding-top="10px" padding-right="0px" padding-bottom="10px" padding-left="5px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%" align="center">Column-based layouts allow showcasing multiple items. Typically, same-sized images for each item help draw attention and glance at items before reading their description.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-right="0px" padding-bottom="20px" padding-left="5px" href="https://blocksedit.com/#" align="center" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px">
<mj-column vertical-align="top">
<mj-image css-class="edit-image" padding-top="0px" padding-right="7px" padding-bottom="10px" padding-left="0px" src="http://placehold.it/400x300" href="https://blocksedit.com/#" alt=""></mj-image>
<mj-text css-class="edit-text" padding-top="0px" padding-right="7px" padding-bottom="10px" padding-left="0px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%" align="center">This allows the reader to scan through it. Often articles are linked for further reading.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-right="7px" padding-bottom="20px" padding-left="0px" href="https://blocksedit.com/#" align="center" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
<mj-column vertical-align="top">
<mj-image css-class="edit-image" padding-top="0px" padding-right="3px" padding-bottom="10px" padding-left="3px" src="http://placehold.it/400x300" href="https://blocksedit.com/#" alt=""></mj-image>
<mj-text css-class="edit-text" padding-top="0px" padding-right="3px" padding-bottom="10px" padding-left="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%" align="center">This allows the reader to scan through it. Often articles are linked for further reading.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-right="3px" padding-bottom="20px" padding-left="3px" href="https://blocksedit.com/#" align="center" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
<mj-column vertical-align="top">
<mj-image css-class="edit-image" padding-top="0px" padding-right="0px" padding-bottom="10px" padding-left="7px" src="http://placehold.it/400x300" href="https://blocksedit.com/#" alt=""></mj-image>
<mj-text css-class="edit-text" padding-top="0px" padding-right="0px" padding-bottom="10px" padding-left="7px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%" align="center">This allows the reader to scan through it. Often articles are linked for further reading.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-right="0px" padding-bottom="20px" padding-left="7px" href="https://blocksedit.com/#" align="center" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-raw><div class="block-section"></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px">
<mj-column width="33.3%" vertical-align="top">
<mj-image css-class="edit-image" padding-top="0px" padding-right="5px" padding-bottom="10px" padding-left="0px" src="http://placehold.it/400x250" href="https://blocksedit.com/#" alt=""></mj-image>
</mj-column>
<mj-column width="66.6%" vertical-align="top">
<mj-text css-class="edit-text" padding-top="0px" padding-right="0px" padding-bottom="10px" padding-left="5px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="18px" line-height="22.4px%">This allows the reader to scan through it. Often articles are linked for further reading.</mj-text>
<mj-button css-class="edit-button edit-region edit-remove" padding-right="0px" padding-bottom="20px" padding-left="5px" href="https://blocksedit.com/#" align="left" font-size="18px" border-radius="3px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" line-height="100%">Call to Action</mj-button>
</mj-column>
</mj-section>
<mj-raw></div></mj-raw>
<mj-section vertical-align="middle" padding-bottom="0px">
<mj-column>
<mj-text css-class="edit-text" padding-top="0px" padding-bottom="20px" padding-left="15px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" align="center" font-size="16px"><a href="https://blocksedit.com/#" style="text-decoration:none;color:#000000">Unsubscribe</a></mj-text>
<mj-text css-class="edit-text" padding-top="0px" padding-bottom="10px" align="center" padding-left="15px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="16px" line-height="22.4px%">This email was sent to: [email address]</mj-text>
<mj-text css-class="edit-text" padding-top="0px" padding-bottom="10px" align="center" padding-left="15px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-weight="700" font-size="16px" line-height="22.4px%">This email was sent by:</mj-text>
<mj-text css-class="edit-text" padding-top="0px" padding-bottom="10px" align="center" padding-left="15px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="16px" line-height="22.4px%">Mailing address line 1</mj-text>
<mj-text css-class="edit-text" padding-top="0px" padding-bottom="10px" align="center" padding-left="15px" font-family="'Myriad Pro','PT Sans',Arial,Helvetica,sans-serif" font-size="16px" line-height="22.4px%">Mailing address line 2</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>