# Bento grid · MIAN A grid of tiles in mixed sizes for showing several product details at once. - Id: `bento` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/bento - Use for: showcase product features, show product capabilities, portfolio highlights, mixed size tiles, product tour, feature overview with visuals. - On a page: showcase · prominence high · density high. Usually after: hero, logo-cloud. Usually before: 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. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-bento`: The grid: one column, then two, then six tracks on wide sections. - `mn-tile`: A tile. Add mn-card for the noodle’s surface. Spans 2 of 6 by default. - `mn-tile-half · mn-tile-wide · mn-tile-full`: Span 3, 4 or 6 of 6 tracks. - `mn-tile-tall`: Span two rows. - `mn-tile-title`: Tile heading (

). - `mn-tile-media`: Media pinned to the tile’s bottom edge, bleeding to the sides. mn-tile-media-flush removes its padding. - `mn-tile-figure`: A very large number or word: the tile is the statistic. - `mn-tile-quote`: A short quotation set large. - `mn-tile-fill`: A tile filled with the primary colour. One per grid. - `mn-tile-end`: Pushes its element to the bottom of the tile. - `mn-tile-arrow`: On an : an arrow in the corner that moves on hover. - `mn-bento-compact`: Four equal tracks instead of six: tiles span one, mn-tile-wide two. For profile and link pages. - `mn-bento-rows`: 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 ### Bento ```html

Close dashboard

Every account, every entity, one progress bar.

Matched
1,284
Exceptions
7
Days to close
3.5

Approvals on the go

Swipe to approve from your phone.

32 currencies

Revalued at month-end.

SOC 2 Type II

Audited every year.

``` ### Numbers, a quote and links Tiles that are the content: a figure, a quotation, a filled tile and whole-tile links. ```html

3.5 days

to close the month

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

Start with one entity

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

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

Changelog

What shipped this month.
``` ### Compact: a profile page ```html

Noor Haddad

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

Booking for 2027

Typefaces

Seven families.

Writing

Notes on spacing.

12

years drawing letters

Say hello

Replies within two days.
``` ## Source Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/bento/source