Docs Block Reference Flip Box

Flip Box

A flip box is a self-contained card with two faces — Front and Back — that animate between each other. Front shows a Title + Content; Back shows a Title + Content + a single Button.

The flip happens on interaction (hover / tap). The animation is one of 11 named engines, each with its own visual treatment.

When to use it

  • Team / portfolio cards where the back reveals a longer bio
  • Service cards where the back has a "Learn more" CTA
  • Cards that need a deliberate reveal moment (the flip is the

    • feature, not background detail)

When not to use it

  • Static cards without an interaction — use a Rows cell

    • styled as a card

  • Cycling between many slides — use Carousel
  • Long-form content that visitors should read without flipping —

    • the Back side hides content; visitors miss it if they don't flip

Settings

Animation type — 11 effects (3-column button grid, default: Spring)

  • Zoom — scales between front and back
  • Spring — bouncy 3D flip (uses Flip direction control)
  • Cube — rotating cube faces (uses Flip direction control)
  • Void — depth-into-void transition
  • Drift — drifting card replacement
  • Depth Rise — depth-axis rise effect
  • Push — directional push (uses Slide direction control)
  • Shutter — segmented shutter slide
  • Morph — morph between faces
  • Glitch — digital glitch transition
  • Shatter — shatter-and-rebuild
  • Stack — stacked-card swap

Speed — slider, 150–1400ms (default: 600)

Animation duration. Stepping in increments of 50.

Flip direction — Horizontal · Vertical (Spring + Cube only)

Hidden for other effects. Sets the rotation axis.

Slide direction — Left · Right · Up · Down (Push only)

Hidden for other effects. Sets the push direction.

Front / Back content (sub-tabs)

Two tabs at the top of the content section: Front (active by default) and Back.

Front — fields

  • Title — rich text input (1 row)
  • Content — rich text input (2 rows)
  • Background — colour swatch
  • Text — colour swatch

Back — fields

  • Title — rich text input
  • Content — rich text input
  • Button Text — plain text input
  • Button Link — URL input
  • Background — colour swatch
  • Text — colour swatch

The Back side has a button by design — Front does not. Use the Back's button as the call-to-action.

Sliders (apply to whole flip-box)

  • Height — 70–500px (default: 250)
  • Radius — 0–30px (default: 0). Outer corner roundness.
  • Title Size — 12–72px (default: 24)
  • Content Size — 10–32px (default: 14)
  • Max Width — 200–1200px (default: 600). Caps the card's

    • outer width.

  • Padding — 0–80px (default: 32). Inner padding around the

    • content on both faces.

Border (collapsible)

Border colour, width, radius — same as the standard Border widget on other blocks.

Per-device overrides

Animation type, Speed, Height, Title/Content Size, Padding, Max Width all have separate Tablet and Mobile values.

Common overrides:

  • Animation type — fall back to Zoom on mobile (the exotic

    • 3D effects can be janky on lower-powered devices)

  • Speed — slightly faster on mobile (300–400ms)
  • Title Size / Content Size — smaller on mobile

Common patterns

Team card

Front: portrait Title + name. Background #f5f5f5 · Text #1d2327. Back: short bio Title + role Content + Button Text "View profile" linking to a profile page. Animation Spring, Flip direction Horizontal, Speed 600.

Service card with CTA

Front: service name Title + 1-line summary. Light background. Back: longer description + Button "Learn more". Animation Push, Slide direction Left, Speed 500.

Discreet hover-reveal card

Front: bold Title only. Back: small description Content + tiny Button "Read". Animation Zoom for the smallest visual disruption. Padding 24, Height 200.

Related

  • blocks/rows — for static card grids without flipping
  • blocks/carousel — for cycling between cards
  • blocks/section — wrap a Flip Box in a Section for full-page

    • hero treatment

  • concepts/responsive-overrides — per-device animation choices
  • recipes/feature-grid — pattern for using flip-boxes as a 10-card responsive feature deck

Gotchas

  • Never lead a title field with <br> to centre text vertically.

    • Use vertical_align: center instead. A leading <br> pushes text down on every device — including mobile, where you don't have the room — and breaks alignment across a row of cards.

  • section_max_width is a desktop design knob, not a mobile cap.

    • Set it to 0 (or leave unset) on cards that live inside a Grid; the grid's columns_mobile controls per-row width on phones. Capping individual cards to a small value (e.g. 200) crushes them in 1-column mobile layouts.

  • **Per-device Height / Max Width sliders are honoured on the frontend

    • since 2.1.823.** Earlier the renderer read desktop-only; if you set height_mobile = 110 and saw the desktop value paint anyway, that was the bug, not a save problem.