Cards & Expandables
Expandable Card
Card that expands into a focused overlay on desktop and a draggable bottom sheet on mobile, with three snap points. Portal-rendered, focus-trapped, scroll-locked and reduced-motion aware.
$ velocityx add expandable-card
Built for react.
Needs react, react-dom already installed
as peer dependencies.
An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.
Full docs for Expandable Card →
Expandable Card
Card that expands into a focused overlay on desktop and a draggable bottom sheet on mobile, with three snap points. Portal-rendered, focus-trapped, scroll-locked and reduced-motion aware.
Preview isn't available in this repo yet — install with the CLI to view the source
Props
This component's API isn't documented yet.
Files this creates
The CLI writes these paths into your project, relative to its root — nothing else moves.
components/velocity/expandable-card/ExpandableCard.jsx
components/velocity/expandable-card/useSheetDrag.jsUsing the Expandable Card component
Install it with velocityx add expandable-card.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Cards & Expandables.
A stack of independent cards where opening one smoothly expands its detail and closes any other open card, while every card's summary stays legible whether open or closed. Height animates off the panel's real measured content, so there's never a layout jump.
reactThe loading shape for a grid of cards — media block, title line, sub line, sized to match real card dimensions so the grid doesn't shift when data arrives. Ships media, list and stat variants; static (not faster) under reduced motion and hidden from screen readers.
reactA directory entry — avatar, name, role, a short list of real tel/email/location contact methods, and one primary action. Built for a staff directory or "your account manager" block, not a hover-reveal bio tile.
reactFull-bleed photo card with title and copy sat over a bottom scrim, tuned so white text stays readable against a bright sky shot exactly as reliably as a dark one — no manual contrast tweaking per image.
react