IconHorizontal icon

---
// IconHorizontal, recovered from blurr-components.pages.dev
---

<div class="ihor-list"> <div class="ihor-item"> <div class="ihor-icon-wrap"> <span class="ihor-icon">→</span> </div> <div class="ihor-content"> <h3 class="ihor-title">Klantgerichte strategie</h3> <p class="ihor-desc">We starten met jouw klant, wie zijn ze, wat zoeken ze, hoe beslissen ze. Van daaruit bouwen we je marketingaanpak.</p> </div> </div><div class="ihor-item"> <div class="ihor-icon-wrap"> <span class="ihor-icon">→</span> </div> <div class="ihor-content"> <h3 class="ihor-title">Data als fundament</h3> <p class="ihor-desc">Beslissingen op basis van feiten, niet gevoel. We meten wat werkt en schalen dat op, continu.</p> </div> </div><div class="ihor-item"> <div class="ihor-icon-wrap"> <span class="ihor-icon"></span> </div> <div class="ihor-content"> <h3 class="ihor-title">Transparante samenwerking</h3> <p class="ihor-desc">Geen verborgen kosten, geen vage resultaten. Je weet altijd wat we doen en waarom.</p> </div> </div><div class="ihor-item"> <div class="ihor-icon-wrap"> <span class="ihor-icon"></span> </div> <div class="ihor-content"> <h3 class="ihor-title">Agile werkwijze</h3> <p class="ihor-desc">Korte sprints, snelle feedback en doorlopende verbetering zodat we flexibel reageren op marktveranderingen.</p> </div> </div> </div>

<style>
.ihor-list{--color-accent: #6366f1;--color-primary: #0a0a0a;display:flex;flex-direction:column;gap:0;font-family:system-ui,sans-serif;max-width:680px}
.ihor-item{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid #f0f0f0;align-items:flex-start}
.ihor-item:last-child{border-bottom:none}
.ihor-icon-wrap{width:48px;height:48px;flex-shrink:0;background:#f5f3ff;border-radius:10px;display:flex;align-items:center;justify-content:center}
.ihor-icon{font-size:1.4rem}
.ihor-content{flex:1}
.ihor-title{margin:0 0 6px;font-size:1rem;font-weight:700;color:var(--color-primary)}
.ihor-desc{margin:0;font-size:.875rem;line-height:1.65;color:#6b7280}
</style>