Tag
Introductie
Visuele labels om bijvoorbeeld groeperingen aan te brengen binnen content en data-sets.
Snelstart
SCSS importeren:
@use "@minvws/manon/components/tag";
Voorbeelden
Voorbeeld: p als tag
<p class="tag tags-color-1">Lorem ipsum</p>
Voorbeeld: span als tag
<span class="tag tags-color-1">Lorem ipsum</span>
Voorbeeld: li als tag
Lijst-element visueel weergegeven als tag. Voor het direct aanspreken van alle lijstelementen zie: tags.
<ul>
<li class="tag tags-color-1">Lorem ipsum</li>
</ul>
Voorbeeld: Tags binnen een tabel
Tabel-elementen visueel weergegeven als tag. Voor het direct aanspreken van alle tabelelementen 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>
<tr>
<td><p class="tag tags-color-1-light">Label</p></td>
<td><p class="tag tags-color-1-medium">Label</p></td>
<td><p class="tag tags-color-1-dark">Label</p></td>
</tr>
</tbody>
</table>
</div>
Voorbeeld: Tag styles
Gebruik van verschillende border-styles.
Om de hoogte van alle tags gelijk te houden wordt de class plain toegevoegd.
Visueel is er geen omlijning zichtbaar, maar deze wordt wel toegevoegd in de
achtergrondkleur van de tag.
<p class="tag tags-color-1 plain">Lorem ipsum</p>
<p class="tag tags-color-1 solid">Lorem ipsum</p>
<p class="tag tags-color-1 dotted">Lorem ipsum</p>
<p class="tag tags-color-1 dashed">Lorem ipsum</p>