Accordion block
Expandable sections for keeping a long email scannable — FAQs, order details, terms — without forcing every recipient to read all of it whether they need to or not.
How it works
Mail and the hosted live view deliberately use two different implementations, not one shared markup tree. In the live view — a real browser — each item is a native <details>/<summary> element: it's more accessible (keyboard operable, a native disclosure marker, works with screen readers out of the box) and there's no reason to give that up just to share code with the mail renderer. In mailed HTML, <details> support is inconsistent across email clients, so each item instead uses the same hidden-checkbox-plus-label :checked technique the carousel and scratch-off blocks use: a hidden checkbox, a <label> styled as the clickable title, and a content <div> that's display:none until its checkbox is checked, at which point a #item-id:checked ~ .acc-content{display:block} rule reveals it. Every item toggles independently — there's no "only one open at a time" behavior.
Wherever that CSS technique isn't honored (Outlook's Word engine, or a client that strips <style> blocks), the fallback isn't a link elsewhere — it's the safest possible default: every item renders already expanded. Nothing is ever hidden behind a gesture a client can't perform, so a recipient in a stripped-down client sees the full FAQ or full order details up front, just without the collapse/expand affordance. This mirrors the same "safe default" pattern the scratch-off block uses for its prize reveal.
Configurable fields:
- Background color, padding, border (width/style/color) and border radius — apply to the accordion's outer card, shared across all items.
Each accordion item (a child node, added/reordered independently) carries:
- Title — the always-visible header text, tappable to expand/collapse.
- Content — the body text revealed underneath, rendered with line breaks preserved.
- Independent title color/title font size and content color/content font size per item, so a warning or highlighted FAQ entry can stand out from its neighbors.
An accordion is pure content, like a text or image block — expanding an item isn't an interaction event. Nothing about which items a recipient opened is recorded, and the block never appears in the responses dashboard, the CSV export, or a project webhook.
Examples
Subject
Your order questions, answered
An FAQ section at the bottom of a product-launch or onboarding email keeps the main message short while still answering the five questions everyone asks — recipients who don't need the detail never see it expanded, and recipients who do get a full expanded fallback if their client can't collapse it in the first place. An order-confirmation email can fold shipping details, return policy, and itemized pricing into three collapsed sections instead of a wall of text below the summary. A newsletter recap can use one item per story, with the headline as the title and a two-sentence summary as the content, letting recipients skim headlines and expand only what interests them.
What the static fallback looks like
<div style="border:1px solid #e5e7eb;border-radius:6px;padding:10px 14px;margin-bottom:8px" id="em-acc-1">
<label for="em-acc-1-t" style="display:block;margin:0;font-weight:600;font-size:15px;color:#111827;cursor:pointer">
Do you offer refunds?
</label>
<div class="acc-content" style="margin:8px 0 0;font-size:14px;color:#111827">
Yes — within 30 days of purchase, no questions asked.
</div>
</div>
The hidden checkbox and its :checked style rule are omitted here since they're wrapped in a kinetic-only tier — in a client that skips them, .acc-content has no rule hiding it, so it renders expanded by default exactly as shown.