FlipCards

learning · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

Self-test cards: the learner reads the front (a term or question), thinks, then reveals the back (the definition or answer). Use for vocabulary, definitions and quick recall; not for graded questions.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "FlipCards",
  "props": {
    "title": "Brewing vocabulary",
    "intro": "Say the definition out loud, then check it.",
    "cards": [
      {
        "front": "Extraction",
        "back": "Dissolving flavour compounds from the grounds into the water."
      },
      {
        "front": "Bloom",
        "back": "The first 30 seconds of a pour-over, when fresh grounds release carbon dioxide."
      },
      {
        "front": "TDS",
        "back": "Total dissolved solids: how much of the cup is coffee, as a percentage."
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
id	string		Anchor id. max length 40, default "cards"
title	string		Section title. max length 160
intro	string		One or two sentences under the title. max length 600
cards	array of objects	yes	Cards. min 1 items, max 24 items
cards[].front	string	yes	Term or question. max length 200
cards[].back	string	yes	Definition or answer. max length 600

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Brewing vocabulary
Extraction - Dissolving flavour compounds from the grounds into the water.
Bloom - The first 30 seconds of a pour-over, when fresh grounds release carbon dioxide.
TDS - Total dissolved solids: how much of the cup is coffee, as a percentage.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "cards": []
}

Issues:

• /cards fewer than 1 items

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 18 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.