AwardsBadges UI Elements

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

<section class="aw aw--light"> <div class="aw-inner"> <p class="aw-eyebrow">Erkend &amp; gecertificeerd</p>  <div class="aw-grid"> <div class="aw-item"> <span class="aw-icon">→</span> <span class="aw-title">Best Marketing Agency</span> <span class="aw-issuer">Dutch Marketing Awards</span> <span class="aw-year">2024</span> </div><div class="aw-item"> <span class="aw-icon">→</span> <span class="aw-title">Google Premier Partner</span> <span class="aw-issuer">Google Nederland</span> <span class="aw-year">2023</span> </div><div class="aw-item"> <span class="aw-icon"></span> <span class="aw-title">Emerce 100</span> <span class="aw-issuer">Emerce Magazine</span> <span class="aw-year">2024</span> </div><div class="aw-item"> <span class="aw-icon"></span> <span class="aw-title">Meta Business Partner</span> <span class="aw-issuer">Meta Platforms</span> <span class="aw-year">2024</span> </div> </div> </div> </section>

<style>
.aw{padding:4rem 2rem}
.aw--white{background:#fff;border-top:1px solid #e5e7eb}
.aw--light{background:#f8fafc;border-top:1px solid #e5e7eb}
.aw--dark{background:#111827}
.aw-inner{max-width:1100px;margin:0 auto;text-align:center}
.aw-eyebrow{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 1rem}
.aw--white .aw-eyebrow,.aw--light .aw-eyebrow{color:#9ca3af}
.aw--dark .aw-eyebrow{color:#ffffff4d}
.aw-headline{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.03em;margin:0 0 2.5rem}
.aw--white .aw-headline,.aw--light .aw-headline{color:#0a0a0a}
.aw--dark .aw-headline{color:#fff}
.aw-grid{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.aw-item{display:flex;flex-direction:column;align-items:center;gap:.625rem;padding:1.75rem 1.5rem;border-radius:1rem;min-width:140px}
.aw--white .aw-item{background:#f8fafc;border:1px solid #e5e7eb}
.aw--light .aw-item{background:#fff;border:1px solid #e5e7eb;box-shadow:0 2px 12px #0000000a}
.aw--dark .aw-item{background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}
.aw-icon{font-size:2rem}
.aw-title{font-size:.875rem;font-weight:700;text-align:center;line-height:1.3}
.aw--white .aw-title,.aw--light .aw-title{color:#0a0a0a}
.aw--dark .aw-title{color:#fff}
.aw-issuer{font-size:.75rem;text-align:center}
.aw--white .aw-issuer,.aw--light .aw-issuer{color:#6b7280}
.aw--dark .aw-issuer{color:#fff6}
.aw-year{font-size:.6875rem;font-family:monospace;font-weight:600}
.aw--white .aw-year,.aw--light .aw-year{color:#9ca3af}
.aw--dark .aw-year{color:#ffffff40}
</style>