Features: bento grid

What you receive in Webflow

• 16 native elements and 10 classes.
• Breakpoints: mobile landscape (767px).
• No Embed elements. Everything is native.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="bento">
  <div class="bento-inner">
    <h2 class="bento-title">One platform. Every workflow.</h2>
    <div class="bento-grid">
      <div class="bento-card bento-card-wide"><h3 class="bento-card-title">Visual editor</h3><p class="bento-card-text">Drag, drop and publish. What you see is exactly what ships.</p></div>
      <div class="bento-card bento-card-accent"><h3 class="bento-card-title">99.99%</h3><p class="bento-card-text">Uptime, backed by an SLA.</p></div>
      <div class="bento-card"><h3 class="bento-card-title">CMS</h3><p class="bento-card-text">Structured content your whole team can edit.</p></div>
      <div class="bento-card bento-card-wide"><h3 class="bento-card-title">Global CDN</h3><p class="bento-card-text">Served from 300+ locations so every visitor gets a fast page.</p></div>
    </div>
  </div>
</section>
<style>
.bento { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; padding:96px 24px; background:#0b1020; color:#fff; }
.bento-inner { max-width:1100px; margin:0 auto; }
.bento-title { font-size:40px; margin:0 0 40px; text-align:center; }
.bento-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.bento-card { background:#151b33; border:1px solid #232b4d; border-radius:18px; padding:32px; min-height:200px; }
.bento-card-wide { grid-column:span 2; }
.bento-card-accent { background:#4353ff; border-color:#4353ff; }
.bento-card-title { font-size:24px; margin:0 0 10px; }
.bento-card-text { font-size:16px; line-height:1.6; color:#c3c9e6; margin:0; }
.bento-card-accent .bento-card-text { color:#e3e6ff; }
@media (max-width:767px) { .bento-grid { grid-template-columns:1fr; } .bento-card-wide { grid-column:span 1; } }
</style>