10 CSS Feature Sections 02 / 10

CSS Bento Grid Features Layout

A warm-cream bento-grid layout with five asymmetric CSS Grid cells (dark ink, forest green, white, terracotta, and deep navy) showcasing animated bar meters, a large metric number, and an orbiting dot animation.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="fs02">
  <div class="fs02__inner">
    <div class="fs02__header">
      <div class="fs02__label">Why teams choose us</div>
      <h2 class="fs02__headline">The platform that<br>works <em>beautifully</em> at scale</h2>
    </div>

    <div class="fs02__bento">
      <div class="fs02__cell fs02__cell--a">
        <span class="fs02__cell-tag">Workflow</span>
        <div class="fs02__cell-title">From idea to production in one tool</div>
        <div class="fs02__cell-body">Design, prototype, review, and deploy — without leaving a single workspace. Your entire product lifecycle lives here.</div>
        <div class="fs02__bg-num">01</div>
      </div>

      <div class="fs02__cell fs02__cell--b">
        <span class="fs02__cell-tag">Performance</span>
        <div class="fs02__cell-title">Built for speed without trade-offs</div>
        <div class="fs02__cell-bars fs02__bars">
          <div class="fs02__bar-row">
            <span class="fs02__bar-label">Build time</span>
            <div class="fs02__bar-track"><div class="fs02__bar-fill" style="--w:88%;width:88%;--delay:0s"></div></div>
            <span style="font-size:12px;opacity:.7">88%</span>
          </div>
          <div class="fs02__bar-row">
            <span class="fs02__bar-label">Uptime</span>
            <div class="fs02__bar-track"><div class="fs02__bar-fill" style="--w:99%;width:99%;--delay:.1s"></div></div>
            <span style="font-size:12px;opacity:.7">99%</span>
          </div>
          <div class="fs02__bar-row">
            <span class="fs02__bar-label">Cache hits</span>
            <div class="fs02__bar-track"><div class="fs02__bar-fill" style="--w:76%;width:76%;--delay:.2s"></div></div>
            <span style="font-size:12px;opacity:.7">76%</span>
          </div>
          <div class="fs02__bar-row">
            <span class="fs02__bar-label">Savings</span>
            <div class="fs02__bar-track"><div class="fs02__bar-fill" style="--w:62%;width:62%;--delay:.3s"></div></div>
            <span style="font-size:12px;opacity:.7">62%</span>
          </div>
        </div>
      </div>

      <div class="fs02__cell fs02__cell--c">
        <span class="fs02__cell-tag">Scale</span>
        <div class="fs02__metric">12M</div>
        <div class="fs02__metric-sub">Requests handled per second at peak</div>
        <div class="fs02__cell-body" style="margin-top:12px">Elastic infrastructure that scales automatically without capacity planning.</div>
      </div>

      <div class="fs02__cell fs02__cell--d">
        <span class="fs02__cell-tag">Security</span>
        <div class="fs02__cell-title">Zero-trust by default</div>
        <div class="fs02__cell-body">Every request is authenticated at the edge. SSO, SAML, and hardware key support out of the box.</div>
      </div>

      <div class="fs02__cell fs02__cell--e">
        <span class="fs02__cell-tag">Integrations</span>
        <div class="fs02__cell-title">Connects to your whole stack</div>
        <div class="fs02__cell-body">GitHub, Slack, Datadog, PagerDuty — 200+ integrations and a full API for anything custom.</div>
        <div class="fs02__orbit">
          <div class="fs02__orbit-ring">
            <div class="fs02__orbit-dot"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.fs02 {
  --bg: #f5f0e8;
  --ink: #1a1612;
  --muted: #7a7065;
  --card1: #1a1612;
  --card2: #2c5f3c;
  --card3: #fff;
  --card4: #e8623a;
  --card5: #fff;
  --card6: #2a2060;
  --accent: #e8623a;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  padding: 80px 24px;
  min-height: 100vh;
}

.fs02__inner { max-width: 1100px; margin: 0 auto; }

.fs02__header { margin-bottom: 56px; }

