Hex UIv1

MarketingBento

Asymmetric bento feature grid: one or two 'lg' hero tiles plus several 'md' tiles. Distinct from marketing-feature-grid (symmetric, icon-led) — bento is designed for landing pages wanting a richer, gallery-feel feature showcase. Presentational and theme-driven.

Installation

pnpm
pnpm dlx @hex-core/cli add marketing-bento

Usage

tsx
import { MarketingBento } from "@/components/ui/marketing-bento"

5-tile bento with one large hero

One lg hero tile + four md tiles in an asymmetric grid.

tsx
import { MarketingBento } from "@hex-core/components";

<MarketingBento
  title="A feature gallery"
  description="Different sizes, same brand."
  tiles={[
    { title: "Spec-driven UI", description: "Every component ships a machine-readable schema.", span: "lg" },
    { title: "Theme-native", description: "Swap tokens, not class names." },
    { title: "MCP-first", description: "Discover and compose from any AI client." },
    { title: "Composable", description: "Page sections snap together into recipes." },
    { title: "Typed", description: "Strict TypeScript from registry to runtime." },
  ]}
/>

API Reference

PropTypeDefaultDescription
tilesrequired
object—ReadonlyArray<{ title; description?; media?: ReactNode; span?: 'lg' | 'md' }>. The tiles. Set span='lg' on one or two tiles to make them span two columns + two rows on ≥lg.
eyebrow
ReactNode—Section eyebrow above the title.
title
ReactNode—Section heading.
description
ReactNode—Section subcopy below the heading.
className
string—Additional classes applied to the root <section>.

AI Guidance

When to use

Use when you have one standout feature that deserves the visual emphasis of a larger tile, alongside several supporting features. Pairs well below the hero on a landing page.

When not to use

Don't use for uniform feature lists (use marketing-feature-grid) or pricing tiers (use marketing-pricing). Don't span more than two tiles as 'lg' — the asymmetry breaks down.

Common mistakes

  • Putting six tiles all at default 'md' span — there's no visual hierarchy; either use marketing-feature-grid or promote one to 'lg'.
  • Filling the lg tile's media with a tiny icon — the area is sized for a screenshot or illustration; use feature-grid for icon-led layouts.
  • Two 'lg' tiles competing for attention — pick one hero feature.

Accessibility

Each tile heading is an <h3> under the section <h2>. Grid order matches source order; on mobile tiles stack one-per-row, so put your most important tile first.

Token budget: 873

Verified against @hex-core/components@1.14.0

Edit this page on GitHub