Free Section
Enterprise Customer Bento Wall
An asymmetric social proof bento grid featuring enterprise metrics (+140% speedup), customer quotes, and client logos.
Colours in this gradient
#030712#6366f1#10b981#ffffff
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<section class="cust-bento-sec">
<div class="cb-header">
<span class="cb-badge">Enterprise Impact</span>
<h2>Empowering industry-defining systems</h2>
<p>Discover how teams accelerate delivery velocity and reduce cloud infrastructure spend.</p>
</div>
<div class="cb-grid">
<div class="cb-card cb-featured">
<div class="cb-metric">+140%</div>
<div class="cb-metric-label">Query throughput speedup</div>
<p class="cb-quote">"Orbit allowed our engineering org to decommission 16 redundant Redis instances and cut latency down to 2ms."</p>
<div class="cb-author">Engineering Lead Ā· CloudScale Systems</div>
</div>
<div class="cb-card">
<div class="cb-stat-num">99.999%</div>
<div class="cb-stat-title">Cluster Availability</div>
<p>Zero unplanned outages across 3 years of production workloads.</p>
</div>
<div class="cb-card">
<div class="cb-stat-num">35+</div>
<div class="cb-stat-title">Global Edge Nodes</div>
<p>Automatic low-latency routing to the nearest regional data center.</p>
</div>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Create an asymmetric customer social proof bento grid section in HTML and CSS. Requirements: - Asymmetric grid where featured card spans 2 rows (grid-row: span 2). - Large highlighted percentage stat (+140%) and italicized quote. - Smaller companion cards with technical SLA metrics. - Dark theme with indigo and green accents. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use CSS grid with grid-template-columns: 1.3fr 1fr.
- 2
Apply grid-row: span 2 to featured testimonial card.
- 3
Add responsive media query to fold to single column on mobile.
Customisation tips
- Keep metric numbers bold and clear with line-height: 1.