IconEmoji icon

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

<section class="iem"> <div class="iem__header"> <h2 class="iem__title">De BLURR belofte</h2> <p class="iem__subtitle">Dit is waar wij elke dag voor staan.</p> </div> <div class="iem__items iem__items--grid"> <div class="iem__item"> <span class="iem__emoji" role="img" aria-label="Snel van start">→</span> <div class="iem__text"> <p class="iem__name">Snel van start</p> <p class="iem__body">Live binnen 5 werkdagen, gegarandeerd.</p> </div> </div><div class="iem__item"> <span class="iem__emoji" role="img" aria-label="Doel voor ogen">→</span> <div class="iem__text"> <p class="iem__name">Doel voor ogen</p> <p class="iem__body">Elk project begint met heldere KPIs.</p> </div> </div><div class="iem__item"> <span class="iem__emoji" role="img" aria-label="Creatief en slim">→</span> <div class="iem__text"> <p class="iem__name">Creatief en slim</p> <p class="iem__body">Frisse ideeën met een solide strategie.</p> </div> </div><div class="iem__item"> <span class="iem__emoji" role="img" aria-label="Echte samenwerking"></span> <div class="iem__text"> <p class="iem__name">Echte samenwerking</p> <p class="iem__body">Jij bent de baas, wij zijn de experts.</p> </div> </div><div class="iem__item"> <span class="iem__emoji" role="img" aria-label="Groei centraal">→</span> <div class="iem__text"> <p class="iem__name">Groei centraal</p> <p class="iem__body">Alles draait om meetbaar resultaat.</p> </div> </div><div class="iem__item"> <span class="iem__emoji" role="img" aria-label="Volledig transparant">→</span> <div class="iem__text"> <p class="iem__name">Volledig transparant</p> <p class="iem__body">Realtime inzicht in alles wat we doen.</p> </div> </div> </div> </section>

<style>
.iem{padding:3rem 0}
.iem__header{text-align:center;margin-bottom:3rem}
.iem__title{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.iem__subtitle{font-size:1rem;color:#777;margin:0}
.iem__items--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.iem__items--list{display:flex;flex-direction:column;gap:1.25rem}
.iem__item{display:flex;align-items:flex-start;gap:1rem}
.iem__items--grid .iem__item{flex-direction:column;align-items:flex-start;padding:1.5rem;background:#fff;border:1px solid #eee;border-radius:12px}
.iem__emoji{font-size:2rem;flex-shrink:0}
.iem__items--list .iem__emoji{font-size:1.5rem;margin-top:.1rem}
.iem__name{font-size:.95rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .3rem}
.iem__body{font-size:.875rem;color:#777;line-height:1.55;margin:0}
.iem__items--grid{grid-template-columns:repeat(2,1fr)}
.iem__items--grid{grid-template-columns:1fr}
</style>