Transactional Email

A mail-client-safe digital letterhead pattern for confirmations, reminders, follow-ups, basic announcements, and practical organisation correspondence that does not require an email campaign platform.

When To Use

Use	Avoid
A mail-client-safe digital letterhead pattern for confirmations, reminders, follow-ups, basic announcements, and practical organisation correspondence that does not require an email campaign platform.	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

Example organisation

Community planting day update

Thank you for registering. Please bring enclosed shoes, sun protection, water, and weather-appropriate clothing.

Open event details

Example organisation
PO Box 000, Local Town NSW 0000
hello@example.org | example.org
This email was sent for practical organisation correspondence. Please contact the sender organisation if you received it in error.

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:#ffffff;color:#2a2d28;font-family:'Open Sans',Calibri,Arial,sans-serif;">
  <tr>
    <td style="padding:24px 20px;">
      <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;max-width:600px;">
        <tr>
          <td style="border-top:6px solid #82A523;padding-top:18px;">
            <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;">Example organisation</p>
            <h1 style="margin:0 0 14px 0;font-size:28px;line-height:1.14;font-weight:800;color:#1f261f;">Community planting day update</h1>
            <p style="margin:0 0 16px 0;font-size:16px;line-height:1.55;color:#3f463f;">Thank you for registering. Please bring enclosed shoes, sun protection, water, and weather-appropriate clothing.</p>
            <p style="margin:0 0 24px 0;font-size:15px;line-height:1.55;color:#3f463f;"><a href="https://landcare.dev" style="color:#2f5d48;text-decoration:underline;font-weight:700;">Open event details</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:14px;font-size:12px;line-height:1.55;color:#5f675b;">
                  <strong style="color:#2a2d28;">Example organisation</strong><br>
                  PO Box 000, Local Town NSW 0000<br>
                  <a href="mailto:hello@example.org" style="color:#2f5d48;text-decoration:underline;">hello@example.org</a> | <a href="https://example.org" style="color:#2f5d48;text-decoration:underline;">example.org</a><br>
                  This email was sent for practical organisation correspondence. Please contact the sender organisation if you received it in error.
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Class Reference

No Landcare CSS classes are required for this starter markup.

Transactional Email Pattern Guidance

Use Transactional Email for confirmations, reminders, follow-ups, meeting notes, basic announcements, and practical organisation correspondence. It is the right pattern when a person or organisation is sending practical email from Outlook, Apple Mail, Gmail, or a simple system notification rather than building a newsletter or marketing campaign. Treat it as a digital letterhead: the message should have a clear sender, useful content, and restrained organisational information at the bottom.

Email is a constrained digital environment. A Landcare email should feel consistent with the design system, but the implementation must account for Outlook, Apple Mail, Gmail, mobile clients, forwarded messages, blocked images, and dark-mode adjustments.

Area	Use	Avoid
Typography	Use Open Sans where available, with a strong fallback stack of Calibri, Arial, and sans-serif. Keep body copy around 15-16px, captions around 12-13px, and line height generous.	Avoid relying on webfont loading, display-scale type, tight leading, or CSS that may be stripped by the email client.
Layout	Use a narrow content measure, simple one-column layouts, inline styles, and predictable spacing.	Avoid complex grids, background images, scripts, embedded forms, hover-only interactions, or stylesheet-only presentation.
Links	Use descriptive link text, visible underlines, and complete fallback information where needed.	Avoid colour-only links, bare tracking URLs, or calls to action that disappear when images are blocked.
Footer	Include the group or organisation name, general contact email, website, postal or office details where relevant, and a short practical note about why the email was sent.	Avoid campaign-style unsubscribe footers unless the email is being sent through a campaign platform or legal context requires it.
Printed email	Keep the message narrow, text-based, and readable if printed. Some clients may honour simple inline styles, but print output is controlled by the recipient's email app and browser.	Avoid relying on a full PrintView CSS layer inside email. Most email clients will not preserve it reliably.
Boundary	Use this pattern for lightweight organisation correspondence, notifications, and operational updates.	Avoid using this pattern for newsletters, news flashes, supporter updates, or campaign-platform emails. Use Email Campaign instead.
Testing	Send test emails to Outlook desktop, Outlook web, Apple Mail on macOS and iOS, Gmail, and at least one mobile viewport.	Avoid approving an email only from the composer preview, because the recipient view may render differently.

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.

Print

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.