Design Atlas
한국어
▭ Landing page patterns

Bento features

벤토 피처 섹션

An asymmetric feature section that sizes one cell large and the rest as supporting tiles.

Also known as: Feature bento gridAsymmetric feature showcase
···
html
<div class="bento" id="bento">
  <div class="tile hero"><span class="dot"></span><b class="bar b1"></b><b class="bar b2"></b><div class="chat"><span></span><span class="me"></span></div></div>
  <div class="tile a"><i class="icon"></i><b class="ln"></b></div>
  <div class="tile b"><i class="icon"></i><b class="ln"></b></div>
  <div class="tile wide"><i class="icon"></i><b class="ln"></b><b class="ln s"></b></div>
</div>
css
.bento{width:min(92%,760px);height:min(90%,300px);display:grid;gap:clamp(6px,1.5vmin,10px);
  grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:1fr 1fr;
  grid-template-areas:"hero a b" "hero wide wide"}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:clamp(8px,1.6vmin,14px);
  box-shadow:0 2px 8px rgba(0,0,0,.06);padding:8%;display:flex;flex-direction:column;gap:8%;overflow:hidden}
.hero{grid-area:hero;background:color-mix(in oklab,var(--accent) 10%,var(--surface))}
.hero .dot{width:14%;aspect-ratio:1;border-radius:50%;background:var(--accent)}
.bar{display:block;height:10%;border-radius:3px;background:var(--line)}
.bar.b1{width:65%}.bar.b2{width:45%}
.chat{margin-top:auto;display:flex;flex-direction:column;gap:8%;align-items:flex-start}
.chat span{display:block;height:clamp(6px,1.8vmin,11px);width:55%;border-radius:8px 8px 8px 2px;background:var(--line)}
.chat span.me{align-self:flex-end;width:40%;border-radius:8px 8px 2px 8px;background:var(--accent);
  animation:pop 3s ease-in-out infinite}
.a{grid-area:a}.b{grid-area:b}.wide{grid-area:wide;flex-direction:row;align-items:center}
.icon{width:22%;aspect-ratio:1;border-radius:6px;background:var(--accent-2);flex:none}
.a .icon{background:var(--accent-3)}
.ln{display:block;height:9%;border-radius:3px;background:var(--line);flex:1}
.ln.s{flex:none;width:20%}
@keyframes pop{0%,100%{opacity:.6}50%{opacity:1}}

Applies the `bento-grid` layout pattern directly to a landing page's feature section. Unlike a uniform `feature-grid`, one or two flagship features get a large 2×2 cell while the rest sit in 1×1 or wide cells — the size itself tells visitors what matters most.

The large cell usually contains a small "working" UI mock — a chart, a toggle, a chat bubble — while small cells stay simple: an icon plus one line. Apple popularized this on its product pages, and it spread to SaaS landing pages from 2023 onward.

If every cell has its own background color and icon style, the section reads as disconnected fragments rather than one composition. Keep shared tokens — background, corner radius, shadow — identical across cells, and vary only size and content density.

When to use

Use when one feature is genuinely the flagship. If all features carry equal weight, a uniform `feature-grid` looks cleaner.