← All components
Section
freeStats Band 02
Dark-glow stats band: four oversized display numerals with tiny grey labels, teal glow bleed, and a compact eyebrow + headline lead-in.
Preview
Copy the code
paste-ready → Designer
<!-- Paste markup into an Embed, or recreate as native elements.
Styles below map 1:1 to the class names above. -->
<section class="stats_component">
<div class="stats_glow"></div>
<div class="stats_inner">
<p class="stats_eyebrow">By the numbers</p>
<h2 class="stats_title">Built to scale from first commit to global load</h2>
<p class="stats_sub">Teams ship faster on infrastructure that stays fast under real traffic — no cold starts, no surprises.</p>
<ul class="stats_row">
<li class="stats_cell">
<p class="stats_num">99.99%</p>
<p class="stats_label">Uptime SLA</p>
</li>
<li class="stats_cell">
<p class="stats_num">38ms</p>
<p class="stats_label">Median latency</p>
</li>
<li class="stats_cell">
<p class="stats_num">120+</p>
<p class="stats_label">Edge regions</p>
</li>
<li class="stats_cell_last">
<p class="stats_num">4.2B</p>
<p class="stats_label">Requests / day</p>
</li>
</ul>
</div>
</section>
<style>
.stats_component {
position:relative;
overflow:hidden;
background:#05060a;
padding:120px 24px;
font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.stats_glow {
pointer-events:none;
position:absolute;
left:50%;
top:-160px;
width:820px;
height:520px;
transform:translateX(-50%);
background:radial-gradient(closest-side,rgba(0,229,192,0.35),rgba(0,229,192,0));
filter:blur(130px);
opacity:0.6;
}
.stats_inner {
position:relative;
z-index:1;
max-width:1140px;
margin:0 auto;
display:flex;
flex-direction:column;
align-items:center;
}
.stats_eyebrow {
margin:0 0 18px 0;
font-size:13px;
font-weight:500;
text-transform:uppercase;
letter-spacing:0.22em;
color:#00e5c0;
}
.stats_title {
margin:0 0 16px 0;
max-width:720px;
text-align:center;
font-size:44px;
font-weight:700;
line-height:1.05;
letter-spacing:-0.02em;
color:#ffffff;
}
.stats_sub {
margin:0 0 72px 0;
max-width:560px;
text-align:center;
font-size:17px;
line-height:1.6;
color:#9aa0ac;
}
.stats_row {
width:100%;
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
border:1px solid rgba(255,255,255,0.06);
border-radius:20px;
background:rgba(255,255,255,0.02);
overflow:hidden;
}
.stats_cell {
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
padding:46px 28px;
text-align:center;
background:rgba(255,255,255,0.015);
border-right:1px solid rgba(255,255,255,0.05);
}
.stats_num {
margin:0;
font-size:64px;
font-weight:700;
line-height:0.95;
letter-spacing:-0.04em;
color:#ffffff;
}
.stats_label {
margin:0;
font-size:13px;
font-weight:500;
text-transform:uppercase;
letter-spacing:0.14em;
color:#8a909c;
}
.stats_cell_last {
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
padding:46px 28px;
text-align:center;
background:rgba(255,255,255,0.015);
}
</style>One email unlocks copying across the whole library — that's the only ask.