Zoeken...  ⌘K GitHub

ListNumbered list

ListNumbered component.

/list-numbered
src/components/list/ListNumbered.astro
---
// ListNumbered, recovered from blurr-components.pages.dev
---

<ol class="lst-num"> <li class="lst-num__item"> <span class="lst-num__n">01</span> <div class="lst-num__body"> <strong class="lst-num__title">Intake &amp; analyse</strong> <p class="lst-num__desc">We leren jouw business grondig kennen.</p> </div> </li><li class="lst-num__item"> <span class="lst-num__n">02</span> <div class="lst-num__body"> <strong class="lst-num__title">Strategie opstellen</strong> <p class="lst-num__desc">Maatwerk plan op basis van data.</p> </div> </li><li class="lst-num__item"> <span class="lst-num__n">03</span> <div class="lst-num__body"> <strong class="lst-num__title">Campagne lanceren</strong> <p class="lst-num__desc">Live gaan met bewezen formats.</p> </div> </li><li class="lst-num__item"> <span class="lst-num__n">04</span> <div class="lst-num__body"> <strong class="lst-num__title">Meten &amp; optimaliseren</strong> <p class="lst-num__desc">Continu verbeteren op basis van resultaten.</p> </div> </li> </ol>

<style>
.lst-num{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.lst-num__item{display:flex;align-items:flex-start;gap:1.25rem;padding:1.25rem 0;border-bottom:1px solid #efefef}
.lst-num__item:last-child{border-bottom:none}
.lst-num__n{font-size:.8rem;font-weight:800;color:var(--color-accent);font-variant-numeric:tabular-nums;flex-shrink:0;padding-top:.15rem;letter-spacing:.04em}
.lst-num__title{display:block;font-size:1rem;font-weight:700;color:var(--color-primary);margin-bottom:.2rem}
.lst-num__desc{margin:0;font-size:.9rem;color:#666;line-height:1.5}
</style>