Section
Bento Hero
Bento-grid hero summarizing multiple value props at once.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/Hero/hero-bento Vanilla/Sections/Hero/hero-bento <!-- Snippet Name: Bento Hero | Family: Hero | Description: Bento-grid hero summarizing multiple value props at once. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bento Hero | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: hero-bento. Copy, customize, ship.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.hb h1{margin:16px 0 8px;text-align:center}.hb .lead{margin:0 auto 36px;text-align:center}
.hb .bento{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(120px,auto)}
.hb .tile{border:3px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);
padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;background:var(--surface);
transition:transform .14s,box-shadow .14s}.hb .tile:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.hb .tile.big{grid-column:span 2}.hb .tile h3{font-size:1.05rem}
.hb .tile .num{font-size:2rem;font-weight:900}.hb .t1{background:var(--accent);color:#0a0a0a}
.hb .t2{background:var(--primary);color:#fff}.hb .t3{background:var(--lime)}
.hb .t4{background:var(--pink);color:#fff}.hb .t5{background:var(--cyan)}
@media(min-width:900px){.hb .bento{grid-template-columns:repeat(4,1fr)}.hb .tile.big{grid-column:span 2}}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="hb" aria-labelledby="hb-title">
<div class="container">
<span class="eyebrow" style="margin-inline:auto;display:inline-flex"><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M3 3h7v7H3zM14 3h7v7H3zM3 14h7v7H3zM14 14h7v7H3z'/></svg> Bento</span>
<h1 id="hb-title">Everything, in one grid.</h1>
<p class="lead">A bento hero that shows off multiple value props without overwhelming.</p>
<div class="bento">
<div class="tile big t1"><div><h3>Lightning fast</h3><p class="muted" style="color:#0a0a0a">Sub-50ms globally.</p></div><span class="num">42ms</span></div>
<div class="tile t2"><h3>Secure</h3><span class="num">SOC2</span></div>
<div class="tile t3"><h3>Open source</h3><span class="num">8.2k★</span></div>
<div class="tile t4"><h3>API-first</h3><span class="num">99.99%</span></div>
<div class="tile t5"><h3>Team</h3><span class="num">12k</span></div>
</div>
</div>
</section>
</body>
</html># Bento Hero
Bento-grid hero summarizing multiple value props at once.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / hero
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** hero, bento, grid
**Features:** light/dark, responsive, varied tiles
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 103 lines UTF-8 · LF · Spaces: 2
Continue browsing