Skip to content

Commit 89d30ce

Browse files
webstackdevwebstackdev
committed
Update styling on newsletter emails
1 parent c1734aa commit 89d30ce

5 files changed

Lines changed: 1696 additions & 378 deletions

File tree

‎_TODO.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ https://aws.plainenglish.io/how-to-build-a-chatbot-using-aws-lex-and-lambda-in-2
3131

3232
- `0/2000` characters should show number of characters left instead
3333

34-
I put our default data deletion request email template in src/pages/testing/comps/scratchpad.astro
35-
I'd like to get some design ideas for making this page nicer. You're free to generate any idea you like - add images, add sections, change the copy, anything to improve the page for its intended purpose. Add the comp as a block in a div below the existing "Default Layout" section. Since this is an email, we use mjml to generate them. That means we should restrict our CSS to styles that mjml supports / are generally supported by a wide range of email clients (but don't change it to mjml markup, we'll do that for the winning comp).
34+
## Newsletter / MJML Templates
3635

37-
I want to add several comps, but let's do them one at a time since it's a fairly large task.
36+
- We need to make sure the images point to the full production URL, not a relative import
37+
- Need to move the unsubscribe link into an Action and handle it entirely within our website instead of on Hubspot
38+
- Need to add a newsletter publishing workflow as an action, using the newsletter static segment imported from Hubspot

‎src/actions/contact/email/acknowledgement.mjml‎

Lines changed: 221 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
{% import '../../utils/email/footer/index.mjml' as emailFooter with context %}
1+
{% set heroImageUrl = 'https://www.webstackbuilders.com/assets/images/newsletter/cloud-4.jpg' %}
22

