Tag

Visuele labels om bijvoorbeeld groeperingen aan te brengen binnen content en data-sets.

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project.
    • Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
    • Voeg de benodigde class toe op de gewenste elementen. Voor meer informatie over het implementeren zie de voorbeelden.

Voorbeelden

p als tag

Visueel voorbeeld:

Lorem ipsum

HTML-Voorbeeld:

<p class="tag tags-color-1">Lorem ipsum</p>

span als tag

Visueel voorbeeld:

Lorem ipsum

HTML-Voorbeeld:

<span class="tag tags-color-1">Lorem ipsum</span>

li als tag

Lijst-element visueel weergegeven als tag. Voor het direct aanspreken van alle lijstelementen zie: tags.

Visueel voorbeeld:

  • Lorem ipsum

HTML-Voorbeeld:

<ul>
<li class="tag tags-color-1">Lorem ipsum</li>
</ul>

Tags binnen een tabel

Tabel-elementen visueel weergegeven als tag. Voor het direct aanspreken van alle tabelelementen zie: tags.

Visueel voorbeeld:

Voorbeeld tag binnen tabel:
Licht Medium Donker

Label

Label

Label

HTML-Voorbeeld:

<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>

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.

Visueel voorbeeld:

Lorem ipsum

HTML-Voorbeeld:

<p class="tag tags-color-1 plain">Lorem ipsum</p>

Visueel voorbeeld:

Lorem ipsum

HTML-Voorbeeld:

<p class="tag tags-color-1 solid">Lorem ipsum</p>

Visueel voorbeeld:

Lorem ipsum

HTML-Voorbeeld:

<p class="tag tags-color-1 dotted">Lorem ipsum</p>

Visueel voorbeeld:

Lorem ipsum

HTML-Voorbeeld:

<p class="tag tags-color-1 dashed">Lorem ipsum</p>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via NPM

CSS-voorbeeld:

@use "@minvws/manon/tag";

Kleurensets

De bruikbare kleuren voor de tags worden toegevoegd via kleurensets. Beschikbare sets zijn:

Instelbare variabelen

Beschikbare instelbare variabelen:
Variabele CSS-attribuut Manon ingestelde waarde Breekpunt Class
--tag-font-size font-size var(--application-base-font-size) - -
--tag-font-weight font-weight bold - -
--tag-line-height line-height var(--application-base-line-height) - -
--tag-padding padding 0.25rem 0.5rem - -
--tag-border-radius border-radius 0.25rem - -
--tag-border-width border-width 1px - -