Bento Card

A visual above, title below; on hover the visual lifts and a 'learn more' arrow slides in. Spans columns and rows; stacks on phones. Comes with BentoGrid.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add bento-card

Usage

Example

import { BentoCard } from "@/components/galactrex/bento-card";

<BentoGrid><BentoCard title="Layers" span={{ cols: 2, rows: 2 }} visual={…} /></BentoGrid>

Source

Installs to components/galactrex/bento-card.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`title / description`	`string`	—	Text.
`visual`	`ReactNode`	—	Fills the cell.
`span`	`{ cols?: 1–4; rows?: 1–3 }`	—	Size in the grid.
`href`	`string`	—	Makes the whole card one link.
`className`	`string`	—	Extra classes for the outer element.

Variants

Feature grid. Mixed spans in a BentoGrid.

Accessibility

One link per cell with href.

Motion and reduced motion

Variants on hover and focus.
Reduced motion: still.