Contact: info cards

What you receive in Webflow

• 14 native elements and 8 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="contact1">
  <div class="contact1-inner">
    <h2 class="contact1-title">Get in touch</h2>
    <p class="contact1-sub">We usually reply within a few hours.</p>
    <div class="contact1-grid">
      <div class="contact1-card"><h3 class="contact1-label">Email</h3><a href="mailto:hello@example.com" class="contact1-value">hello@example.com</a></div>
      <div class="contact1-card"><h3 class="contact1-label">Phone</h3><a href="tel:+442000000000" class="contact1-value">+44 20 0000 0000</a></div>
      <div class="contact1-card"><h3 class="contact1-label">Office</h3><p class="contact1-value">1 Example Street, London</p></div>
    </div>
  </div>
</section>
<style>
.contact1 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; padding:96px 24px; background:#f7f8fc; }
.contact1-inner { max-width:1000px; margin:0 auto; text-align:center; }
.contact1-title { font-size:40px; color:#0f172a; margin:0 0 12px; }
.contact1-sub { font-size:18px; color:#64748b; margin:0 0 40px; }
.contact1-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.contact1-card { background:#fff; border-radius:14px; padding:28px; }
.contact1-label { font-size:14px; text-transform:uppercase; letter-spacing:0.08em; color:#94a3b8; margin:0 0 8px; }
.contact1-value { font-size:17px; color:#0f172a; text-decoration:none; font-weight:600; margin:0; }
@media (max-width:767px) { .contact1-grid { grid-template-columns:1fr; } }
</style>