31 CSS Hero Sections19 / 31

Pure CSSMIT licensed

Bento Hero

Apple-style bento hero — one large headline tile with stat / quote / pill cells fanning around it. Matte-ceramic palette: salmon, terracotta, ivory, olive.

Published

Live Demo
Try it

The code

<section class="hs-19" aria-label="Hero">
  <article class="hs-19__hero">
    <span class="hs-19__eye">V2 — out now</span>
    <h2>The pottery <em>workbook</em> for serious hands.</h2>
    <a class="hs-19__cta" href="#start">Start the kiln →</a>
  </article>
  <article class="hs-19__stat">
    <strong>1,400</strong>
    <span>hand-thrown<br />pieces logged</span>
  </article>
  <article class="hs-19__quote">
    <p>“Replaced three notebooks and a chalkboard.”</p>
    <cite>— Mireya, Studio Verde</cite>
  </article>
  <article class="hs-19__pill"><span>★ 4.9</span><em>App Store</em></article>
  <article class="hs-19__cta-tile">
    <a href="#android">Android →</a>
  </article>
</section>
.hs-19 {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  grid-template-rows: auto auto;
  grid-template-areas: "hero hero stat" "hero hero quote" "pill cta  quote";
  gap: 14px;
  width: 100%;
  min-height: 100vh;
  padding: clamp(20px, 3vw, 32px);
  background: #f5ebde;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2c1f15;
  box-sizing: border-box;
}

.hs-19 > article {
  border-radius: 16px;
  padding: clamp(18px, 2.5vw, 26px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.hs-19__hero {
  grid-area: hero;
  background: linear-gradient(160deg, #f4a48b, #d97766);
  color: #2c1f15;
}

.hs-19__eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  background: #2c1f15;
  color: #f5ebde;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
}

.hs-19__hero h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.hs-19__hero h2 em {
  color: #6b1f12;
  font-style: italic;
}

.hs-19__cta {
  align-self: flex-start;
  padding: 11px 20px;
  background: #2c1f15;
  color: #f5ebde;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.18s;
}

.hs-19__cta:hover {
  background: #6b1f12;
}

.hs-19__stat {
  grid-area: stat;
  background: #6b8a3e;
  color: #f5ebde;
}

.hs-19__stat strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
}

.hs-19__stat span {
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.9;
}

.hs-19__quote {
  grid-area: quote;
  background: #2c1f15;
  color: #f5ebde;
}

.hs-19__quote p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  margin: 0;
  line-height: 1.4;
}

.hs-19__quote cite {
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.hs-19__pill {
  grid-area: pill;
  background: #f5ebde;
  border: 2px solid #2c1f15;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.hs-19__pill span {
  font-weight: 800;
  font-size: 18px;
  color: #c69e3d;
}

.hs-19__pill em {
  font-style: normal;
  font-size: 11px;
  opacity: 0.7;
  letter-spacing: 0.06em;
}

.hs-19__cta-tile {
  grid-area: cta;
  background: #d97766;
  padding: 0 !important;
  align-items: stretch;
  justify-content: stretch;
}

.hs-19__cta-tile a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #2c1f15;
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
}

.hs-19__cta-tile a:hover {
  background: rgba(0,0,0,0.08);
}