.fs02__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.fs02__headline {
  font-family: 'Fraunces', serif;
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 640px;
}

.fs02__headline em {
  font-style: italic;
  color: var(--accent);
}

.fs02__bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 12px;
}

/* Card base */
.fs02__cell {
  border-radius: 20px;
  padding: 36px;
  position: relative;
  overflow: hidden;
}

.fs02__cell--a {
  grid-column: span 5;
  background: var(--card1);
  color: #f0ece4;
  min-height: 280px;
}
.fs02__cell--b {
  grid-column: span 7;
  background: var(--card2);
  color: #d4eedb;
  min-height: 280px;
}
.fs02__cell--c {
  grid-column: span 4;
  background: var(--card3);
  border: 1.5px solid rgba(0,0,0,0.1);
  min-height: 220px;
}
.fs02__cell--d {
  grid-column: span 4;
  background: var(--card4);
  color: #fff;
  min-height: 220px;
}
.fs02__cell--e {
  grid-column: span 4;
  background: var(--card6);
  color: #c8c4ee;
  min-height: 220px;
}

.fs02__cell-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.fs02__cell--a .fs02__cell-tag { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.fs02__cell--b .fs02__cell-tag { background: rgba(255,255,255,0.1); color: rgba(212,238,219,0.7); }
.fs02__cell--c .fs02__cell-tag { background: #f0ece4; color: #7a7065; }
.fs02__cell--d .fs02__cell-tag { background: rgba(255,255,255,0.2); color: #fff; }
.fs02__cell--e .fs02__cell-tag { background: rgba(255,255,255,0.1); color: rgba(200,196,238,0.7); }

.fs02__cell-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
}

.fs02__cell-body {
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.72;
  max-width: 340px;
}

/* Decorative large number */
.fs02__cell--a .fs02__bg-num {
  position: absolute;
  bottom: -20px; right: -10px;
  font-family: 'Fraunces', serif;
  font-size: 140px;
  font-weight: 800;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Progress bars in cell b */
.fs02__bars { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.fs02__bar-row { display: flex; align-items: center; gap: 12px; }
.fs02__bar-label { font-size: 12px; opacity: 0.7; min-width: 80px; }
.fs02__bar-track {
  flex: 1; height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 100px;
  overflow: hidden;
}
.fs02__bar-fill {
  height: 100%;
  background: #5ebd7a;
  border-radius: 100px;
  animation: fs02-grow 1.2s cubic-bezier(.4,0,.2,1) both;
  animation-delay: var(--delay, 0s);
}
@keyframes fs02-grow { from { width: 0 } }

/* Metric in cell c */
.fs02__metric {
  font-family: 'Fraunces', serif;
  font-size: 64px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin: 20px 0 8px;
}
.fs02__metric-sub { font-size: 13px; color: var(--muted); }

/* Icon orbit cell e */
.fs02__orbit {
  position: absolute;
  right: 24px; bottom: 24px;
  width: 80px; height: 80px;
}
.fs02__orbit-ring {
  width: 80px; height: 80px;
  border: 1.5px dashed rgba(255,255,255,0.2);
  border-radius: 50%;
  animation: fs02-spin 8s linear infinite;
}
.fs02__orbit-dot {
  position: absolute;
  top: -5px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px;
  background: #8b82f0;
  border-radius: 50%;
}
@keyframes fs02-spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .fs02__cell--a, .fs02__cell--b,
  .fs02__cell--c, .fs02__cell--d, .fs02__cell--e {
    grid-column: span 12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs02__bar-fill { animation: none; width: var(--w); }
  .fs02__orbit-ring { animation: none; }
}

More from 10 CSS Feature Sections

CSS Feature Section 3D Perspective CardsCSS Feature Section Timeline LayoutCSS Feature Section with Icon GridCSS Feature Section Dark GlassmorphismCSS Feature Section with Code PreviewCSS Feature Comparison SectionCSS SaaS Features Section 2025CSS Feature Section with Floating MockupCSS Animated Feature Cards Scroll Reveal
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →