Bento

Preview Available in release assets

Arrange independently meaningful cards in an intrinsic dense-looking grid without changing DOM order or requiring fixed viewport breakpoints.

Bento primary example

<section class="thin-bento" aria-labelledby="bento-title">
  <h2 id="bento-title" class="thin-visually-hidden">Workspace overview</h2>
  <article data-bento-span="wide">
    <h3>Weekly traffic</h3>
    <p>
      <strong>48,210</strong> requests</p>
    </article>
    <article>
      <h3>Availability</h3>
      <p>99.98%</p>
    </article>
    <article data-bento-span="tall">
      <h3>Recent activity with a deliberately long localized heading</h3>
      <ol>
        <li>Gateway deployed</li>
        <li>Catalog synchronized</li>
      </ol>
    </article>
    <article>
      <h3>Open incidents</h3>
      <p>2 need review</p>
    </article>
  </section>

Show code

<section class="thin-bento" aria-labelledby="bento-title">
  <h2 id="bento-title" class="thin-visually-hidden">Workspace overview</h2>
  <article data-bento-span="wide">
    <h3>Weekly traffic</h3>
    <p>
      <strong>48,210</strong> requests</p>
    </article>
    <article>
      <h3>Availability</h3>
      <p>99.98%</p>
    </article>
    <article data-bento-span="tall">
      <h3>Recent activity with a deliberately long localized heading</h3>
      <ol>
        <li>Gateway deployed</li>
        <li>Catalog synchronized</li>
      </ol>
    </article>
    <article>
      <h3>Open incidents</h3>
      <p>2 need review</p>
    </article>
  </section>

Anatomy

Named section
Semantic cards
Intrinsic columns
Optional wide or tall spans

Variants and sizes

Narrow container
Wide container
Long localized content
RTL

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Default
Sparse content
Dense content
Missing optional region
Narrow container
400% zoom
RTL
Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Layout never changes semantic order. Links, landmarks, headings, skip navigation, and document scrolling remain browser-native.

Accessibility

Keep every tile independently meaningful, preserve DOM reading order, and never use visual spanning to imply a semantic sequence.

Contract: COMPOSE
Basis: Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use .thin-bento. Optional data-bento-span=wide|tall affects visual span only.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without CSS, authored headings, landmarks, cards, links, and content remain in normal document order.

Assets and dependencies

/layouts.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts