Ga direct naar inhoud
Ga direct naar inhoud
Ga direct naar inhoud

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

Lorem ipsum

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

Voorbeeld: span als tag

Lorem ipsum
    
    <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.

  • Lorem ipsum
    
    <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.

Voorbeeld tag binnen tabel:
LichtMediumDonker

Label

Label

Label

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

Lorem ipsum

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

Lorem ipsum

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

Lorem ipsum

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

Lorem ipsum

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