Tags
Introductie
De mogelijkheid om onderliggende elementen visueel als tags weer te geven.
Snelstart
@use "@minvws/manon/components/tag";
@use "@minvws/manon/components/tags";
Voorbeelden
Voorbeeld: Tags binnen een lijst
<ul class="tags horizontal">
<li class="tags-color-1-light">Lorem ipsum</li>
<li class="tags-color-2-light">Lorem ipsum</li>
<li class="tags-color-3-light">Lorem ipsum</li>
</ul>
Voorbeeld: Tags binnen een div
<div class="tags horizontal">
<p class="tags-color-1-light">Lorem ipsum</p>
<p class="tags-color-2-light">Lorem ipsum</p>
<p class="tags-color-3-light">Lorem ipsum</p>
</div>
Voorbeeld: Tags binnen een section
<section class="tags horizontal">
<p class="tags-color-1-light">Lorem ipsum</p>
<p class="tags-color-2-light">Lorem ipsum</p>
<p class="tags-color-3-light">Lorem ipsum</p>
</section>
Voorbeeld: Tags op tabel
Tabel-elementen visueel weergegeven als tag. Voor het direct aanspreken van een enkel element zie: tags.
| Licht | Medium | Donker |
|---|---|---|
<div class="horizontal-scroll">
<table class="tags">
<caption>
Voorbeeld tag binnen tabel:
</caption>
<thead>
<tr>
<th scope="col">Licht</th>
<th scope="col">Medium</th>
<th scope="col">Donker</th>
</tr>
</thead>
<tbody>
<tr>
<td><p class="tags-color-1-light">Label</p></td>
<td><p class="tags-color-1-medium">Label</p></td>
<td><p class="tags-color-1-dark">Label</p></td>
</tr>
</tbody>
</table>
</div>
Tags binnen een tabel
Tabel-elementen visueel weergegeven als tag. Voor het direct aanspreken van een enkel element zie: tags.
| Licht | Medium | Donker |
|---|---|---|
<div class="horizontal-scroll">
<table>
<caption>
Voorbeeld tag binnen tabel:
</caption>
<thead>
<tr>
<th scope="col">Licht</th>
<th scope="col">Medium</th>
<th scope="col">Donker</th>
</tr>
</thead>
<tbody class="tags">
<tr>
<td><p class="tags-color-1-light">Label</p></td>
<td><p class="tags-color-1-medium">Label</p></td>
<td><p class="tags-color-1-dark">Label</p></td>
</tr>
</tbody>
</table>
</div>