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`.
The MJML ecosystem has a dedicated community that we count to help make it grow and provide it with even more awesome tools, always aiming to make development with MJML an efficient and fun process!
4
+
5
+
Getting involved is really easy. If you want to contribute, feel free to [open an issue](https://github.com/mjmlio/mjml/issues) or [submit a pull-request](https://github.com/mjmlio/mjml/pulls)!
6
+
7
+
Here are some tools that utilise MJML:
8
+
9
+
### Mailjet
10
+
11
+
[Mailjet](https://www.mailjet.com/demo/) offers an integrated MJML workspace designed for creating, previewing, and managing email templates. Its MJML editor supports syntax highlighting, live preview, and validation, helping you move quickly while keeping your markup in good shape.
12
+
13
+
The drag-and-drop editor in Mailjet is also built on MJML, so visually created templates share the same responsive structure as those coded by hand.
14
+
15
+
When your template is ready, you can export it in MJML or HTML, or send emails directly through Mailjet.
16
+
17
+
### Parcel
18
+
19
+
[Parcel](https://parcel.io) is the code editor built for email. This feature packed tool includes syntax highlighting, Emmet, inline documentation, autocomplete, live preview, screenshots, and full MJML, CSS, and HTML validation.
20
+
21
+
Use Focus Mode to keep the preview aligned with the code you're working on, or Inspect Element to easily find the code that produces specific elements in the preview.
22
+
23
+
Export MJML to HTML with a click.
24
+
25
+
### IntelliJ IDEA Plugin - MJML Support
26
+
27
+
[IntelliJ IDEA](https://www.jetbrains.com/idea/) is an IDE developed by JetBrains. The plugin provides you with a (near) realtime preview, auto complete, inline documentation and code analysis.
28
+
29
+
It is available on the [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/16418-mjml-support).
30
+
31
+
### Gradle Plugin - MJML Compilation
32
+
33
+
[Gradle](https://gradle.org/) is a build tool for a various set of languages and environments. The plugin provides an easy way to embed your MJML templates to your Java/Kotlin application in its resources in precompiled form (HTML).
34
+
35
+
It is available through the gradle plugin system [io.freefair.mjml.java](https://plugins.gradle.org/plugin/io.freefair.mjml.java) and documentation is available here [FreeFair User Guide](https://docs.freefair.io/gradle-plugins/current/reference/).
36
+
37
+
### Neos CMS
38
+
39
+
[Neos CMS](https://www.neos.io/) is a content management system that combines structured content with application. This package adds the helper for compiling MJML markup as well as some prototypes which allow you to use TailwindCSS like classes in your MJML markup.
40
+
41
+
It is available on [packagist](https://packagist.org/packages/garagist/mjml).
42
+
43
+
### Easy-email
44
+
45
+
[Easy-email](https://github.com/zalify/easy-email) drag-and-drop email editor based on MJML. Transform structured JSON data into HTML that’s compatible with major email clients.
46
+
47
+
### Email Love
48
+
49
+
The [Email Love Figma plugin](https://www.figma.com/community/plugin/1387891288648822744/email-love-html-email-builder) takes the headache out of the email development process by enabling you to export responsive, production-ready email HTML or MJML directly from Figma.
0 commit comments