Bento
v1.0.9Updated 19 Oct 2026Bento-grid section — mixed-size feature cards arranged in an asymmetric grid. Copy-paste block; baked-in demo content (edit the JSX to customise).
Preview
Live · 12 stories▸Why this is recommendedbentogridfeaturesmarketing+2
Bento — four.
- ✓Landing pages
- ✓Feature overview sections
- ✓Marketing pages
- Four-cell, feature-grid, asymmetric and with-visuals layouts
- Mixed card sizes / spans
- The tile link renders NOTHING until tileLinkHref or onTileLinkClick is given - two tiles used to carry a hardwired href-hash (condo69 fb_bc8045e2 / fb_f8fba1de)
- posMenuItems is the faux till catalogue: illustration inside an aria-hidden mockup, so it keeps its default and is configured by prop rather than by editing the file
- Client-side routing: pass linkComponent and the tile link routes through the host app link component (fb_bf7dc63a)
- ✕Long-form text content
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
classNameOptional wrapper class override
—labelsOverride every built-in display string across the bento family (eyebrows, headings, tile titles and bodies, tile captions, the SDK namespace in the code sample, aria-labels) for i18n or white-labelling. Merged over DEFAULT_BENTO_LABELS.
—tileLinkHrefWhere a tile learn-more link goes. No default: without it (and without onTileLinkClick) NO link renders - two tiles used to ship a dead anchor. MCP feedback fb_bc8045e2 / fb_f8fba1de.
—onTileLinkClickWhat the tile link does. Safe to combine with tileLinkHref; on its own it makes the control a real type=button. Receives the click event so a routed host can preventDefault (fb_bf7dc63a).
—posMenuItemsThe till catalogue inside the aria-hidden point-of-sale mockup. Decoration, so it keeps its current default, and it is configured here rather than by editing the vendored file.
—linkComponentThe host app link component for the tile link. Defaults to a plain anchor, which in a routed app reloads the whole document (fb_bf7dc63a).
—