Flip Card

Card with front and back that flips on interaction

Basic Usage

HoverFront SideHover to flip

BackBack SideHidden content revealed

ClickClick MeClick to flip

BackBack SideClick again to flip back

VerticalVertical FlipHover to flip vertically

BackBack SideVertical animation

pnpm add @corew500/ui

import { FlipCard } from "@corew500/ui/flip-card"

<FlipCard>Content</FlipCard>

Axis	Values	Default
`size`	smdefaultlgfull	default

Prop	Type	Default	Description
`trigger`	enum	`hover`	How to trigger the flip
`direction`	enum	`horizontal`	Direction of the flip
`flipped`	enum	—	Controlled flipped state
`onFlippedChange`	(flipped: boolean) => void	—	Callback when flipped state changes
`defaultFlipped`	enum	`false`	Default flipped state (uncontrolled)
`size`	enum	—	—

`FlipCardTrigger` renders a native `<button>` for keyboard and screen reader access
Hidden face is marked with `inert` attribute, removing it from tab order and screen readers
For hover trigger, include `FlipCardTrigger` in each face for keyboard-only users

- Root container has `role="group"` and `aria-roledescription="flip card"` when an accessible name is provided
Provide `aria-label` or `aria-labelledby` on the FlipCard for best screen reader experience (e.g., `<FlipCard aria-label="Product card">` announces "Product card, flip card")
Without an accessible name, `aria-roledescription` is omitted per ARIA spec requirements
Default `aria-label` on trigger is "Flip to back" / "Flip to front" based on state