Create email with MJML

  1. Create email template
  • Cannot use base64 image and SVG image
  1. MJML
    MJML
  • Install
1
npm install mjml
  • Use
1
npx mjml input.mjml -o output.html
  • Example
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
<mjml>
<mj-head>
<mj-font name="Barlow"
href="https://fonts.googleapis.com/css?family=Barlow" />
</mj-head>
<mj-body>
<mj-section background-color="white" padding-bottom="0px">
<mj-column>
<mj-image width="250px" src="https://s3.eu-north-1.amazonaws.com/hudson-s3-dev/uploads/media_file/file/53/logo.png" />
</mj-column>
</mj-section>

<mj-section background-color="white">
<mj-column>
<mj-text align="center" padding-top="0px" padding-bottom="0px" font-size="23px" font-family="Barlow, Arial">
<div><b>Verify your email address</b></div>
</mj-text>
</mj-column>
</mj-section>

<mj-section background-color="white" padding-top="0px" padding-bottom="0px">
<mj-column>
<mj-text align="center" padding-top="0px" padding-bottom="0px" font-size="18px" font-family="Barlow, Arial">
<div>To starting using Allihoop Co-living App, just input this code in the app:</div>
</mj-text>
</mj-column>
</mj-section>

<mj-section background-color="white">
<mj-column>
<mj-text align="center">
<div>
<div style="display: inline; border: solid 2px; border-color: #9e9e9e; border-radius: 8px; font-size: 30px; padding: 10px; padding-left: 10px; padding-right: 10px; color: #000000;">1</div>
<div style="display: inline; border: solid 2px; border-color: #9e9e9e; border-radius: 8px; font-size: 30px; padding: 10px; padding-left: 10px; padding-right: 10px; color: #000000;">2</div>
<div style="display: inline; border: solid 2px; border-color: #9e9e9e; border-radius: 8px; font-size: 30px; padding: 10px; padding-left: 10px; padding-right: 10px; color: #000000;">3</div>
<div style="display: inline; border: solid 0px; border-color: white; border-radius: 8px; font-size: 30px; padding: 2px; color: #9e9e9e;">-</div>

<div style="display: inline; border: solid 2px; border-color: #9e9e9e; border-radius: 8px; font-size: 30px; padding: 10px; padding-left: 10px; padding-right: 10px; color: #000000;">4</div>
<div style="display: inline; border: solid 2px; border-color: #9e9e9e; border-radius: 8px; font-size: 30px; padding: 10px; padding-left: 10px; padding-right: 10px; color: #000000;">5</div>
<div style="display: inline; border: solid 2px; border-color: #9e9e9e; border-radius: 8px; font-size: 30px; padding: 10px; padding-left: 10px; padding-right: 10px; color: #000000;">6</div>
</div>
</mj-text>
</mj-column>
</mj-section>

<mj-section background-color="white" padding-bottom="0px">
<mj-column>
<mj-text align="center" padding-top="0px" padding-bottom="0px" font-size="15px" font-family="Barlow, Arial">
<div>If you didn't try signing in through Allihoop Co-living App, please ignore this email, we apologize for the inconvenience</div>
</mj-text>
</mj-column>
</mj-section>

<mj-section background-color="white" padding-bottom="0px">
<mj-column>
<mj-text align="center" padding-top="0px" padding-bottom="0px" font-size="15px" font-family="Barlow, Arial">
<div>Questions? Please contact <a href="mailto:community@allihoop.se" style="text-decoration: none;"><b style="color: #116979;">community@allihoop.se</b></a></div>
</mj-text>
</mj-column>
</mj-section>

</mj-body>
</mjml>