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="features">
  <header>
    <span class="eyebrow">Features</span>
    <h2>Everything you need to launch</h2>
  </header>
  <div class="grid">
    <article class="card wide dark">
      <h3>Realtime collaboration</h3>
      <p>See every change as it happens. Comments, cursors and history are built in.</p>
    </article>
    <article class="card">
      <div class="icon">&#9889;</div>
      <h3>Fast by default</h3>
      <p>Pages load in under a second on any device.</p>
    </article>
    <article class="card">
      <div class="icon">&#128274;</div>
      <h3>Secure</h3>
      <p>SSO, audit logs and encryption at rest.</p>
    </article>
    <article class="card">
      <div class="icon">&#128202;</div>
      <h3>Insightful</h3>
      <p>Dashboards that answer real questions.</p>
    </article>
    <article class="card">
      <div class="icon">&#128279;</div>
      <h3>Connected</h3>
      <p>200+ integrations, plus a full API.</p>
    </article>
  </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.

Build a responsive "bento grid" features section in plain HTML and CSS.

Content:
- Centred header: small uppercase orange eyebrow "Features" and heading "Everything you need to launch".
- Five feature cards. The first is a featured card ("Realtime collaboration") that spans two columns with a navy (#002057) background and white text. The other four are white cards, each with an emoji icon in a tinted rounded square, a title and one sentence.

Styling:
- Section background #f7f7f7, padding 88px 6vw.
- CSS grid: three equal columns, 20px gap, max-width 1100px, centred.
- Cards: 28px padding, 16px radius, 1px #e8e9f0 border; lift 4px with a soft shadow on hover.
- Responsive: two columns below 900px, one column below 600px (the featured card stops spanning).
- System font stack. No JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Lay out the cards with CSS grid: grid-template-columns: repeat(3, 1fr).

2. 2

   Make the featured card larger with grid-column: span 2. The remaining cards flow around it automatically.

3. 3

   Style all cards from one shared .card rule, then override colours for the dark featured card.

4. 4

   Add a hover lift using transform: translateY(-4px) and a box-shadow, both with a transition.

5. 5

   Reduce the columns with two media queries, and reset the span to 1 on mobile so the wide card does not overflow.

Customisation tips

• Add grid-row: span 2 to another card to create a tall tile for a more varied bento layout.
• Replace emoji with inline SVG icons for consistent rendering across devices.
• Put a small product screenshot inside the featured card to make it the focal point.

More sections