{ "$schema": "https://mian.ro/schema/v2/registry.json", "schemaVersion": "2.0.0", "generatedAt": "2026-10-02T13:14:06.957Z", "id": "bento", "name": "Bento grid", "category": "Sections", "description": "A grid of tiles in mixed sizes for showing several product details at once.", "tags": [ "bento", "bento grid", "tiles", "mosaic", "features", "showcase", "dashboard tiles", "website" ], "requiresJs": false, "license": "LicenseRef-MIAN-1.0", "composition": { "role": "showcase", "intents": [ "showcase product features", "show product capabilities", "portfolio highlights", "mixed size tiles", "product tour", "feature overview with visuals" ], "prominence": "high", "density": "high", "worksAfter": [ "hero", "logo-cloud" ], "worksBefore": [ "testimonial", "process", "cta", "figures" ], "alternatives": [ "feature-grid", "work-grid", "media" ], "avoid": "Tiles with only an icon and a sentence. Each tile should show a real state of the product or a real piece of work. One bento per page." }, "url": "https://mian.ro/components/bento", "markdownUrl": "https://mian.ro/ai/components/bento.md", "classes": [ { "name": "mn-bento", "description": "The grid: one column, then two, then six tracks on wide sections." }, { "name": "mn-tile", "description": "A tile. Add mn-card for the noodle’s surface. Spans 2 of 6 by default." }, { "name": "mn-tile-half · mn-tile-wide · mn-tile-full", "description": "Span 3, 4 or 6 of 6 tracks." }, { "name": "mn-tile-tall", "description": "Span two rows." }, { "name": "mn-tile-title", "description": "Tile heading (

)." }, { "name": "mn-tile-media", "description": "Media pinned to the tile’s bottom edge, bleeding to the sides. mn-tile-media-flush removes its padding." }, { "name": "mn-tile-figure", "description": "A very large number or word: the tile is the statistic." }, { "name": "mn-tile-quote", "description": "A short quotation set large." }, { "name": "mn-tile-fill", "description": "A tile filled with the primary colour. One per grid." }, { "name": "mn-tile-end", "description": "Pushes its element to the bottom of the tile." }, { "name": "mn-tile-arrow", "description": "On an : an arrow in the corner that moves on hover." }, { "name": "mn-bento-compact", "description": "Four equal tracks instead of six: tiles span one, mn-tile-wide two. For profile and link pages." }, { "name": "mn-bento-rows", "description": "Gives every row a minimum height so small tiles stay square-ish." } ], "accessibility": [ "Tiles read in source order: put them in the order you want them read, and let the grid place them.", "Keep one idea per tile with a real heading.", "Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview." ], "examples": [ { "title": "Bento", "description": null, "html": "
\n
\n

Close dashboard

Every account, every entity, one progress bar.

\n
Matched
1,284
Exceptions
7
Days to close
3.5
\n
\n

Approvals on the go

Swipe to approve from your phone.

\n

32 currencies

Revalued at month-end.

\n

SOC 2 Type II

Audited every year.

\n
\n
" }, { "title": "Numbers, a quote and links", "description": "Tiles that are the content: a figure, a quotation, a filled tile and whole-tile links.", "html": "
\n
\n

3.5 days

to close the month

Down from eleven, measured across 140 finance teams in 2026.

\n

Start with one entity

Connect a bank feed and reconcile last month. It takes an afternoon.

Book a walkthrough
\n
“We stopped exporting to spreadsheets in the second week. Nobody asked for them back.”
Example quote. Replace with a real, attributed one.
\n

Changelog

What shipped this month.

\n
\n
" }, { "title": "Compact: a profile page", "description": null, "html": "
\n
\n

Noor Haddad

Type designer in Rotterdam. I draw text faces for long reading and teach on Thursdays.

Booking for 2027
\n

Typefaces

Seven families.

\n

Writing

Notes on spacing.

\n

12

years drawing letters

\n
\n

Say hello

Replies within two days.

\n
\n
" } ], "css": ".mn-bento { display: grid; gap: var(--mn-gap, 1rem); grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; }\n.mn-tile { --_p: clamp(1.25rem, 2.6cqi, 1.9rem); display: flex; flex-direction: column; gap: .55rem; min-width: 0; padding: var(--_p); }\n.mn-tile > * { margin: 0; }\n.mn-tile-title { font: var(--mn-heading-weight) 1.125rem/1.3 var(--mn-font-heading); letter-spacing: -.012em; color: var(--mn-fg); }\n.mn-tile :where(p:not([class])) { color: var(--mn-muted); font-size: .9375rem; line-height: 1.6; }\n.mn-tile-media { margin: auto calc(var(--_p) * -1) calc(var(--_p) * -1); padding: var(--_p) var(--_p) 0; min-width: 0; }\n.mn-tile-media-flush { padding: 0; }\n@container mn (min-width: 40rem) {\n .mn-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .mn-tile-wide, .mn-tile-full { grid-column: span 2; }\n}\n@container mn (min-width: 62rem) {\n .mn-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }\n .mn-tile { grid-column: span 2; }\n .mn-tile-half { grid-column: span 3; }\n .mn-tile-wide { grid-column: span 4; }\n .mn-tile-full { grid-column: span 6; }\n .mn-tile-tall { grid-row: span 2; }\n}\n.mn-tile-figure { font: 700 clamp(2.25rem, 7cqi, 3.5rem)/1 var(--mn-font-heading); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }\n.mn-tile-quote { margin: 0; font: 500 1.1875rem/1.45 var(--mn-font-heading); letter-spacing: -.01em; color: var(--mn-fg); text-wrap: pretty; }\n.mn-tile-end { margin-top: auto; }\na.mn-tile { position: relative; color: inherit; text-decoration: none; transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease); }\na.mn-tile:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 35%); }\na.mn-tile:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 2px; }\n.mn-tile-arrow { position: absolute; top: var(--_p); inset-inline-end: var(--_p); width: 1.1rem; height: 1.1rem; color: var(--mn-muted); rotate: -45deg; transition: translate var(--mn-dur, 200ms) var(--mn-ease-out, ease-out), color var(--mn-duration) var(--mn-ease); }\na.mn-tile:hover .mn-tile-arrow { translate: 2px -2px; color: currentColor; }\n.mn-bento-rows { grid-auto-rows: minmax(9.5rem, auto); }\n@container mn (min-width: 40rem) { .mn-bento-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }\n@container mn (min-width: 62rem) {\n .mn-bento-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n .mn-bento-compact > .mn-tile { grid-column: span 1; }\n .mn-bento-compact > :is(.mn-tile-half, .mn-tile-wide) { grid-column: span 2; }\n .mn-bento-compact > .mn-tile-full { grid-column: span 4; }", "js": null, "install": { "css": "https://mian.ro/dist/mian.css", "js": null, "registryItem": "https://mian.ro/r/bento.json" } }