Docs Block Reference Unfold

Unfold

A list of expandable items where each item has a Title (always visible) and Content (revealed on expand). Four visual modes control how the reveal animates.

It's the FAQ / accordion / disclosure pattern.

When to use it

  • FAQ list
  • Process / step-by-step disclosure
  • Long content broken into collapsible chapters
  • Tile grid where each card flips/slides to reveal more (Tiles

    • mode)

When not to use it

  • Two-sided cards triggered by hover/tap — use Flip Box
  • Static feature list — use Table

Items (repeater)

Each row has:

  • Drag handle (left)
  • Title — text input
  • Expand button — opens an inline textarea for the back-side

    • Content

  • × Remove

Default starter set: 3 items.

Add Item button below the list.

Mode — Flood · Focus · Stack · Tiles (default: Flood)

The visual reveal engine. The rest of the panel adapts to the choice.

  • Flood — content unfolds beneath the title with a Bordered

    • Card style

  • Focus — spotlight reveal, dims the rest while one item is

    • open (uses Dim Blur slider)

  • Stack — vertical card stack with scroll-tied reveal (uses

    • Number Size slider for numeric prefix)

  • Tiles — grid of cards (2 / 3 / 4 cols); each tile expands

    • via Flip / Slide / Fade / Push

Flood / Focus shared colours

3-column grid (2 rows): Title · Content · Background / Accent · (Border / Text Area)

  • Title — header text colour (default: dark)
  • Content — body text colour (default: #555)
  • Background — card fill (Flood) or text-area fill (Focus)
  • Accent — chevron + active-row accent
  • Border — outer border colour (default: dark text colour)

Focus mode adds a Dim Blur slider (0–4px, default 1) for how strongly closed items are dimmed.

Both modes have Radius sliders.

Tiles mode

Effect — Flip · Slide · Fade · Push (default: Flip)

How a tile transitions to its expanded state.

Columns — 2 · 3 · 4 (default: 3)

Tile grid columns.

Numbers — checkbox (default: on)

Show numeric prefix on each tile (1, 2, 3…).

Tiles colours (3-up grid × 2)

Title · Content · Card / Accent · _ · Border

Tiles sliders

  • Card Height — 80–400px (default: 180)
  • Gap — 0–40px (default: 16). Spacing between tiles.
  • Radius — 0–24px (default: 8)
  • Title Size — 10–28px (default: 15)
  • Content Size — 10–24px (default: 14)
  • Number Size — 8–24px (default: 11)
  • Width — 30–100% (default: 100)

Stack (Scroll) mode colours / sliders

3-up grid: Title · _ · Card / Border · _ · Content

Sliders: Height (100–500px, default 200), Radius (0–20px, default 0).

Shared font sliders (all modes except Tiles)

  • Title Size — 10–28px (default: 15)
  • Content Size — 10–24px (default: 14)
  • Number Size (Stack only) — 8–24px (default: 11)
  • Width — 30–100% (default: 100)

Entrance animation

Standard widget at the bottom.

Per-device overrides

Mode, colours, heights, and font sizes have per-device values.

Common overrides:

  • Mode — switch from Tiles to Flood on mobile (less

    • horizontal space)

  • Columns (Tiles) — drop from 3 to 2 on tablet, 1 on mobile

Common patterns

Standard FAQ

Mode Flood · Border off · Radius 8 · Title 16 · Content 14.

Spotlight reveal

Mode Focus · Dim Blur 2 · Accent dark · Radius 0.

Numbered scroll story

Mode Stack · Show Numbers (built-in) · Card Height 280 · Title 18 · Content 14.

3-column "How it works" tiles

Mode Tiles · Effect Flip · Columns 3 · Numbers on · Card Height 220 · Title 16 · Content 13.

Related

  • blocks/flip-box — when each item is a single hover-triggered

    • card (no list / accordion behaviour)

  • blocks/table — for a plain feature list with no expand

    • behaviour