Email Campaign
A mobile-first campaign email pattern for newsletters, news flashes, event promotion, member updates, supporter communications, and email marketing platforms.
When To Use
| Use | Avoid |
|---|---|
| A mobile-first campaign email pattern for newsletters, news flashes, event promotion, member updates, supporter communications, and email marketing platforms. | Avoid using this component when the content has a different job or needs a simpler plain-text treatment. |
| Use email components for messages and signatures that need to survive Outlook, Apple Mail, Gmail, mobile mail apps, forwarded replies, dark mode, blocked images, and plain-text fallbacks. Do not rely on the normal website CSS being loaded inside the recipient's email client. | Avoid changing approved colours, typography, logo artwork, or class names to create a local style guide. |
| Use the starter markup as a copy/paste baseline for websites, Ghost HTML blocks, generated pages, or print previews. | Avoid copying placeholder IDs, links, contact details, or image paths without replacing them. |
Example
|
Code
CSS Imports
Email markup should use email-safe inline styles. Do not rely on website CSS imports inside email clients.Starter Markup
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;background:#f4f5f1;color:#2a2d28;font-family:'Open Sans',Calibri,Arial,sans-serif;">
<tr>
<td style="padding:0 16px 28px 16px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;max-width:640px;margin:0 auto;background:#ffffff;">
<tr>
<td style="padding:8px 24px 0 24px;font-size:12px;line-height:1.45;color:#5f675b;"><strong style="color:#2a2d28;">Preview text:</strong> Field day reminder and local habitat update from Example organisation.</td>
</tr>
<tr>
<td style="border-top:8px solid #82A523;padding:24px;">
<p style="margin:0 0 10px 0;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5f675b;">News flash</p>
<h1 style="margin:0 0 14px 0;font-size:34px;line-height:1.12;font-weight:800;color:#1f261f;">Community planting day this Saturday</h1>
<p style="margin:0 0 18px 0;font-size:17px;line-height:1.55;color:#3f463f;">Join neighbours and volunteers to restore habitat, improve creek health, and learn simple monitoring techniques.</p>
<p style="margin:0 0 24px 0;"><a href="https://landcare.dev" style="display:inline-block;background:#40433f;color:#ffffff;text-decoration:none;font-size:15px;line-height:1.2;font-weight:800;padding:12px 16px;">Register for the field day</a></p>
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-top:1px solid #d7dbd2;">
<tr>
<td style="padding-top:16px;font-size:14px;line-height:1.55;color:#3f463f;">
<strong>When</strong><br>Saturday, 9:00 am to 12:00 pm<br><br>
<strong>Where</strong><br>Creek reserve meeting point
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:18px 24px;border-top:1px solid #d7dbd2;font-size:12px;line-height:1.55;color:#5f675b;">You are receiving this update from Example organisation. Include required unsubscribe, postal address, privacy, and sender details according to the email platform and applicable law.</td>
</tr>
</table>
</td>
</tr>
</table>Class Reference
No Landcare CSS classes are required for this starter markup.
Email Campaign Pattern Guidance
Use Email Campaign for newsletters, news flashes, supporter updates, member notices, event promotion, fundraising communication, and Mailchimp, Campaign Monitor, Brevo, HubSpot, or similar campaign-platform messages.
| Area | Use | Avoid |
|---|---|---|
| Preview text | Write a short supporting line that appears in many inbox previews before the email is opened. Some platforms call this the preheader. | Avoid leaving the preview text to be auto-filled from navigation, image alt text, or unsubscribe copy. |
| Hierarchy | Use one campaign title, a short lead, one primary action, and clear story blocks. | Avoid making every link, image, or story visually equal. Campaigns still need one first-read message. |
| Mobile | Use a mobile-first single-column structure, large enough links, readable body copy, and short paragraphs. | Avoid multi-column layouts that collapse badly, tiny text, or image-only story cards. |
| Branding | Use approved brand colours sparingly, keep organisation names visible in text, and use approved logo artwork only. | Avoid overloading the campaign with every brand colour or making unofficial logo combinations. |
| Compliance | Include required unsubscribe, sender identity, postal address, privacy, and platform footer details. | Avoid removing campaign-platform compliance fields to make the email look cleaner. |
| Testing | Preview in the campaign platform and send test messages to Outlook, Apple Mail, Gmail, and mobile clients before release. | Avoid approving from the platform editor alone. |
Campaign Variants
| Variant | Use |
|---|---|
| News flash | A short timely update with one message and one action. |
| Newsletter | A periodic update with several story blocks and a clear top story. |
| Event campaign | A focused promotion with date, place, registration action, access notes, and reminders. |
| Supporter update | A relationship email that reports progress, thanks people, and invites a next step. |
Review Notes
Web
Use email components for messages and signatures that need to survive Outlook, Apple Mail, Gmail, mobile mail apps, forwarded replies, dark mode, blocked images, and plain-text fallbacks. Do not rely on the normal website CSS being loaded inside the recipient's email client.
Emails are not print-first materials, but they should print legibly when someone prints a message thread. Keep content narrow, text-based, and readable without background images.
States And Variants
Document new message, reply, forwarded message, desktop received, mobile received, image-blocked, dark-mode, plain-text, and copied-into-client variants.
Checklist
- Brand colours, typography, and logo use are inherited from the approved master brand.
- The first-read message or action is clear.
- Labels, headings, links, and alternative text are meaningful.
- Keyboard focus, colour contrast, and reading order are covered where the component is interactive.
- The component survives its final output: mobile, desktop, Ghost CMS, A4 print, poster, signage, or email.