Zoeken...  ⌘K GitHub

ContentBullets Sections

ContentBullets component.

/content-bullets
src/components/sections/ContentBullets.astro
---
// ContentBullets, recovered from blurr-components.pages.dev
---

<div class="cbu-wrap"> <h2 class="cbu-heading">Wat je krijgt met BLURR</h2> <p class="cbu-intro">Een samenwerking met BLURR is meer dan alleen campagnes uitvoeren.</p> <ul class="cbu-list cbu-list--check"> <li class="cbu-item"> <span class="cbu-marker" aria-hidden="true"> &#10003; </span> <span class="cbu-text">Een vaste strateeg die jouw business door en door kent</span> </li><li class="cbu-item"> <span class="cbu-marker" aria-hidden="true"> &#10003; </span> <span class="cbu-text">Wekelijkse campagne-updates en directe communicatie via Slack</span> </li><li class="cbu-item"> <span class="cbu-marker" aria-hidden="true"> &#10003; </span> <span class="cbu-text">Volledige transparantie over mediabudget en kosten</span> </li> </ul> </div>

<style>
.cbu-wrap{padding:2rem 0}
.cbu-heading{font-size:1.75rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 .75rem}
.cbu-intro{font-size:1rem;line-height:1.7;color:#555;margin:0 0 1.5rem}
.cbu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.cbu-item{display:flex;align-items:flex-start;gap:.875rem;padding:.85rem 1.25rem;background:#f9f9f9;border-radius:8px;border:1px solid #ebebeb}
.cbu-marker{font-weight:700;font-size:1rem;flex-shrink:0;margin-top:.05rem}
.cbu-list--check .cbu-marker{color:#22c55e}
.cbu-list--arrow .cbu-marker{color:var(--color-accent, #6366f1)}
.cbu-list--dot .cbu-marker{color:#999}
.cbu-list--number .cbu-marker{color:var(--color-accent, #6366f1);min-width:1.5rem}
.cbu-text{font-size:.975rem;line-height:1.5;color: #e8e8e8}
</style>