Close dashboard
Every account, every entity, one progress bar.
Matched
1,284
Exceptions
7
Days to close
3.5
Bento grid
A grid of tiles in mixed sizes for showing several product details at once.
Bento
Approvals on the go
Swipe to approve from your phone.
32 currencies
Revalued at month-end.
SOC 2 Type II
Audited every year.
<section class="mn-section mn-section-sm">
<div class="mn-container mn-bento">
<article class="mn-card mn-tile mn-tile-wide"><h3 class="mn-tile-title">Close dashboard</h3><p>Every account, every entity, one progress bar.</p>
<div class="mn-tile-media"><div class="mn-stats"><div class="mn-stat"><div class="mn-stat-label">Matched</div><div class="mn-stat-value">1,284</div></div><div class="mn-stat"><div class="mn-stat-label">Exceptions</div><div class="mn-stat-value">7</div></div><div class="mn-stat"><div class="mn-stat-label">Days to close</div><div class="mn-stat-value">3.5</div></div></div></div>
</article>
<article class="mn-card mn-tile mn-tile-tall"><h3 class="mn-tile-title">Approvals on the go</h3><p>Swipe to approve from your phone.</p><div class="mn-tile-media mn-tile-media-flush"><div class="mn-media mn-media-flat" style="--ratio:3/4"><svg viewBox="0 0 600 450" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><rect width="600" height="450" fill="var(--mn-surface)"/><g fill="none" stroke="var(--mn-fg)" stroke-width="1.5"><circle cx="300" cy="225" r="12"/><circle cx="300" cy="225" r="26"/><circle cx="300" cy="225" r="40"/><circle cx="300" cy="225" r="54"/><circle cx="300" cy="225" r="68"/><circle cx="300" cy="225" r="82"/><circle cx="300" cy="225" r="96"/><circle cx="300" cy="225" r="110"/><circle cx="300" cy="225" r="124"/><circle cx="300" cy="225" r="138"/><circle cx="300" cy="225" r="152"/><circle cx="300" cy="225" r="166"/><circle cx="300" cy="225" r="180"/><circle cx="300" cy="225" r="194"/></g><circle cx="300" cy="225" r="12" fill="var(--mn-primary)"/></svg></div></div></article>
<article class="mn-card mn-tile"><h3 class="mn-tile-title">32 currencies</h3><p>Revalued at month-end.</p></article>
<article class="mn-card mn-tile"><h3 class="mn-tile-title">SOC 2 Type II</h3><p>Audited every year.</p></article>
</div>
</section>Numbers, a quote and links
Tiles that are the content: a figure, a quotation, a filled tile and whole-tile links.
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.”
Changelog
What shipped this month.
<section class="mn-section mn-section-sm">
<div class="mn-container mn-bento mn-bento-rows">
<article class="mn-card mn-tile mn-tile-half"><p class="mn-tile-figure">3.5 days</p><h3 class="mn-tile-title">to close the month</h3><p>Down from eleven, measured across 140 finance teams in 2026.</p></article>
<article class="mn-card mn-tile mn-tile-half mn-tile-fill"><h3 class="mn-tile-title">Start with one entity</h3><p>Connect a bank feed and reconcile last month. It takes an afternoon.</p><span class="mn-tile-end"><span class="mn-btn mn-btn-sm mn-secondary">Book a walkthrough</span></span></article>
<figure class="mn-card mn-tile mn-tile-wide" style="margin:0"><blockquote class="mn-tile-quote">“We stopped exporting to spreadsheets in the second week. Nobody asked for them back.”</blockquote><figcaption class="mn-tile-end mn-muted">Example quote. Replace with a real, attributed one.</figcaption></figure>
<a class="mn-card mn-tile" href="#"><svg class="mn-tile-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg><h3 class="mn-tile-title">Changelog</h3><p>What shipped this month.</p></a>
</div>
</section>Compact: a profile page
Noor Haddad
Type designer in Rotterdam. I draw text faces for long reading and teach on Thursdays.
Booking for 2027Typefaces
Seven families.
Writing
Notes on spacing.
12
years drawing letters
Say hello
Replies within two days.
<section class="mn-section mn-section-sm">
<div class="mn-container mn-bento mn-bento-compact mn-bento-rows">
<article class="mn-card mn-tile mn-tile-wide"><h3 class="mn-tile-title">Noor Haddad</h3><p>Type designer in Rotterdam. I draw text faces for long reading and teach on Thursdays.</p><span class="mn-tile-end mn-row"><span class="mn-badge mn-badge-soft mn-success">Booking for 2027</span></span></article>
<a class="mn-card mn-tile" href="#"><svg class="mn-tile-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg><h3 class="mn-tile-title">Typefaces</h3><p>Seven families.</p></a>
<a class="mn-card mn-tile" href="#"><svg class="mn-tile-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg><h3 class="mn-tile-title">Writing</h3><p>Notes on spacing.</p></a>
<article class="mn-card mn-tile"><p class="mn-tile-figure">12</p><p>years drawing letters</p></article>
<article class="mn-card mn-tile mn-tile-wide"><div class="mn-tile-media mn-tile-media-flush" style="margin-top:calc(var(--_p) * -1)"><div class="mn-media mn-media-flat" style="--ratio:21/9"><svg viewBox="0 0 600 450" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><rect width="600" height="450" fill="var(--mn-fg)"/><path d="M0 330 300 90l300 240Z" fill="var(--mn-accent)"/><circle cx="300" cy="300" r="40" fill="var(--mn-bg)"/></svg></div></div></article>
<a class="mn-card mn-tile mn-tile-fill" href="#"><svg class="mn-tile-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg><h3 class="mn-tile-title">Say hello</h3><p>Replies within two days.</p></a>
</div>
</section>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/bento.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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 (<h3>). |
| 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 <a class="mn-tile">: 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.