Bento Hero — Playground

{CF} CodeFronts Back to CSS Hero Sections Bento Hero Pure CSS

Edit any tab — preview updates live

.hs-bento {
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(16px, 3vh, 40px) clamp(16px, 4vw, 40px);
  background: #0e0e16;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(60px, 1fr);
  grid-template-areas:
    "h h h s"
    "h h h i"
    "q q p p";
  gap: 6px;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}
.hs-bento-c {
  background: #18181f;
  border: 1px solid rgba(124,108,255,0.2);
  border-radius: 10px;
  padding: clamp(8px, 1.5vw, 14px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center;
}
.hs-bento-h {
  grid-area: h;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  border-radius: 10px;
  padding: clamp(14px, 3vw, 28px);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.hs-bento-eye {
  font-family: monospace; font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: 0.12em; color: rgba(255,255,255,0.7); text-transform: uppercase;
}
.hs-bento-h h1 {
  margin: 0; font-size: clamp(16px, 3.5vw, 32px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.01em;
}
.hs-bento-cta {
  margin-top: 4px; width: fit-content;
  padding: 6px 12px; border-radius: 6px;
  background: rgba(255,255,255,0.95); color: #0e0e16;
  font-size: clamp(10px, 1.3vw, 13px); font-weight: 700;
  text-decoration: none;
}
.hs-bento-stat { grid-area: s; background: rgba(46,184,138,0.14); border-color: rgba(46,184,138,0.4); }
.hs-bento-stat strong { font-size: clamp(20px, 3.5vw, 30px); font-weight: 900; color: #2eb88a; line-height: 1; }
.hs-bento-stat span { font-size: clamp(9px, 1.2vw, 11px); color: #b8b6d4; }
.hs-bento-icon { grid-area: i; background: rgba(245,168,74,0.14); border-color: rgba(245,168,74,0.4); }
.hs-bento-glyph { font-size: clamp(18px, 3vw, 24px); color: #f5a84a; }
.hs-bento-icon span:not(.hs-bento-glyph) { font-size: clamp(9px, 1.2vw, 11px); color: #b8b6d4; }
.hs-bento-quote { grid-area: q; background: rgba(255,108,138,0.14); border-color: rgba(255,108,138,0.4); }
.hs-bento-quote p { margin: 0; font-size: clamp(10px, 1.5vw, 13px); color: #fff; font-style: italic; }
.hs-bento-quote span { font-size: clamp(9px, 1.1vw, 10px); color: #ff6c8a; }
.hs-bento-pill { grid-area: p; background: rgba(167,139,250,0.14); border-color: rgba(167,139,250,0.4);
  font-family: monospace; font-size: clamp(10px, 1.4vw, 13px); font-weight: 700; color: #a78bfa;
  letter-spacing: 0.06em; text-transform: uppercase;
}

Live preview Ready