Bento Grid

Marketing Layout

The canonical layout for portfolio and showcase grids: media on top with its own aspect ratio, then an eyebrow → title → description body. Equal-height side-by-sides via CSS Grid's default align-items: stretch. Hover the tile to lift it -3px, zoom the image 1.04×, and nudge the title arrow.

WebBrooklyn2025

Animal NYC↗

Williamsburg's late-night bar. Live underground DJs five nights a week, programmed for the people who actually show up.

WebArts DistrictSummer 2026

Animal LA↗

Same animal, west coast. Coming summer 2026 to the LA Arts District.

Marketing Layout

Show Code

Full-Width Hero Tile

A span="full" tile at 21/9 carries a single project across the row — the eyebrow, title (with hover arrow), and a longer description give the row weight.

WebiOSAndroidLow Orbit

Knowmentum↗

Knowledge platform for high-performers. A Low Orbit owned product, in build for Q3 2026.

Full-Width Hero

Show Code

Stacked vs Overlay

Two layout modes. Stacked (default) keeps media and body in normal document flow; total tile height = media + body. Overlay makes the tile carry the aspect ratio, the media fills it absolutely, and the body floats over the lower portion.

StackedDefault

Stacked

Media on top with its own aspect ratio; body flows below as a sibling block.

Overlay

Overlay

Body floats over the lower portion of the media.

Stacked vs Overlay

Show Code

Breaking change in v0.5.0: Default BentoTile.layout is now "stacked". Tiles that previously rendered body-over-media must explicitly pass layout="overlay" to retain that behavior.

Contain vs Cover

fit="cover" (default) fills the tile with the image; fit="contain" fits the image inside a surface-card background — ideal for logos, portraits, or artwork with transparent backgrounds. The hover zoom is suppressed in contain mode (letterboxed media doesn't benefit from a scale effect).

CoverDefault

Cover

Image fills the tile, cropping whichever dimension overflows.

Contain

Contain

Image fits inside the tile; the surrounding plate fills the slack.

Contain vs Cover

Show Code

Responsive Asymmetric Layout

A fully responsive asymmetric grid — collapses to 1 column on mobile, 2 on medium+. Tiles in the same row share height regardless of body content length.

WebFeatured

Featured Project↗

Full-width hero tile spanning all columns.

Web

Project 1↗

A short blurb keeps this tile compact.

MobileiOSAndroid

Project 2↗

A longer description stretches this tile — its sibling keeps pace because the grid row stretches both to match.

Responsive Asymmetric Layout

Show Code

Tile Variants

BentoTile is a flexible container. Compose the sub-components inside to build distinct tile patterns:

• Project tile — BentoTileMedia + BentoTileBody with meta / title / description (the default pattern shown above).
• Headline tile — BentoTileBody with BentoTileHeadline plus optional supporting copy. No media slot — the tile is the statement.
• Text tile — BentoTileBody with meta + title + description, no media.
• Figure tile — BentoTileFigure (chart, large number, custom SVG) replacing BentoTileMedia. Useful for infographics or stat callouts.

Manifesto

The fastest way to ship marketing-grade UI.

+92%

ConversionQ1 2026

Hero CTR uplift

Marketing-grade primitives lifted the homepage click-through rate from 4.1% to 7.9%.

WebArts District

Animal LA↗

Same animal, west coast. Coming summer 2026 to the LA Arts District.

Note2026

What's a bento?

Asymmetric tile grids descended from the Apple WWDC 2022 design language — mixed weights, aspect ratios, and spans inside a single grid scaffolding.

Mixed tile variants on one grid

Show Code

Entrance Animation

Pass reveal to BentoGrid to fade and rise each tile on viewport entry, staggered left-to-right by DOM order. Configure the per-tile delay with revealStepMs (default 110ms) and the trigger threshold with revealThreshold (default 0.2). The cascade is suppressed under prefers-reduced-motion: reduce.

<BentoGrid cols={2} reveal revealStepMs={140}>
  {/* tiles */}
</BentoGrid>

Installation

npx visor add bento-grid

This copies four files into your project:

• components/ui/bento-grid/bento-grid.tsx — the component
• components/ui/bento-grid/bento-grid.module.css — the styles
• components/ui/bento-grid/bento-grid.module.css.d.ts — CSS module types
• components/ui/bento-grid/bento-grid.visor.yaml — component metadata

Usage

import {
  BentoGrid,
  BentoTile,
  BentoTileMedia,
  BentoTileBody,
  BentoTileMeta,
  BentoTileTitle,
  BentoTileDescription,
} from '@/components/ui/bento-grid/bento-grid';

<BentoGrid cols={{ base: 1, md: 2 }} gap="4">
  <BentoTile span="full" aspect="21/9" href="https://blacklight.fm">
    <BentoTileMedia src="/projects/hero.jpg" alt="Blacklight hero" />
    <BentoTileBody>
      <BentoTileMeta items={['Web', 'Low Orbit', 'Live']} />
      <BentoTileTitle showArrow>Blacklight</BentoTileTitle>
      <BentoTileDescription>
        Electronic press kits with an attitude, built for working artists.
      </BentoTileDescription>
    </BentoTileBody>
  </BentoTile>
</BentoGrid>

API Reference

No props data available for “bento-grid”.

BentoGrid

Also accepts all standard <div> HTML attributes.

BentoTile

BentoTileMedia

BentoTileBody

Accepts all standard <div> HTML attributes. In stacked mode the body sits at its natural content height (tiles hug content); in overlay mode it's pushed to the bottom with margin-top: auto and carries a translucent backdrop gradient for legibility against the image.

BentoTileFigure

Drop-in replacement for BentoTileMedia when the tile's hero element is not a photographic image — typical use cases: data charts, large statistic numbers, illustrated SVGs, or any composed JSX. Accepts all standard <div> HTML attributes. Inherits the same hover scale + layout-mode positioning as BentoTileMedia.

BentoTileHeadline

A larger display heading than BentoTileTitle — clamp(2rem, 3.6vw, 3.5rem), weight 700, tight tracking. Use for headline tiles where the heading IS the tile's primary content.

BentoTileMeta (eyebrow row)

BentoTileTitle

BentoTileDescription

Renders a styled <p> with max-width: 56ch for comfortable reading.

Customization Slots

Each tile (.bentoTile) exposes the following CSS custom properties. Override per-tile via style or per-grid via a parent token-override scope.

Sub-components

Responsive Cols

All tiles collapse to a single column on narrow viewports (< 640px) regardless of the span prop. Use the responsive cols map to control layout at each breakpoint:

<BentoGrid cols={{ base: 1, sm: 2, md: 2, lg: 3 }}>
  {/* tiles */}
</BentoGrid>

Accessibility

• BentoTile renders as a semantic <article> element by default, communicating self-contained content to assistive technologies.
• Clickable tiles use an <a> element with href — never a div with an onClick handler.
• BentoTileMedia requires a meaningful alt attribute. Use alt="" only for decorative images that are redundant with surrounding text.
• External links (target="_blank") automatically receive rel="noopener noreferrer" unless overridden.
• The ↗ hover arrow is aria-hidden — it's a visual affordance only.
• Focus rings use var(--focus-ring-width) and var(--border-focus) tokens for theme consistency.
• All hover transforms (image zoom, tile lift, arrow nudge) are suppressed under prefers-reduced-motion: reduce.