{
CF
}
Code
Fronts
Back to CSS Hero Sections
Social Proof Hero
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.hs-sp2 { width: 100%; min-height: clamp(220px, 28vh, 100vh); padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px); background: radial-gradient(60% 40% at 50% 0%, rgba(124,108,255,0.16), transparent 70%), #0e0e16; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-family: system-ui, sans-serif; color: #f0eeff; text-align: center; } .hs-sp2-stars { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(10px, 1.4vw, 12px); padding: 4px 12px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } .hs-sp2-stars > span:first-child { color: #f5a84a; letter-spacing: 1px; } .hs-sp2-rating { color: #fff; font-weight: 700; } .hs-sp2-count { color: #b8b6d4; } .hs-sp2 h1 { margin: 4px 0; font-size: clamp(18px, 4.5vw, 48px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; max-width: 700px; } .hs-sp2 p { margin: 0; font-size: clamp(11px, 1.5vw, 16px); color: #b8b6d4; max-width: 520px; } .hs-sp2-cta { padding: 9px 20px; border-radius: 7px; background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff; font-size: clamp(11px, 1.5vw, 14px); font-weight: 700; text-decoration: none; margin-top: 4px; transition: filter 0.15s; } .hs-sp2-cta:hover { filter: brightness(1.12); } .hs-sp2-logos { display: flex; flex-wrap: wrap; gap: clamp(12px, 3vw, 32px); justify-content: center; margin-top: clamp(8px, 2vh, 24px); padding-top: clamp(8px, 2vh, 24px); border-top: 1px solid rgba(255,255,255,0.08); font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: clamp(11px, 1.5vw, 15px); color: #6a6a85; }
<section class="hs-sp2"> <div class="hs-sp2-stars"> <span>★★★★★</span> <span class="hs-sp2-rating">4.9</span> <span class="hs-sp2-count">· Loved by 12,000+ teams</span> </div> <h1>The framework teams actually finish projects with.</h1> <p>Drop-in components. Real defaults. No 200-page handbook.</p> <a class="hs-sp2-cta" href="#">Start building →</a> <div class="hs-sp2-logos"> <span>Acme</span> <span>Globex</span> <span>Initech</span> <span>Hooli</span> <span>Stark</span> </div> </section>
Live preview
Ready