Explore interactions

Basic Card

A title, an optional description, an optional footer — the structural card the rest of the family builds on.

Media Card

An image or video fills the top edge-to-edge, with title, description and footer below.

Horizontal Card

Media on the left, content on the right — stacks to media-on-top below a configurable breakpoint.

List Card

A card whose body is a divided list of rows rather than prose.

Profile Card

Avatar, name, subtitle, a tag group and an optional action region.

Stat Card

A headline number with a label, an optional up/down/flat trend, and a mini-chart slot.

Pricing Card

Price, period, a feature list and a CTA, with an opt-in highlighted/recommended state.

Form Card

A form's visual container — title area, field slot, action footer. Never renders a <form> itself.

Notification Card

Icon, title, description, an optional close button and actions, in four semantic states.

Empty State Card

A centered icon/illustration slot, title, description and a guidance button for empty content areas.

Jelly Card

A soft elastic surface that responds naturally to pointer movement.

• jelly
• depth
• glow

Magnetic Button

A button that leans toward the pointer as it approaches.

• magnetic

Glow Border

A border that lights up where the pointer is.

• glow

Fluid Tabs

Tabs whose indicator flows from one item to the next.

• morph

Pill Nav

Real navigation links with a shared pill background that slides to whichever one is current.

• morph

Liquid Card

A translucent surface where light gathers under the pointer.

• liquid
• glow
• depth

Morph Card

A card that expands into its own detail view without a cut.

• morph
• depth

Floating Dock

A compact contextual dock whose active destination expands with its label and whose pointer response stays an optional desktop enhancement.

• proximity
• magnetic
• depth

Gooey Menu

A section switcher whose selected surface stretches between items with a restrained shared-origin connection.

• liquid
• morph
• elastic

Spotlight Card

A card lit under the pointer, with nothing moving.

• glow

Tilt Card

A rigid card that turns to face the pointer.

• depth
• glow

Lift Card

Transform and box-shadow only, no pointer-event listeners — the cheapest card for grids that need many at once.

Zoom Card

Media Card's sibling: the media scales up inside its own clipped frame on hover.

Gradient Border Card

A static two-stop gradient ring, painted once and never animated.

Border Beam Card

A point of light that continuously travels the border ring.

• glow

Glow Card

An ambient bloom behind the card that widens on hover — not pointer-tracked.

• glow

Shine Card

A diagonal gloss streak sweeps across the surface on hover.

Reveal Card

Media fills the frame; a caption slides up over it on hover, and is always visible on touch.

Flip Card

A 3D flip revealing a back face — hover-driven with hover, tap-driven on touch.

• depth

Expand Card

Discloses more of itself on click, built on GridReveal.

Stack Card

A single card with 1–3 decorative layers peeking out behind it, fanning wider on hover.

Elastic Toggle

A preference switch whose track and thumb redistribute together and settle with an explicit On/Off state.

• elastic
• jelly

Ripple Button

A button that answers where it was pressed.

• elastic
• liquid