Zoeken...  ⌘K GitHub

IconNumbers icon

IconNumbers component.

/icon-numbers
src/components/icon/IconNumbers.astro
---
// IconNumbers, recovered from blurr-components.pages.dev
---

<div class="inum-wrap"> <div class="inum-item"> <div class="inum-left"> <span class="inum-number">01</span> <div class="inum-line"></div> </div> <div class="inum-body"> <span class="inum-icon"></span> <h3 class="inum-title">Intake &amp; analyse</h3> <p class="inum-desc">We verkennen jouw markt, doelgroep en concurrenten. Alles om een strategie te bouwen die echt werkt.</p> </div> </div><div class="inum-item"> <div class="inum-left"> <span class="inum-number">02</span> <div class="inum-line"></div> </div> <div class="inum-body"> <span class="inum-icon"></span> <h3 class="inum-title">Strategisch plan</h3> <p class="inum-desc">Een concreet marketingplan met prioriteiten, kanalen en KPI&#39;s, goedgekeurd door jou.</p> </div> </div><div class="inum-item"> <div class="inum-left"> <span class="inum-number">03</span> <div class="inum-line"></div> </div> <div class="inum-body"> <span class="inum-icon">→</span> <h3 class="inum-title">Uitvoering &amp; lancering</h3> <p class="inum-desc">Ons team zet alles live. Van campagnes tot content, snel en zorgvuldig.</p> </div> </div><div class="inum-item"> <div class="inum-left"> <span class="inum-number">04</span> <div class="inum-line"></div> </div> <div class="inum-body"> <span class="inum-icon">→</span> <h3 class="inum-title">Meten &amp; optimaliseren</h3> <p class="inum-desc">Wekelijkse monitoring en maandelijkse optimalisatieronde zorgen voor blijvende groei.</p> </div> </div> </div>

<style>
.inum-wrap{--color-accent: #6366f1;--color-primary: #0a0a0a;display:flex;flex-direction:column;gap:0;max-width:620px;font-family:system-ui,sans-serif;padding:24px}
.inum-item{display:flex;gap:20px}
.inum-left{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.inum-number{width:40px;height:40px;border-radius:50%;background:var(--color-accent);color:#fff;font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.inum-line{width:2px;flex:1;background:#e5e7eb;margin:4px 0}
.inum-item:last-child .inum-line{display:none}
.inum-body{padding-bottom:32px;display:flex;flex-direction:column;gap:6px}
.inum-item:last-child .inum-body{padding-bottom:0}
.inum-icon{font-size:1.2rem}
.inum-title{margin:0;font-size:1rem;font-weight:700;color:var(--color-primary)}
.inum-desc{margin:0;font-size:.875rem;line-height:1.65;color:#6b7280}
</style>