Email Campaign
A mobile-first campaign email pattern for newsletters, news flashes, event promotion, member updates, supporter communications, and email marketing platforms. This is a digital component: Interface parts for websites, apps, online forms, documentation sites, and Opries-style repositories.
Purpose
The Email Campaign component gives Landcare groups a repeatable way to solve this communication problem without rebuilding the layout from scratch. It should inherit approved colour, typography, spacing, grid, accessibility, and logo guidance from the design system.
When To Use
| Use | Avoid |
|---|---|
| Use when the content or interaction matches the component purpose and benefits from a familiar pattern. | Avoid inventing a one-off layout when this component already solves the job. |
| Use the component with clear hierarchy, generous spacing, and one obvious first-read message or action. | Avoid adding extra borders, colours, icons, or type styles just to make the component feel more designed. |
| Use approved Landcare tokens so group forks can inherit brand updates cleanly. | Avoid local colour, typography, or logo changes that break brand consistency. |
Web Guidance
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.
- Structure: use semantic HTML, predictable reading order, and responsive sizing.
- Accessibility: support keyboard access, visible focus, meaningful labels, sufficient contrast, and colour-independent meaning.
- Layout: align the component to the page grid where it is a major element; use local spacing inside the component.
- State: document default, hover, focus, active, disabled, loading, error, and success states where relevant.
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. |
Digital Example
Use this for campaign-platform emails such as newsletters, news flashes, event promotion, supporter updates, and member communications. It gives a clear masthead, preheader, story area, action, and compliant footer structure.
|
Implementation
Email components should be generated from the design system source, but the final email or signature should use email-safe inline styling. Normal website classes such as .lds-type-body or .lds-button are useful references, but many mail clients will not load external CSS reliably.
| Output | Use |
|---|---|
| Rendered preview | Use for people installing signatures. Copy the rendered, formatted block so spacing and links come across. |
| HTML source | Use for maintainers, automated generators, or managed email-signature tools. |
| Plain text fallback | Use where a client strips rich HTML, or for accessibility and archiving requirements. |
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 Your Name Landcare.</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 Your Name Landcare. Include required unsubscribe, postal address, privacy, and sender details according to the email platform and applicable law.</td>
</tr>
</table>
</td>
</tr>
</table>Print Guidance
Emails are not print-first artefacts, but they should print legibly when someone prints a message thread. Keep content narrow, text-based, and readable without background images.
- Format: size the component for the final artefact, viewing distance, paper stock, and reproduction method.
- Legibility: use Open Sans, strong contrast, and line lengths that suit the medium.
- Production: preserve margins, trim safety, logo clear space, and enough room for handwriting where required.
- Translation: when the web component becomes print, replace interaction states with clear instructions, labels, QR codes, or contact details.
States And Variants
Document new message, reply, forwarded message, desktop received, mobile received, image-blocked, dark-mode, plain-text, and copied-into-client variants.
| Variant | Use |
|---|---|
| Default | The standard form used across normal web and print contexts. |
| Emphasis | A higher-weight version for primary messages, urgent information, or first-read actions. |
| Compact | A denser version for tables, sidebars, forms, footers, and constrained print areas. |
| Example | A filled version for documentation, templates, learning resources, and production references. |
Anatomy
| Part | Guidance |
|---|---|
| Container | Use only when grouping helps. Prefer quiet rules and spacing over heavy boxes. |
| Title or label | Make the component purpose clear in plain language. |
| Body content | Keep copy short, scannable, and aligned to the typography hierarchy. |
| Action or outcome | Make the next step visible, especially in forms, posters, signs, and templates. |
Review Checklist
- Brand: approved colour, typography, logo clear space, and tone.
- Hierarchy: one clear first read, then supporting information.
- Grid: major edges align to the page, print, or component grid.
- Accessibility: contrast, labels, focus, reading order, and colour-independent meaning are covered.
- Output: the component survives the final medium: mobile, desktop, A4, poster, signage, social, or presentation.