Blog: 3 post cards

What you receive in Webflow

• 18 native elements and 10 classes.
• Breakpoints: tablet (991px).
• 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="blog1">
  <div class="blog1-inner">
    <div class="blog1-head"><h2 class="blog1-title">From the blog</h2><a href="#" class="blog1-all">View all posts →</a></div>
    <div class="blog1-grid">
      <a href="#" class="blog1-card"><img class="blog1-img" src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&q=80" alt="" loading="lazy"><div class="blog1-meta">Guides · 5 min read</div><h3 class="blog1-post">10 ways to speed up your website</h3></a>
      <a href="#" class="blog1-card"><img class="blog1-img" src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=800&q=80" alt="" loading="lazy"><div class="blog1-meta">Company · 3 min read</div><h3 class="blog1-post">We raised our Series A</h3></a>
      <a href="#" class="blog1-card"><img class="blog1-img" src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=800&q=80" alt="" loading="lazy"><div class="blog1-meta">Design · 7 min read</div><h3 class="blog1-post">A practical guide to design systems</h3></a>
    </div>
  </div>
</section>
<style>
.blog1 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; padding:96px 24px; background:#fff; }
.blog1-inner { max-width:1200px; margin:0 auto; }
.blog1-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; gap:16px; }
.blog1-title { font-size:36px; color:#0f172a; margin:0; }
.blog1-all { color:#4353ff; text-decoration:none; font-weight:600; }
.blog1-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; }
.blog1-card { display:block; text-decoration:none; color:#0f172a; }
.blog1-img { width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:14px; margin-bottom:16px; }
.blog1-meta { font-size:13px; color:#64748b; margin-bottom:6px; }
.blog1-post { font-size:20px; line-height:1.35; margin:0; }
@media (max-width:991px) { .blog1-grid { grid-template-columns:1fr; } }
</style>