33
<mjml>
44
<mj-head>
5-
{% include '../../utils/email/footer/styles.mjml' %}
65
<mj-title>
76
We Received Your Message
87
</mj-title>
@@ -12,52 +11,240 @@
1211
<mj-attributes>
1312
<mj-all font-family="Arial, sans-serif" />
1413
<mj-class
15-
name="content-section"
16-
padding="30px 24px 0"
14+
name="card-header"
15+
background-color="#e5e7eb"
16+
border-bottom="1px solid #d1d5db"
17+
border-radius="8px 8px 0 0"
18+
padding="16px 16px 8px"
1719
/>
1820
<mj-class
19-
name="heading"
20-
color="#111827"
21-
font-size="30px"
22-
font-weight="700"
23-
line-height="38px"
21+
name="hero-section"
22+
background-color="#ffffff"
23+
padding="40px 24px 20px"
24+
/>
25+
<mj-class
26+
name="hero-emoji"
27+
align="center"
28+
font-size="56px"
29+
line-height="56px"
2430
padding="0 0 20px"
2531
/>
32+
<mj-class
33+
name="hero-title"
34+
align="center"
35+
color="#003d86"
36+
font-size="24px"
37+
font-weight="700"
38+
line-height="32px"
39+
padding="0"
40+
/>
41+
<mj-class
42+
name="card-section"
43+
background-color="#ffffff"
44+
padding="0 40px 32px"
45+
/>
46+
<mj-class
47+
name="panel-title"
48+
color="#003d86"
49+
font-size="15px"
50+
font-weight="700"
51+
line-height="22px"
52+
padding="0 0 12px"
53+
/>
2654
<mj-class
2755
name="body-text"
2856
color="#333333"
2957
font-size="16px"
3058
line-height="26px"
3159
padding="0 0 16px"
3260
/>
61+
<mj-class
62+
name="small-text"
63+
color="#334155"
64+
font-size="15px"
65+
line-height="24px"
66+
padding="0"
67+
/>
68+
<mj-class
69+
name="button"
70+
background-color="#0066cc"
71+
border-radius="6px"
72+
color="#ffffff"
73+
font-size="16px"
74+
font-weight="600"
75+
inner-padding="16px 40px"
76+
line-height="120%"
77+
padding="0"
78+
text-transform="none"
79+
/>
80+
<mj-class
81+
name="footer-section"
82+
background-color="#f8fafc"
83+
border-top="1px solid #f0f0f0"
84+
border-radius="0 0 8px 8px"
85+
padding="24px 40px"
86+
/>
87+
<mj-class
88+
name="footer-note"
89+
align="center"
90+
color="#64748b"
91+
font-size="13px"
92+
line-height="18px"
93+
padding="0 0 12px"
94+
/>
95+
<mj-class
96+
name="footer-meta"
97+
align="center"
98+
color="#94a3b8"
99+
font-size="12px"
100+
line-height="18px"
101+
padding="0"
102+
/>
33103
</mj-attributes>
34104
</mj-head>
35-
<mj-body background-color="#ffffff" width="600px">
36-
{% include '../../utils/email/header/default/index.mjml' %}
105+
<mj-body background-color="#f3f4f6" width="600px">
106+
<mj-wrapper background-color="#f3f4f6" padding="40px 20px">
107+
<mj-section mj-class="card-header">
108+
<mj-column>
109+
<mj-table align="left" padding="0">
110+
<tr>
111+
<td style="width:49px;vertical-align:middle;">
112+
<a href="{{ common.company.url }}" style="color:#001A39;text-decoration:none;display:inline-block;">
113+
<table align="left" cellpadding="0" cellspacing="0" role="presentation" style="width:49px;height:48px;background-color:#ffffff;border:3px solid #ffffff;">
114+
<tbody>
115+
<tr>
116+
<td style="height:17px;">
117+
<table cellpadding="0" cellspacing="0" role="presentation" style="width:100%;height:100%;background-color:#ffffff;border:0;">
118+
<tbody>
119+
<tr>
120+
<td style="width:10px;height:17px;background-color:#001A39;"></td>
121+
<td style="width:3px;height:17px;background-color:#ffffff;"></td>
122+
<td style="width:23px;height:17px;background-color:#001A39;"></td>
123+
<td style="width:3px;height:17px;background-color:#ffffff;"></td>
124+
<td style="width:10px;height:17px;background-color:#001A39;"></td>
125+
</tr>
126+
</tbody>
127+
</table>
128+
</td>
129+
</tr>
130+
<tr>
131+
<td style="height:3px;background-color:#ffffff;line-height:3px;font-size:3px;">&nbsp;</td>
132+
</tr>
133+
<tr>
134+
<td style="height:9px;">
135+
<table cellpadding="0" cellspacing="0" role="presentation" style="width:100%;height:100%;background-color:#ffffff;border:0;">
136+
<tbody>
137+
<tr>
138+
<td style="width:23px;height:9px;background-color:#006DCA;"></td>
139+
<td style="width:3px;height:9px;background-color:#ffffff;"></td>
140+
<td style="width:23px;height:9px;background-color:#006DCA;"></td>
141+
</tr>
142+
</tbody>
143+
</table>
144+
</td>
145+
</tr>
146+
<tr>
147+
<td style="height:2px;background-color:#ffffff;line-height:2px;font-size:2px;">&nbsp;</td>
148+
</tr>
149+
<tr>
150+
<td style="height:17px;">
151+
<table cellpadding="0" cellspacing="0" role="presentation" style="width:100%;height:100%;background-color:#ffffff;border:0;">
152+
<tbody>
153+
<tr>
154+
<td style="width:10px;height:17px;background-color:#001A39;"></td>
155+
<td style="width:3px;height:17px;background-color:#ffffff;"></td>
156+
<td style="width:23px;height:17px;background-color:#001A39;"></td>
157+
<td style="width:3px;height:17px;background-color:#ffffff;"></td>
158+
<td style="width:10px;height:17px;background-color:#001A39;"></td>
159+
</tr>
160+
</tbody>
161+
</table>
162+
</td>
163+
</tr>
164+
</tbody>
165+
</table>
166+
</a>
167+
</td>
168+
<td style="padding-left:14px;vertical-align:middle;text-align:left;">
169+
<a href="{{ common.company.url }}" style="color:#001A39;text-decoration:none;display:block;text-align:left;font-family:Arial, sans-serif;font-size:24px;font-weight:700;line-height:26px;">
170+
Webstack<br>
171+
Builders
172+
</a>
173+
</td>
174+
</tr>
175+
</mj-table>
176+
</mj-column>
177+
</mj-section>
178+
179+
<mj-section mj-class="hero-section">
180+
<mj-column>
181+
<mj-image src="{{ heroImageUrl }}" alt="Cloud architecture illustration" padding="0 0 32px" border-radius="8px" />
182+
<mj-text mj-class="hero-emoji">👋</mj-text>
183+
<mj-text mj-class="hero-title">
184+
Thanks for reaching out!
185+
</mj-text>
186+
</mj-column>
187+
</mj-section>
188+
189+
<mj-section mj-class="card-section">
190+
<mj-column>
191+
<mj-text mj-class="body-text">
192+
{{ greeting }},
193+
</mj-text>
194+
<mj-text mj-class="body-text" padding="0 0 24px">
195+
I received your message. I'll review it and follow up as soon as possible.
196+
</mj-text>
197+
198+
<mj-text padding="0 0 48px">
199+
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;">
200+
<tr>
201+
<td style="padding:20px 24px;">
202+
<p style="margin:0 0 12px;font-family:Arial, sans-serif;font-size:15px;font-weight:700;line-height:22px;color:#003d86;">
203+
What happens next:
204+
</p>
205+
<p style="margin:0 0 10px;font-family:Arial, sans-serif;font-size:15px;line-height:24px;color:#334155;">
206+
1. I'll review the details you shared.
207+
</p>
208+
<p style="margin:0;font-family:Arial, sans-serif;font-size:15px;line-height:24px;color:#334155;">
209+
2. You'll get a response or a clear next step within 24 hours.
210+
</p>
211+
</td>
212+
</tr>
213+
</table>
214+
</mj-text>
37215

