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

• Lorem ipsum
• Lorem ipsum
• Lorem ipsum

    
      
    
    <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

Lorem ipsum

Lorem ipsum

Lorem ipsum

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

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

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