Flip Card
A two-faced card that turns over in 3D on a spring from a click, hover or trigger, with focus moved to the visible face and a crossfade under reduced motion.
Preview
Word 12 of 40
Sonder
/ˈsɒn.dər/ · noun
Storage
68 / 100 GB
Team invite
Priya Raman
priya@pebble.example · Editor
Joins 6 projects and the design channel.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| flipped | boolean | — | Controlled state. Pair with onFlippedChange. |
| defaultFlipped | boolean | false | Initial state when uncontrolled. |
| onFlippedChange | (flipped: boolean) => void | — | Called when the card flips. |
| axis | "x" | "y" | "y" | y turns left to right, x turns top to bottom. |
| flipOn | "click" | "hover" | "manual" | "click" | Extra gesture besides FlipCardTrigger: a click on the card body, mouse hover, or triggers only. |
| perspective | number | 1200 | CSS perspective in px. |
| FlipCardTrigger asChild | boolean | false | Render the child (e.g. a Button) as the flip trigger. Put one on each face. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.