Badges & alerts

<span class="badge bg-primary">Primair</span><span class="badge rounded-pill bg-primary">Pill</span><span class="badge bg-secondary">Secundair</span><span class="badge bg-success">Succes</span><span class="badge bg-danger">Fout</span>

<span class="atlas-gold-pill"><svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true" class="" style="flex-shrink:0;overflow:visible"><line x1="9.00" y1="1.00" x2="9.00" y2="-2.50" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="9.00" cy="1.00" r="1.2" fill="var(--accent-gold)"/><line x1="13.00" y1="2.07" x2="14.75" y2="-0.96" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="13.00" cy="2.07" r="1.2" fill="var(--accent-gold)"/><line x1="15.93" y1="5.00" x2="18.96" y2="3.25" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="15.93" cy="5.00" r="1.2" fill="var(--accent-gold)"/><line x1="17.00" y1="9.00" x2="20.50" y2="9.00" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="17.00" cy="9.00" r="1.2" fill="var(--accent-gold)"/><line x1="15.93" y1="13.00" x2="18.96" y2="14.75" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="15.93" cy="13.00" r="1.2" fill="var(--accent-gold)"/><line x1="13.00" y1="15.93" x2="14.75" y2="18.96" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="13.00" cy="15.93" r="1.2" fill="var(--accent-gold)"/><line x1="9.00" y1="17.00" x2="9.00" y2="20.50" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="9.00" cy="17.00" r="1.2" fill="var(--accent-gold)"/><line x1="5.00" y1="15.93" x2="3.25" y2="18.96" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="5.00" cy="15.93" r="1.2" fill="var(--accent-gold)"/><line x1="2.07" y1="13.00" x2="-0.96" y2="14.75" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="2.07" cy="13.00" r="1.2" fill="var(--accent-gold)"/><line x1="1.00" y1="9.00" x2="-2.50" y2="9.00" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="1.00" cy="9.00" r="1.2" fill="var(--accent-gold)"/><line x1="2.07" y1="5.00" x2="-0.96" y2="3.25" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="2.07" cy="5.00" r="1.2" fill="var(--accent-gold)"/><line x1="5.00" y1="2.07" x2="3.25" y2="-0.96" stroke="rgba(212,162,76,0.52)" stroke-width="0.5" stroke-linecap="round"/><circle cx="5.00" cy="2.07" r="1.2" fill="var(--accent-gold)"/></svg>Tilburg · EU</span><span class="atlas-eu-kicker">EU · Hosting [TE BEVESTIGEN]</span>

<span style="display:inline-flex;align-items:center;gap:5px;padding:3px 8px;background:rgba(46,229,157,.1);border:1px solid rgba(46,229,157,.28);border-radius:999px;font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--success);letter-spacing:.12em;text-transform:uppercase"><span style="width:5px;height:5px;border-radius:999px;background:var(--success);box-shadow:0 0 6px var(--success)"></span>GO ✓</span><span class="chip-status atlas-chip-card" style="display:inline-flex;padding:6px 12px;min-height:0;width:auto"><span></span> LIVE</span><span style="display:inline-flex;align-items:center;gap:8px;padding:5px 12px;background:rgba(46,128,255,.06);border:1px solid rgba(46,128,255,.16);border-radius:99px;font-family:var(--font-mono);font-size:10px;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase">Typisch traject: 8-16 weken</span>

<ul class="a5-chip-list" style="width:100%"><li>Odoo</li><li>Exact Online</li><li>WooCommerce</li><li>Webshop</li><li>Voorraad</li><li>Boekhouding</li></ul>

<div class="alert alert-success d-flex gap-2 align-items-start" role="alert"><svg class="atlas-icon " width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg><div><strong>Gelukt.</strong> Je aanvraag is verzonden.</div></div><div class="alert alert-info d-flex gap-2 align-items-start" role="alert"><svg class="atlas-icon " width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg><div><strong>Let op.</strong> Dit is een informatieve melding.</div></div><div class="alert alert-warning d-flex gap-2 align-items-start" role="alert"><svg class="atlas-icon " width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg><div><strong>Controleer.</strong> Er ontbreken nog gegevens.</div></div><div class="alert alert-danger d-flex gap-2 align-items-start" role="alert"><svg class="atlas-icon " width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg><div><strong>Fout.</strong> Het versturen is mislukt, probeer het opnieuw.</div></div>

<div style="max-width:720px;background:var(--a5-bg-0);border:1px solid var(--a5-border-strong);border-radius:5px;padding:16px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap"><span style="color:var(--a5-text-2)">Alleen functionele cookies, geen tracking. <a href="#" class="btn btn-link btn-sm px-0">Cookieverklaring</a></span><span class="d-flex gap-2"><a href="#" role="button" class="btn btn-outline-primary btn-sm">Alleen het essentiële</a><a href="#" role="button" class="btn btn-outline-primary btn-sm">Ik ga akkoord</a></span></div>