Expand Card Grid React component
A 2x2 grid of image cards that expand to fill the frame on click, revealing title/description/CTA, with keyboard arrow navigation between cards and swipe-to-close on touch.
About the Expand Card Grid component
Expand Card Grid is a free 2×2 grid of image cards where clicking one expands it to fill the whole frame and reveals its title, description and a call-to-action button. Arrow keys move between cards, Enter or Space opens one, Escape closes it, and on touch screens a swipe closes it.
Transition length, gap, corner radii, colors, title and description sizes, the button and an optional index number are props.
When to use it
Use it for four services, products, programmes or destinations, where each needs a picture and a short pitch but the page shouldn't be long.
Installation
Add the Expand Card Grid component to your project with the shadcn CLI. It lands in components/expand-card-grid.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/expand-card-gridOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<ExpandCardGrid /> accepts 15 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| items | { src?: string; title: string; description?: string; buttonText?: string; buttonHref?: string }[] | DEFAULT_ITEMS |
| transitionDuration | number | 0.6 |
| gap | number | 0 |
| cardRadius | number | 0 |
| overlayRadius | number | 0 |
| cardColor | string | "#212121" |
| titleSize | number | 32 |
| descriptionSize | number | 14 |
| accentColor | string | "#ffffff" |
| showButton | boolean | true |
| buttonTextColor | string | "rgba(255,255,255,0.55)" |
| buttonBorderColor | string | "rgba(255,255,255,0.35)" |
- items{ src?: string; title: string; description?: string; buttonText?: string; buttonHref?: string }[]Default: DEFAULT_ITEMS
- transitionDurationnumberDefault: 0.6
- gapnumberDefault: 0
- cardRadiusnumberDefault: 0
- overlayRadiusnumberDefault: 0
- cardColorstringDefault: "#212121"
- titleSizenumberDefault: 32
- descriptionSizenumberDefault: 14
- accentColorstringDefault: "#ffffff"
- showButtonbooleanDefault: true
- buttonTextColorstringDefault: "rgba(255,255,255,0.55)"
- buttonBorderColorstringDefault: "rgba(255,255,255,0.35)"
Show all 15 propsShow fewer
| closeIconColor | string | "#ffffff" |
| showIndex | boolean | false |
| indexColor | string | "rgba(255,255,255,0.5)" |
- closeIconColorstringDefault: "#ffffff"
- showIndexbooleanDefault: false
- indexColorstringDefault: "rgba(255,255,255,0.5)"
Collections
Use-case pages that compare Expand Card Grid with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Expand Card Grid FAQ
- How many cards does it show?
- It's built as a 2×2 grid, so four items.
- Is it keyboard accessible?
- Yes: arrow keys move between cards, Enter or Space expands one, and Escape collapses it.
- Can I hide the button?
- Yes, showButton={false}.
- What does each card need?
- A title, and optionally an image (src) and a description.
