docs / patterns / bento-card

BentoCard

one cell of the wall. it is a Card with a span, translucent enough that the grid’s wash reads through it rather than stopping at its edge.

intensity · structuresrsc · client

provenance

shaped from personal-website

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

size one cell past its neighbours to give the grid a focal pointholds any of the cell parts, or your own markup, or nothing at allspan is not a position. the grid is flow-dense, so narrow cards backfill ahead of a wide oneoutside a BentoGrid it is a plain Card. use Card directly instead

a11y

the spotlight and edge glow are aria-hidden · the shine respects reduced motionjest-axe

dependencies

Card from the same package
live demo · try it out
Focal

The cell you sized.

Everything else backfills around it.

2.4k

active users

94%

hit ratio

12

shipped
customize
spancolumns the cell covers
2
rowSpanrows the cell covers
2
highlightedge treatment on the cell
usagecopy
import { BentoCard, BentoGrid } from "@usva-ui/react/patterns/bento-grid";

<BentoGrid columns={3}>
  <BentoCard span={2} rowSpan={2} highlight="wash">...</BentoCard>
  <BentoCard>...</BentoCard>
  <BentoCard>...</BentoCard>
</BentoGrid>

props

proptypedefaultnotes
spannumber—columns the cell covers. nothing clamps it, overshoot the grid and the card overflows its track.
rowSpannumber—rows the cell covers. rows are minmax, so this raises the floor rather than fixing the height.
highlight"none" | "wash" | "edge" | "ring"—inherits the Card highlight vocabulary. one focal cell earns a highlight, a wall of them does not.

get it

bun add @usva-ui/reactcopy
usagecopy
import { BentoCard, BentoGrid } from "@usva-ui/react/patterns/bento-grid";

<BentoGrid columns={3}>
  <BentoCard span={2} rowSpan={2} highlight="wash">...</BentoCard>
  <BentoCard>...</BentoCard>
</BentoGrid>