ListTimeline list

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

<div class="lst-tl"> <div class="lst-tl__item"> <div class="lst-tl__aside"> <span class="lst-tl__date">2020</span> <div class="lst-tl__connector"> <div class="lst-tl__dot"></div> <div class="lst-tl__line"></div> </div> </div> <div class="lst-tl__body"> <strong class="lst-tl__title">BLURR opgericht</strong> <p class="lst-tl__desc">Gestart als klein Google Ads bureau in Amsterdam.</p> </div> </div><div class="lst-tl__item"> <div class="lst-tl__aside"> <span class="lst-tl__date">2021</span> <div class="lst-tl__connector"> <div class="lst-tl__dot"></div> <div class="lst-tl__line"></div> </div> </div> <div class="lst-tl__body"> <strong class="lst-tl__title">Team uitgebreid</strong> <p class="lst-tl__desc">Van 2 naar 12 specialisten in één jaar.</p> </div> </div><div class="lst-tl__item"> <div class="lst-tl__aside"> <span class="lst-tl__date">2022</span> <div class="lst-tl__connector"> <div class="lst-tl__dot"></div> <div class="lst-tl__line"></div> </div> </div> <div class="lst-tl__body"> <strong class="lst-tl__title">Eerste €1M omzet</strong> <p class="lst-tl__desc">Mijlpaal bereikt voor onze klanten.</p> </div> </div><div class="lst-tl__item"> <div class="lst-tl__aside"> <span class="lst-tl__date">2024</span> <div class="lst-tl__connector"> <div class="lst-tl__dot"></div> <div class="lst-tl__line"></div> </div> </div> <div class="lst-tl__body"> <strong class="lst-tl__title">Landelijke naam</strong> <p class="lst-tl__desc">Top 10 snelst groeiende marketingbureaus NL.</p> </div> </div> </div>

<style>
.lst-tl{display:flex;flex-direction:column}
.lst-tl__item{display:grid;grid-template-columns:80px 1fr;gap:1rem;position:relative}
.lst-tl__aside{display:flex;flex-direction:column;align-items:flex-end;gap:0;position:relative}
.lst-tl__date{font-size:.78rem;font-weight:700;color:var(--color-accent);letter-spacing:.04em;padding-top:.1rem}
.lst-tl__connector{display:flex;flex-direction:column;align-items:center;flex:1;gap:0;position:absolute;right:-1rem;top:.5rem;bottom:0}
.lst-tl__dot{width:10px;height:10px;border-radius:50%;background:var(--color-accent);flex-shrink:0}
.lst-tl__line{width:2px;flex:1;background:#e5e5e5;min-height:1rem}
.lst-tl__item:last-child .lst-tl__line{display:none}
.lst-tl__body{padding-bottom:1.75rem;padding-left:.5rem}
.lst-tl__title{display:block;font-size:.975rem;font-weight:700;color:var(--color-primary);margin-bottom:.2rem}
.lst-tl__desc{margin:0;font-size:.875rem;color:#666;line-height:1.55}
</style>