Expandable cards
List or grid of cards that expand into a modal with Motion shared-layout morphing.
Preview & code — list
GFA Studio CLI · Coming soon
Lotus
Soen
Epitaph
Antimatter
Ankaramı Yanacak
Seyit Yıldırım
Sen Olsan Bari
Aleyna Tilki
Untouchable
Anathema
Preview & code — grid
GFA Studio CLI · Coming soon
Lotus
Soen
Epitaph
Antimatter
Ankaramı Yanacak
Seyit Yıldırım
Sen Olsan Bari
Aleyna Tilki
Untouchable
Anathema
Installation
CLI
GFA Studio CLI — Coming soon
The `npx gfa-studio` installer is not published yet. Use Manual install below or download the artifact JSON.
Artifact JSON
https://ui.gkhn.dev/gfa/expandable-card.jsonManual
- Download the component source from https://ui.gkhn.dev/gfa/expandable-card.json (or copy from this repo: apps/web/src/blocks/gfa/expandable-card.tsx).
- Place it in your project (for example: ./src/blocks/gfa/expandable-card.tsx) and adjust imports/aliases.
- Ensure cn from @/lib/utils exists.
- Theme tokens and utilities should align with globals.css.
Dependencies
Uses Motion (motion/react, AnimatePresence, motion with layoutId), and the useOutsideClick hook. Body scroll locks while a card is open; Escape and outside click close. Client-only.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | ExpandableCardData[] | — | Items to render; each needs stable id, title, description, image src, CTA fields, and content (node or render function) for the expanded body. |
| variant | "list" | "grid" | — | list for horizontal rows with a row CTA; grid for a responsive tile grid (no row CTA; modal CTA animates in). |
| className | string | — | Extra classes merged onto the outer ul element (e.g. max width for grid). |