@media (max-width: 720px) {
  .hs-19 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "hero hero" "stat quote" "pill cta";
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-19__cta,
    .hs-19__cta-tile a {
    transition: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Hero Section from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Bento Hero
Source: https://codefronts.com/layouts/css-hero-sections/bento-hero/

Apple-style bento hero — one large headline tile with stat / quote / pill cells fanning around it. Matte-ceramic palette: salmon, terracotta, ivory, olive.
## HTML
```html
<section class="hs-19" aria-label="Hero">
  <article class="hs-19__hero">
    <span class="hs-19__eye">V2 — out now</span>
    <h2>The pottery <em>workbook</em> for serious hands.</h2>
    <a class="hs-19__cta" href="#start">Start the kiln →</a>
  </article>
  <article class="hs-19__stat">
    <strong>1,400</strong>
    <span>hand-thrown<br />pieces logged</span>
  </article>
  <article class="hs-19__quote">
    <p>“Replaced three notebooks and a chalkboard.”</p>
    <cite>— Mireya, Studio Verde</cite>
  </article>
  <article class="hs-19__pill"><span>★ 4.9</span><em>App Store</em></article>
  <article class="hs-19__cta-tile">
    <a href="#android">Android →</a>
  </article>
</section>
```
## CSS
```css
.hs-19 {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  grid-template-rows: auto auto;
  grid-template-areas: "hero hero stat" "hero hero quote" "pill cta  quote";
  gap: 14px;
  width: 100%;
  min-height: 100vh;
  padding: clamp(20px, 3vw, 32px);
  background: #f5ebde;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2c1f15;
  box-sizing: border-box;
}

.hs-19 > article {
  border-radius: 16px;
  padding: clamp(18px, 2.5vw, 26px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.hs-19__hero {
  grid-area: hero;
  background: linear-gradient(160deg, #f4a48b, #d97766);
  color: #2c1f15;
}

.hs-19__eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  background: #2c1f15;
  color: #f5ebde;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
}

.hs-19__hero h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.hs-19__hero h2 em {
  color: #6b1f12;
  font-style: italic;
}

.hs-19__cta {
  align-self: flex-start;
  padding: 11px 20px;
  background: #2c1f15;
  color: #f5ebde;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.18s;
}

.hs-19__cta:hover {
  background: #6b1f12;
}

.hs-19__stat {
  grid-area: stat;
  background: #6b8a3e;
  color: #f5ebde;
}

.hs-19__stat strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
}

.hs-19__stat span {
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.9;
}

.hs-19__quote {
  grid-area: quote;
  background: #2c1f15;
  color: #f5ebde;
}

.hs-19__quote p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  margin: 0;
  line-height: 1.4;
}

.hs-19__quote cite {
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.hs-19__pill {
  grid-area: pill;
  background: #f5ebde;
  border: 2px solid #2c1f15;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.hs-19__pill span {
  font-weight: 800;
  font-size: 18px;
  color: #c69e3d;
}

.hs-19__pill em {
  font-style: normal;
  font-size: 11px;
  opacity: 0.7;
  letter-spacing: 0.06em;
}

.hs-19__cta-tile {
  grid-area: cta;
  background: #d97766;
  padding: 0 !important;
  align-items: stretch;
  justify-content: stretch;
}

.hs-19__cta-tile a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #2c1f15;
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
}

.hs-19__cta-tile a:hover {
  background: rgba(0,0,0,0.08);
}

@media (max-width: 720px) {
  .hs-19 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "hero hero" "stat quote" "pill cta";
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-19__cta,
    .hs-19__cta-tile a {
    transition: none;
  }
}
```

How this works

This bento hero uses CSS Grid with grid-template-areas to map five article tiles into a magazine-style layout: the hero tile takes a 2×2 block on the left, stat/quote stack on the right column, and pill/CTA sit under the hero. The grid-template-columns: 1.4fr 0.8fr 0.8fr ratio gives the hero tile its dominant visual weight while keeping the accent tiles square-ish. At max-width: 720px the grid collapses to a 2-column areas layout — hero on top spanning both, then stat/quote row, then pill/CTA row — which preserves the bento-grid hero feel on mobile without stacking to a boring vertical list.

The palette is matte-ceramic: ivory #f5ebde as the outer canvas, salmon-to-terracotta gradient linear-gradient(160deg, #f4a48b, #d97766) on the hero tile, olive green #6b8a3e on the stat tile, deep espresso #2c1f15 on the quote tile. Every tile uses border-radius: 16px — the softness that turns a data-dense grid into a friendly product page. Typography pairs Cormorant Garamond serif for headline and stats (artisanal register) with Inter for UI-scale copy (SaaS register). The stat tile's font-size: clamp(40px, 5vw, 64px) serif 1,400 is the whole trust marker — big number, one glance.

Why it converts: bento layout compresses feature list into visual hierarchy — visitors process 6-8 features in one glance versus paragraph reads. Apple, Notion, and Linear built their entire product-pages around this pattern for exactly this reason. Each tile is a single micro-story (headline, stat, quote, rating, secondary CTA) — the visitor scans the tiles like magazine spreads, not like a landing page. Two CTAs (primary in hero, Android in the cta-tile) split platform intent without competing.

Make it yours

  • Recolor to your brand: the four-color ceramic palette is ivory #f5ebde, salmon #f4a48b → terracotta #d97766, olive #6b8a3e, espresso #2c1f15. For a tech-SaaS bento grid hero try #f7f7fa / #a8b8ff → #6b7cff / #2ecc71 / #0f1024. Keep the 4-color rule — a 5-color bento looks like a dashboard, not a hero.
  • Swap Cormorant Garamond for the headline and stat: 'DM Serif Display' is the closest modern alternative, 'Fraunces' for variable-font control. Keep Inter for UI copy — the serif/sans pairing is what makes the bento feel curated instead of algorithmic.
  • Change the CTA shape: pills (border-radius: 999px) are the SaaS default. For editorial/premium swap the primary to a flat rectangle border-radius: 0 and the Android cta-tile becomes a full-bleed color block. Keep the two CTAs visually distinct — same shape signals the same action.
  • For dark mode: invert to espresso #2c1f15 canvas, keep salmon/terracotta gradient on hero (looks amazing on dark), flip olive tile to #1a3320, quote tile to ivory. The .hs-19__pill border color flips from espresso to ivory. This is one of the strongest dark bento palettes on the web.
  • For Tailwind: grid grid-cols-[1.4fr_0.8fr_0.8fr] grid-rows-[auto_auto] gap-3.5 plus arbitrary [grid-template-areas:'hero_hero_stat''hero_hero_quote''pill_cta_quote']. In Next.js, extract each tile as a component (<HeroTile>, <StatTile>) — the tile-per-component pattern is how Apple and Linear structure their bento sections.

Gotchas — read before shipping

  • The grid-template-areas string is whitespace-sensitive and easily broken by Prettier or a CSS minifier that collapses newlines inside the string. If your prod bundle shows the grid collapsing to auto-flow, check that the areas string still has one row per line inside the value (or is quoted per-row).
  • The salmon → terracotta gradient hero tile with dark #2c1f15 h2 text hits ~7:1 contrast on the salmon end but drops to ~5.5:1 on the terracotta end — still AA-compliant for 24px+ headlines but risky if you shrink the h2 below 24px. The eyebrow chip (espresso on ivory) is 14:1 and safe everywhere.
  • The .hs-19__cta-tile a uses width: 100%; height: 100% to fill the tile — this requires the parent article to have padding: 0 !important (the demo does this). If you copy just the tile without the important, the link inherits the 26px padding and the tap target becomes an inset rectangle instead of the full tile. WCAG 2.5.5 (Target Size) requires ~44×44px min — the full-tile link ensures this.
  • INP: five tiles with transition: background 0.18s on hover means five simultaneous paint operations if a visitor mouses diagonally across them. This is fine on desktop but on touch devices with sticky :hover it can cause a paint burst on first tap. Consider @media (hover: hover) guarding the transitions if you see INP regressions.
  • The stat tile 1,400 uses a literal comma — not &#8202; thin-space. Screen readers announce it as 'one thousand four hundred' correctly, but if you localize to European formats (1.400 or 1 400) the same font will render the period or space with different tracking than the demo. Test in your target locale.
  • Framework quirk: React Server Components render grid-template-areas fine, but if you use CSS Modules with [camelCase] class transforms, the areas identifiers (hero, stat, quote, pill, cta) do NOT get transformed — they are grid area names, not class names. This confuses some codebases; keep the areas as short lowercase strings and document them.

Techniques used in this demo

grid-templateMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →