Features bento
BlockA bento grid of features: a two-by-two lead cell carrying a visual — by default a small analytics panel whose bars grow in — among smaller cells.
- Sections
- 2 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add features-bentoimport { BentoAnalyticsPanel } from "@/components/blocks/features-bento"; export default function Page() { return <BentoAnalyticsPanel />;}<BentoAnalyticsPanel>
| Prop | Type | Default |
|---|---|---|
changeThe change, already formatted and signed, e.g. "+12.4%". | string | "+12.4%" |
label | string | "Revenue this month" |
seriesBar heights as percentages of the tallest. The tallest bar is highlighted. | number[] | SERIES |
valueThe headline figure, already formatted. | string | "$48,219" |
Plus every attribute of <div>.
<FeaturesBentoBlock>
| Prop | Type | Default |
|---|---|---|
description | ReactNode | "A complete platform with everything you need to ship faster." |
features | BentoFeature[] | DEFAULT_BENTO_FEATURES |
heading | ReactNode | "Built for modern teams" |
headingLevelLevel of the section heading; each feature title is one level below. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
Plus every attribute of <section> except title.
One section landmark named by its heading (level set with `headingLevel`, cell titles one below). The cells are a list. The analytics panel states its figure and change in text; its bars are decorative and aria-hidden. Only a grid starting below the fold is hidden before it scrolls in, and never under reduced motion.