Tabellen

<div class="table-responsive" tabindex="0" role="region" aria-label="Voorbeeldtabel"><table class="table  mb-0"><thead><tr><th>Token</th><th>Waarde</th><th>Gebruik</th></tr></thead><tbody><tr><td><code>--a5-brand-500</code></td><td>#1F6FE0</td><td>CTA-achtergrond, WCAG AA 4,76:1</td></tr><tr><td><code>--a5-brand-400</code></td><td>#4EA0FF</td><td>Link en accent</td></tr><tr><td><code>--a5-gold</code></td><td>#D4A24C</td><td>Secundair accent</td></tr><tr><td><code>--a5-r-card</code></td><td>5px</td><td>Radius kaarten</td></tr><tr><td><code>--a5-r-input</code></td><td>4px</td><td>Radius knoppen en velden</td></tr></tbody></table></div>

<div class="table-responsive" tabindex="0" role="region" aria-label="Voorbeeldtabel"><table class="table table-striped mb-0"><thead><tr><th>Token</th><th>Waarde</th><th>Gebruik</th></tr></thead><tbody><tr><td><code>--a5-brand-500</code></td><td>#1F6FE0</td><td>CTA-achtergrond, WCAG AA 4,76:1</td></tr><tr><td><code>--a5-brand-400</code></td><td>#4EA0FF</td><td>Link en accent</td></tr><tr><td><code>--a5-gold</code></td><td>#D4A24C</td><td>Secundair accent</td></tr><tr><td><code>--a5-r-card</code></td><td>5px</td><td>Radius kaarten</td></tr><tr><td><code>--a5-r-input</code></td><td>4px</td><td>Radius knoppen en velden</td></tr></tbody></table></div>

<div class="table-responsive" tabindex="0" role="region" aria-label="Voorbeeldtabel"><table class="table table-hover mb-0"><thead><tr><th>Token</th><th>Waarde</th><th>Gebruik</th></tr></thead><tbody><tr><td><code>--a5-brand-500</code></td><td>#1F6FE0</td><td>CTA-achtergrond, WCAG AA 4,76:1</td></tr><tr><td><code>--a5-brand-400</code></td><td>#4EA0FF</td><td>Link en accent</td></tr><tr><td><code>--a5-gold</code></td><td>#D4A24C</td><td>Secundair accent</td></tr><tr><td><code>--a5-r-card</code></td><td>5px</td><td>Radius kaarten</td></tr><tr><td><code>--a5-r-input</code></td><td>4px</td><td>Radius knoppen en velden</td></tr></tbody></table></div>

<div class="table-responsive" tabindex="0" role="region" aria-label="Vergelijking"><table class="table mb-0"><thead><tr><th>Kenmerk</th><th class="text-center">Standaard</th><th class="text-center">Uitgebreid</th></tr></thead><tbody><tr><td>Kenmerk een</td><td class="text-center"><svg class="atlas-icon " width="16" height="16" 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;color:var(--a5-success)"><polyline points="20 6 9 17 4 12"></polyline></svg></td><td class="text-center"><svg class="atlas-icon " width="16" height="16" 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;color:var(--a5-success)"><polyline points="20 6 9 17 4 12"></polyline></svg></td></tr><tr><td>Kenmerk twee</td><td class="text-center"><svg class="atlas-icon " width="16" height="16" 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;color:var(--a5-text-4)"><line x1="5" y1="12" x2="19" y2="12"></line></svg></td><td class="text-center"><svg class="atlas-icon " width="16" height="16" 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;color:var(--a5-success)"><polyline points="20 6 9 17 4 12"></polyline></svg></td></tr><tr><td>Kenmerk drie</td><td class="text-center"><svg class="atlas-icon " width="16" height="16" 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;color:var(--a5-success)"><polyline points="20 6 9 17 4 12"></polyline></svg></td><td class="text-center"><svg class="atlas-icon " width="16" height="16" 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;color:var(--a5-success)"><polyline points="20 6 9 17 4 12"></polyline></svg></td></tr></tbody></table></div>