38-
<mj-section mj-class="content-section">
39-
<mj-column>
40-
<mj-text mj-class="heading">
41-
Thanks for reaching out
42-
</mj-text>
43-
<mj-text mj-class="body-text">
44-
{{ greeting }},
45-
</mj-text>
46-
<mj-text mj-class="body-text">
47-
We received your message and shared it with our team. Someone from Webstack Builders will review it and
48-
follow up as soon as possible.
49-
</mj-text>
50-
<mj-text mj-class="body-text">
51-
If you need to add more context in the meantime, reply to this email or contact us at
52-
<a href="mailto:{{ replyToEmail }}">{{ replyToEmail }}</a>.
53-
</mj-text>
54-
</mj-column>
55-
</mj-section>
216+
<mj-text padding="0 0 24px">
217+
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;">
218+
<tr>
219+
<td style="padding:20px 24px;text-align:center;">
220+
<p style="margin:0 0 12px;font-family:Arial, sans-serif;font-size:15px;font-weight:700;line-height:22px;color:#1d4ed8;">
221+
Need to add more context?
222+
</p>
223+
<p style="margin:0 0 16px;font-family:Arial, sans-serif;font-size:15px;line-height:24px;color:#334155;">
224+
Reply to this email or send any follow-up notes directly to our team.
225+
</p>
226+
<a href="mailto:{{ replyToEmail }}" style="display:inline-block;background:#0066cc;color:#ffffff;font-family:Arial, sans-serif;font-size:16px;font-weight:600;line-height:120%;text-decoration:none;text-transform:none;padding:16px 40px;border-radius:6px;">
227+
Email Our Team
228+
</a>
229+
</td>
230+
</tr>
231+
</table>
232+
</mj-text>
233+
</mj-column>
234+
</mj-section>
56235

57-
{{ emailFooter.renderCommonFooter(
58-
notePrefix='Questions? Reply to this email or contact us at',
59-
contactEmailHref='mailto:' ~ replyToEmail,
60-
contactEmailLabel=replyToEmail
61-
) }}
236+
<mj-section mj-class="footer-section">
237+
<mj-column>
238+
<mj-text mj-class="footer-note">
239+
Questions? Contact us at <a href="mailto:{{ replyToEmail }}" style="color:#475569;text-decoration:underline;">{{ replyToEmail }}</a>
240+
</mj-text>
241+
<mj-text mj-class="footer-meta">
242+
© {{ common.currentYear }} {{ common.company.name }}, Inc.<br>
243+
{{ common.company.address }}, {{ common.company.cityStatePostal }}<br>
244+
{{ common.company.telephoneTollFree }} • {{ common.company.telephoneLocal }}
245+
</mj-text>
246+
</mj-column>
247+
</mj-section>
248+
</mj-wrapper>
62249
</mj-body>
63250
</mjml>

0 commit comments

Comments
 (0)