Cards: mouse spotlight

What you receive in Webflow

• 19 native elements and 8 classes.
• Breakpoints: mobile landscape (767px), tablet (991px).
• States: hover.
• 2 Embed elements keep the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

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="sp">
  <div class="sp-inner">
    <h2 class="sp-title">Security you don't have to think about</h2>
    <div class="sp-grid">
      <div class="sp-card"><div class="sp-icon">◆</div><h3 class="sp-card-title">Encrypted at rest</h3><p class="sp-card-text">AES-256 for every file and backup, with keys rotated automatically.</p></div>
      <div class="sp-card"><div class="sp-icon">◎</div><h3 class="sp-card-title">Single sign-on</h3><p class="sp-card-text">SAML and OIDC with Okta, Google and Azure AD on every paid plan.</p></div>
      <div class="sp-card"><div class="sp-icon">▲</div><h3 class="sp-card-title">Audit everything</h3><p class="sp-card-text">Every sign-in, export and permission change is logged and searchable.</p></div>
    </div>
  </div>
</section>
<style>
.sp { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #020617; color: #f8fafc; padding: 104px 24px; }
.sp-inner { max-width: 1120px; margin: 0 auto; }
.sp-title { font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; text-align: center; max-width: 640px; margin: 0 auto 56px; }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sp-card { position: relative; overflow: hidden; background: #0f172a; border: 1px solid #1e293b; border-radius: 18px; padding: 32px; transition: border-color 0.3s ease; }
.sp-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--x, 50%) var(--y, -40%), rgba(56, 189, 248, 0.18), transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.sp-card:hover { border-color: #38bdf8; }
.sp-card:hover::before { opacity: 1; }
.sp-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(56, 189, 248, 0.12); color: #38bdf8; font-size: 20px; margin-bottom: 28px; }
.sp-card-title { font-size: 20px; margin: 0 0 10px; }
.sp-card-text { font-size: 16px; line-height: 1.6; color: #94a3b8; margin: 0; }
@media (max-width: 991px) { .sp-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .sp { padding: 72px 20px; } .sp-title { font-size: 32px; } }
</style>
<script>
document.querySelectorAll(".sp-card").forEach(function (card) {
  card.addEventListener("pointermove", function (e) {
    var r = card.getBoundingClientRect();
    card.style.setProperty("--x", (e.clientX - r.left) + "px");
    card.style.setProperty("--y", (e.clientY - r.top) + "px");
  });
});
</script>