# 06-Apr-2026 — make all Brevo templates fluid, consistent, and Ramblers-aligned [#223](https://github.com/nbarrett/ngx-ramblers/issues/223)

## [build 579](https://github.com/nbarrett/ngx-ramblers/actions/runs/24048805738) — [commit 8811ac3](https://github.com/nbarrett/ngx-ramblers/commit/8811ac310b5bc13eea9996998d2ff0dfbb038b4b)

_____

Introduce a shared Ramblers-aligned email base layout that all NGX transactional templates inherit from, matching the Ramblers MailChimp national campaign design system.

### Layout builder (`ramblers-email-layout.ts`) now generates complete HTML 

* Several recent Ramblers national campaigns were used as the structural reference point for the Brevo email redesign. The implementation started from those campaigns, but a few details were intentionally refined during development so the final Brevo output rendered more consistently across desktop, mobile, Outlook and the in-app preview.

| Element | Value |
|---|---|
| Container max-width | `600px` fixed desktop, responsive at `768px` and `480px` breakpoints |
| Page background | `#f4f4f4` |
| Content background | `#ffffff` |
| Body font | `Helvetica, Arial, sans-serif`, `16px`, `#222222`, `150%` line-height |
| H1 | Helvetica `40px` bold `#222222`, centered, `125%` line-height |
| H2 | Helvetica `34px` bold `#222222`, left-aligned |
| H3 | Helvetica `22px` bold `#444444`, left-aligned |
| H4 | Helvetica `20px` bold `#444444`, left-aligned |
| Body links | `#c05711` (burnt orange) with underline |
| Header treatment | White content container with linked banner image and no extra internal banner padding |
| Footer background | `#404141` (charcoal) with white `12px` centred text |
| Footer social row | Centred social icons in an email-safe table layout with vertical padding |
| Image treatment | `border: 0; height: auto; outline: none;` plus `-ms-interpolation-mode: bicubic` for Outlook |
| Outlook compat | `mso-table-lspace: 0pt` and `mso-table-rspace: 0pt`, plus related Outlook-safe table/image handling |
| CTA style | Rectangular full-width button, accent background, bold dark text (`#222222`), centred, `20px` vertical padding, no rounded corners, no border |
| Section divider | Accent-coloured horizontal rule, `6px` thick, inset to align with the body-content column rather than full edge-to-edge container width |

### Accent colour — named palette with three known values

The only token that varies by email context is the **accent colour**, used for CTA button backgrounds and divider rules. The shared footer/background typography does **not** vary by accent in the shipped implementation.

| Brand name | Hex | Usage |
|---|---|---|
| **Sunrise** | `#F9B104` | Default primary accent, CTA buttons and divider rules |
| **Rosie cheeks** | `#F6B09D` | Optional accent for divider/button variants |
| **Mint cake** | `#9BC8AB` | Optional accent for divider/button variants |

### Notes on the final implementation

- The Brevo templates were rebuilt around a shared Ramblers-aligned layout rather than separate per-template wrappers.
- Transactional and campaign templates now share the same header, divider, spacing, typography and footer system.
- The greeting/salutation position was standardised via `messageMergeFields.ADDRESS_LINE`.

### Improved WYSIWYG Preview on email send dialog


- The preview experience was also updated so the rendered output more closely matches the sent email styling.
- Add backend Brevo template rendering for realistic preview output and update committee/group-event notification preview tabs to use isolated iframe rendering rather than Angular DOM injection
- Normalise salutation handling around ADDRESS_LINE so templates and Angular notification bodies no longer duplicate greetings
- Align Ramblers-fed event contact links and CTA labels in notification previews with real event-type and remote-contact behaviour
- Centralise default email link styling in render-time substitution so Angular-generated body links inherit the Ramblers email treatment more consistently
- Refine shared layout spacing, divider alignment, mobile heading styling, footer icon layout, per-event separators, and preview scrolling based on live rendering checks
- Update StringUtilsService.asTitle to normalise tokenised values through asWords first, with unit coverage for kebab-case and camelCase inputs
* This is the preview tab of the notification page, showing all links and text correctly formatted as it will be seen in the recipients email:

![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/6018a03b-e564-4f21-b74c-f1f852c910bd.jpeg)

### Data Migration
- New migration (20260406000000) reseeds all templates on deploy.
- All 8 Brevo HTML templates converted to body-content-only snippets wrapped by the shared layout at seed time. Welcome template "your your" typo fixed. Committee notification component colours aligned with design system.
- repair Brevo template reseeding to search all templates, preserve canonical IDs, archive or remove broken duplicates, and rewire stale notification config template references during the April migration
- harden sender handling and logging for Brevo template create/update flows, including clearer template-specific failures and sender-aware recovery for invalid remote template state