MediaFeature UI Elements

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

<section class="mf mf--img-right"> <div class="mf-inner"> <div class="mf-image"> <img data-allow-img src="/img/ext/photo-1551288049-bebda4e38f71-w800-75147e.jpg" alt="Dashboard analytics" class="mf-img" loading="lazy" decoding="async" > </div> <div class="mf-content"> <span class="mf-eyebrow">Onze werkwijze</span> <h2 class="mf-headline">Van data naar beslissing in real-time.</h2> <p class="mf-sub">Wij koppelen alle kanalen aan één centrale rapportage, zodat je altijd weet waar je groei vandaan komt.</p> <ul class="mf-points"> <li class="mf-point"> <span class="mf-point-icon">&#10003;</span> <div> <strong class="mf-point-title">Live koppeling</strong> <p class="mf-point-body">Google Ads, Meta en GA4 in één overzicht.</p> </div> </li><li class="mf-point"> <span class="mf-point-icon">&#10003;</span> <div> <strong class="mf-point-title">Dagelijkse updates</strong> <p class="mf-point-body">Geen wekelijkse rapporten, elke dag inzicht.</p> </div> </li><li class="mf-point"> <span class="mf-point-icon">&#10003;</span> <div> <strong class="mf-point-title">Actie-gericht</strong> <p class="mf-point-body">Niet alleen cijfers, maar aanbevelingen.</p> </div> </li> </ul> <a href="#" class="mf-cta">Bekijk ons dashboard &rarr;</a> </div> </div> </section>

<style>
.mf{padding:5rem 2rem;background:#fff}
.mf-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.mf--img-left .mf-image{order:-1}
.mf--img-right .mf-image{order:1}
.mf-img{width:100%;border-radius:1rem;object-fit:cover;height:500px;display:block}
.mf-eyebrow{display:block;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:1rem}
.mf-headline{font-size:clamp(1.75rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#0a0a0a;margin:0 0 1rem}
.mf-sub{font-size:1.0625rem;color:#6b7280;line-height:1.65;margin:0 0 2rem}
.mf-points{list-style:none;padding:0;margin:0 0 2rem;display:flex;flex-direction:column;gap:1.25rem}
.mf-point{display:flex;align-items:flex-start;gap:.875rem}
.mf-point-icon{width:28px;height:28px;border-radius:50%;background:#6366f11a;color:var(--color-accent,#6366f1);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;margin-top:.125rem}
.mf-point-title{display:block;font-size:.9375rem;font-weight:700;color:#0a0a0a;margin-bottom:.25rem}
.mf-point-body{font-size:.875rem;color:#6b7280;line-height:1.55;margin:0}
.mf-cta{display:inline-flex;align-items:center;font-size:.9375rem;font-weight:700;color:var(--color-accent,#6366f1);text-decoration:none}
.mf-inner{grid-template-columns:1fr;gap:2rem}
.mf-img{height:280px}
</style>