← All layout components

Core / Layout

Bento

Creates varied editorial card spans in a grid.

Live example

Featured story
Metric
Update
Wide supporting story

Interactive preview using local sample data. Styling is intentionally left to the consuming project.

Usage

<Bento><BentoItem span="half">…</BentoItem></Bento>

Adopt to your project

Keep this component semantically neutral. Use its documented props for behavior and className for project-specific spacing, width, typography, and visual treatment.

Accessibility

Use for hierarchy, not for arbitrary repeated-card grids.

API reference

Public attribute
gap
span
children
className

The preview above uses a safe local fixture. Confirm exact TypeScript props when adapting it to your application.

Installation

Full library
pnpm install:project /absolute/path/to/your-project

Planned guided selection
Layout → Bento