You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
First, we will implement the skeleton which are the sections. Here, our email is going to be divided into 6 sections.
46
39
47
-
## Company Header
40
+
First, we’ll create the basic structure, dividing the email into six sections.
48
41
49
-
```html
42
+
#### Company Header
50
43
44
+
```html
51
45
<!-- Company Header -->
52
46
<mj-sectionbackground-color="#f0f0f0">
53
47
<mj-column>
54
-
<mj-textalign="center"
55
-
font-style="italic"
56
-
font-size="20px"
57
-
color="#626262">
48
+
<mj-text
49
+
align="center"
50
+
font-style="italic"
51
+
font-size="20px"
52
+
color="#626262"
53
+
>
58
54
My Company
59
55
</mj-text>
60
56
</mj-column>
61
57
</mj-section>
62
-
63
58
```
64
-
The first section of the email consists in a centered banner, containing only the company name. The following markup is the MJML representation of the layout we want to obtain.
65
59
66
-
<asideclass="notice">
67
-
Remember everything has to be contained in one column.
68
-
</aside>
69
-
The text padding represents the inner space around the content within the `mj-text` element.
60
+
The first section of the email consists in a centered banner, containing only the company name. The following markup is the MJML representation of the layout we want to obtain.
70
61
71
-
## Image Header
62
+
<divclass="alert alert-important"role="alert">
63
+
<p>Important</p>
64
+
<p>Remember everything has to be contained within the column.</p>
Next comes a section with a background image and a block of text (representing the company slogan) and a button pointing to a page listing all the company promotions.
98
92
99
-
To add the image header, you will have to replace the section's background-color by a background-url.
100
-
Similarly to the first header, you will have to center the text both vertically and horizontally.
101
-
The padding remains the same.
102
-
The button `href` sets the button location.
103
-
In order to have the background rendered full-width in the column, set the column width to 600px with `width="600px"`.
93
+
To add the image header, you will have to replace the section's `background-color` with a `background-url`.
104
94
105
-
## Introduction Text
95
+
Similarly to the first company header, you will have to center the text.
96
+
97
+
The button `href` sets where the button links to.
98
+
99
+
In order to have the background rendered full-width in the column, set the column width to 600px with `width="600px"`.
106
100
107
-
```html
101
+
#### Introduction Text
108
102
103
+
```html
109
104
<!-- Intro text -->
110
-
<mj-sectionbackground-color="#fafafa">
111
-
<mj-columnwidth="400px">
112
-
<mj-textfont-style="italic"
113
-
font-size="20px"
114
-
font-family="Helvetica Neue"
115
-
color="#626262">
116
-
My Awesome Text
117
-
</mj-text>
118
-
<mj-textcolor="#525252">
119
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
120
-
</mj-text>
121
-
122
-
<mj-buttonbackground-color="#F45E43"
123
-
href="#">
124
-
Learn more
125
-
</mj-button>
126
-
</mj-column>
127
-
</mj-section>
105
+
<mj-sectionbackground-color="#fafafa">
106
+
<mj-columnwidth="400px">
107
+
<mj-text
108
+
font-style="italic"
109
+
font-size="20px"
110
+
font-family="Helvetica Neue"
111
+
color="#626262"
112
+
>
113
+
My Awesome Text
114
+
</mj-text>
128
115
129
-
```
116
+
<mj-textcolor="#525252">
117
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim
118
+
eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras
119
+
id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh.
120
+
Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis
121
+
faucibus.
122
+
</mj-text>
130
123
131
-
The introduction text will consist of a title, a main text and a button.
132
-
The title is a regular `mj-text` that can be customized.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.
158
-
</mj-text>
147
+
<mj-text
148
+
font-style="italic"
149
+
font-size="20px"
150
+
font-family="Helvetica Neue"
151
+
color="#626262"
152
+
>
153
+
Find amazing places
154
+
</mj-text>
159
155
156
+
<mj-textcolor="#525252">
157
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim
158
+
eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras
159
+
id dui lectus. Vestibulum sed finibus lectus.</mj-text
160
+
>
160
161
</mj-column>
161
162
</mj-section>
162
-
163
163
```
164
164
165
-
This sections is made up of 2 columns. One containing an image, the other one containing a text.
166
-
For the image part, note that when a tag does not have any child, you can use the XML self-closing tag syntax:
167
-
`<mj-image />`
165
+
This section is made up of two columns. One containing an image, the other containing text.
166
+
167
+
For the image, note that when a tag does not have any children, you can use the XML self-closing tag syntax: `<mj-image />`
168
168
169
-
For the text part, you are going to need two `<mj-text>`s like above. One with a title format, and the other one as a regular text.
169
+
For the text, you are going to use two `mj-text` tags like, as previously; one with a heading style, and the other one styled as regular text.
The MJML standard components library comes with a `mj-social` component.
204
-
Here, we're going to use `facebook` only.
213
+
214
+
MJML has an `mj-social` component as standard. Here, we're going to use `facebook` only, but there are several default social media sites to choose from, or you can add your own bespoke.
In addition to the standard components available in MJML, our awesome community is contributing by creating their own components.
4
4
5
5
To use a community component, proceed as follows:
6
+
6
7
- Install MJML locally with `npm install mjml` in a folder
7
8
- Install the community component with `npm install {component-name}` in the same folder
8
-
- Create a `.mjmlconfig` file in the same folder with:
9
+
- Create a `.mjmlconfig` file in the same folder with this code:
9
10
10
11
```json
11
12
{
12
-
"packages": [
13
-
"component-name/path-to-js-file"
14
-
]
13
+
"packages": ["component-name/path-to-js-file"]
15
14
}
16
15
```
17
16
18
-
Finally, you can now use the component in a MJML file, for example `index.mjml`, and run MJML locally in your terminal (make sure to be in the folder where you installed MJML and the community component): `./node_modules/.bin/mjml index.mjml`.
17
+
You can now use the component in an MJML file, for example `index.mjml`, and run MJML locally in your terminal. Ensure that you’re in the folder where you installed MJML and the community component, e.g.: `./node_modules/.bin/mjml index.mjml`.
0 commit comments