Free Section
Modern Bento Grid Features
An asymmetric bento grid feature layout with glowing gradient borders, metric chips, and responsive flex/grid structure.
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="bento-sec">
<div class="bento-header">
<span class="bento-badge">ā¦ Architecture & Infrastructure</span>
<h2>Built for high-throughput modern teams</h2>
<p>Everything you need to ship, monitor, and scale distributed applications without infrastructure friction.</p>
</div>
<div class="bento-grid">
<!-- Large Card: 2 Cols -->
<div class="bento-card bento-wide">
<div class="bento-tag">Real-Time Sync</div>
<h3>Sub-millisecond global state replication</h3>
<p>Data automatically synchronizes across 35 edge regions with instant optimistic UI updates and CRDT conflict resolution.</p>
<div class="bento-vis-globe">
<div class="globe-point p1"></div>
<div class="globe-point p2"></div>
<div class="globe-point p3"></div>
<div class="globe-conn"></div>
</div>
</div>
<!-- Tall Card: 1 Col -->
<div class="bento-card">
<div class="bento-tag" style="color: #34d399; border-color: rgba(52, 211, 153, 0.3);">99.999% SLA</div>
<h3>Fault-Tolerant Clusters</h3>
<p>Automatic failover and zero cold-start replication guarantee uninterrupted system uptime.</p>
<div class="bento-metric-box">
<span class="bento-num">0.02ms</span>
<span class="bento-lbl">P99 Query Latency</span>
</div>
</div>
<!-- Regular Card -->
<div class="bento-card">
<div class="bento-tag" style="color: #60a5fa; border-color: rgba(96, 165, 250, 0.3);">Enterprise Security</div>
<h3>SOC2 & End-to-End Encryption</h3>
<p>Every payload is encrypted in transit and at rest with hardware-backed KMS keys.</p>
</div>
<!-- Wide Card 2: 2 Cols -->
<div class="bento-card bento-wide">
<div class="bento-tag" style="color: #f472b6; border-color: rgba(244, 114, 182, 0.3);">Developer Experience</div>
<h3>First-Class TypeScript SDK</h3>
<p>Enjoy end-to-end type safety, auto-generated schema migrations, and zero-config CI test pipelines.</p>
<div class="bento-code-chip">
<code>$ npx @orbit/cli deploy --production</code>
</div>
</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 a modern SaaS bento grid features section in HTML and CSS. Requirements: - Asymmetric 3-column CSS Grid where select cards span 2 columns (.bento-wide). - Deep dark slate theme (#030712) with glowing border hover transitions. - Varied internal card contents: live metric badge, terminal CLI chip, and pulsing node status visual. - Responsive design that folds cleanly to a single column on mobile. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use CSS grid-template-columns: repeat(3, 1fr) with grid-column: span 2 for priority cards.
- 2
Add glowing borders and soft translateY hover transitions.
- 3
Implement responsive media queries for tablet and mobile screens.
Customisation tips
- Keep card padding uniform (e.g. 32px 28px) for geometric harmony.
- Use different accent colors for each card tag to establish visual hierarchy.