This builds a card that turns over to show a second face — a name on the front, a biography on the back; a price on the front, what it includes on the back. The turn is CSS; the part that took the real work is making it usable without a mouse.
What you fill in
- Front Card — required, and it nests other paragraphs rather than being a text box. Anything the suite offers can be a face.
- Back Card — also required, and also nested.
- 3D Box Height — required, in pixels. Both faces share it, so measure the longer one.
- Flip axis — a two-option list choosing whether the card turns vertically or horizontally.
The usual title, title tag and title alignment sit above the faces, and the Display tab's colours, borders, radius, shadow and spacing apply to the box as a whole.
Three ways the card turns, and why that matters
Hovering the box turns it, and so does moving focus into the face being shown. Neither helps somebody on a keyboard who wants to read the back, so the module also renders a real flip control in the top-right corner of the card. It is a native button, so Enter and Space both work, and its state is sticky — press it and the card stays turned when the pointer wanders away.
Two details are worth knowing because they are easy to get wrong in a hand-built version. First, backface-visibility is purely visual: without help, links on the hidden face stay in the tab order while invisible. The script applies inert and aria-hidden to whichever face is turned away, so only what you can see is reachable. Second, the button's name changes with the card — "Show the back of…" becomes "Show the front of…" — because a fixed label describes the wrong side once the card has already turned.
Without JavaScript the control never appears at all, so a reader is never shown a button that cannot work.
Enabling it
Turn on paragraph_bundle_3d_flip_box on Drupal 11.3 or 12, run drush cr, and add a box with a short front and a longer back to find your height. Details on the Paragraphs Bundles module page.
If your project needs a custom bundle or module rather than a stock one, Drupal development services covers it, and recent projects show the range.
