src/components/list/ListHighlight.astro
---
// ListHighlight, recovered from blurr-components.pages.dev
---
<ul class="lst-hl"> <li class="lst-hl__item lst-hl__item--hl"> <span class="lst-hl__dot" aria-hidden="true"></span> <span class="lst-hl__text">Verhoog je conversieratio met bewezen CRO-technieken</span> </li><li class="lst-hl__item"> <span class="lst-hl__dot" aria-hidden="true"></span> <span class="lst-hl__text">Verlaag je cost-per-acquisition stap voor stap</span> </li><li class="lst-hl__item lst-hl__item--hl"> <span class="lst-hl__dot" aria-hidden="true"></span> <span class="lst-hl__text">Schaal je best-presterende campagnes op het juiste moment</span> </li><li class="lst-hl__item"> <span class="lst-hl__dot" aria-hidden="true"></span> <span class="lst-hl__text">Automatiseer je rapportage en bespaar uren per week</span> </li> </ul>
<style>
.lst-hl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.lst-hl__item{display:flex;align-items:flex-start;gap:.7rem;padding:.65rem .85rem;border-radius:.5rem;font-size:.95rem;color:var(--color-primary);background:transparent;transition:background .15s}
.lst-hl__item--hl{background:#6366f112;font-weight:600}
.lst-hl__dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);flex-shrink:0;margin-top:.35rem}
</style>