docs / patterns / bento-text

BentoText

the cell that argues rather than counts. an eyebrow to place it, a heading to carry the claim, and a paragraph only when the heading cannot.

intensity · structuresrsc · client

provenance

shaped from personal-website

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

the focal cell of a proof wall, where the metrics around it are evidencepairs with BentoMetric: the text makes the claim, the figures back itnot a place for three paragraphs. a cell that scrolls has outgrown the gridthe eyebrow is a label, not a sentence

a11y

the title is a real h3, so headings stay in order down the pagejest-axe
live demo · try it out
Problem

Students could not see their whole degree.

Requirements were spread across four systems, none of which agreed with the others.

customize
labelmono eyebrow, empty to drop it
titlethe heading
bodyparagraph under the heading
usagecopy
import { BentoText } from "@usva-ui/react/patterns/bento-grid";

<BentoText
  label="Problem"
  title="Students could not see their whole degree."
  body="Requirements were spread across four systems, none of which agreed with the others."
/>

props

proptypedefaultnotes
titleReactNode—the heading. renders as a real h3, so it lands in the document outline.
bodyReactNode—paragraph under the heading. omit it when the title carries the whole point.
labelReactNode—mono uppercase eyebrow above the heading. shared with BentoInfo.
iconReactNode—tile beside the label. it needs a label to sit next to.

get it

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

<BentoText
  label="Problem"
  title="Students could not see their whole degree."
  body="Requirements were spread across four systems."
/>