Flashcard deck block
A flip card for vocabulary or fact drilling: add a Flashcard deck, then drop Flashcard children into it, each with its own front (question) and back (answer) text, plus an optional image on either side. It's a study aid, not a question — there's nothing to score or collect.
How it works
Each card in the deck flips independently, using the same hidden-checkbox-plus-:checked-CSS mechanism the accordion and scratch-off blocks use — no JavaScript, no reliance on a native HTML disclosure element. Tapping a card checks its own hidden checkbox, which hides that card's front face and shows its back face via a scoped CSS rule; every other card in the deck is wired to its own independent checkbox, so flipping one has no effect on the rest.
Unlike most of the studio's other kinetic blocks, flashcard deck's mail and live-view rendering are genuinely unified rather than diverging into separate mail/live-view code paths — a :checked checkbox-and-label flip has no "better" native alternative to upgrade to in a real browser the way, say, a poll's link-based fallback gets replaced by a real form. So the live view renders exactly the same markup mail does.
Wherever that CSS rule isn't honored — Outlook, or any client that doesn't support the kinetic tier — front and back simply render stacked on top of each other statically instead of flipping, each labeled with a plain "Q:" / "A:" prefix so the pairing is still legible without any interaction at all. Nothing is ever hidden behind a gesture a client can't perform; the fallback shows the full content of every card, front and back, all at once.
A flashcard deck records nothing. There's no vote, submission, or reveal event for a card flip, and the block declares no capability that would register it into the responses dashboard, CSV export, click heatmap, or any other rollup — it's pure study content, the same category as a plain image or text block, just interactive.
Configurable fields on the Flashcard deck itself are limited to card styling — Background color, padding, border, and border radius — since everything content-specific lives on the individual cards.
Each Flashcard child carries:
- Front (question) and Back (answer) text, each with its own color and font size.
- Front image and Back image — optional, rendered above the corresponding face's text; picked from your media library rather than typed as a URL.
Add, remove, or reorder cards freely in the tree, the same way you'd manage poll options or quiz questions.
Examples
Subject
Study these before Friday's quiz
A language-learning newsletter can send a themed set of vocabulary cards each week — front in the target language, back with the translation and a usage note — see Education for the broader pattern of delivering learning content over email. A certification-prep sequence can use one deck per topic area as a spaced-repetition-style refresher between practice quizzes (pair it with a Quiz block later in the same send to test recall right after the drill). An onboarding email for a technical product can use flashcards for quick term definitions — front: the term, back: what it means in your product — as a lighter alternative to a glossary page nobody would otherwise open.
What the static fallback looks like
<div style="border:1px solid #e5e7eb;border-radius:8px;padding:14px;
margin-bottom:8px;text-align:center">
<div class="fc-front">
<p style="margin:0;font-weight:600;font-size:16px;color:#111827">
Q: What is the powerhouse of the cell?
</p>
</div>
<div class="fc-back">
<p style="margin:0;font-size:16px;color:#111827">
A: The mitochondria
</p>
</div>
</div>
Both faces render unconditionally; only a kinetic-tier stylesheet (omitted here) hides one face at a time and swaps them on tap — without it, front and back simply stack, each labeled "Q:" / "A:".