Tags kleurenset zes kleuren & drie tinten

Kleurensets voor tags.

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

Kleuren met drie tinten

Voorbeeld waarbij gebruik wordt gemaakt van de volledige kleurenset met zes basiskleuren en drie tinten per kleur.

Visueel voorbeeld

Kleuren-overzicht:
LichtMediumDonker

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

HTML-voorbeeld

<div class="horizontal-scroll">
  <table class="tags">
    <caption>Kleuren en types-overzicht:</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>

      <tr>
        <td><p class="tags-color-2-light">Label</p></td>
        <td><p class="tags-color-2-medium">Label</p></td>
        <td><p class="tags-color-2-dark">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-3-light">Label</p></td>
        <td><p class="tags-color-3-medium">Label</p></td>
        <td><p class="tags-color-3-dark">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-4-light">Label</p></td>
        <td><p class="tags-color-4-medium">Label</p></td>
        <td><p class="tags-color-4-dark">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-5-light">Label</p></td>
        <td><p class="tags-color-5-medium">Label</p></td>
        <td><p class="tags-color-5-dark">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-6-light">Label</p></td>
        <td><p class="tags-color-6-medium">Label</p></td>
        <td><p class="tags-color-6-dark">Label</p></td>
      </tr>

    </tbody>
  </table>
</div>

Kleuren en types

Voorbeeld waarbij gebruik wordt gemaakt van de volledige kleurenset en de beschikbare border-styles.

Visueel voorbeeld

Kleuren en types-overzicht:
LichtMediumDonker

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

HTML-voorbeeld

<div class="horizontal-scroll">
  <table class="tags">
    <caption>Kleuren en types-overzicht:</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 plain">Label</p></td>
        <td><p class="tags-color-1-medium plain">Label</p></td>
        <td><p class="tags-color-1-dark plain">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-1-light solid">Label</p></td>
        <td><p class="tags-color-1-medium solid">Label</p></td>
        <td><p class="tags-color-1-dark solid">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-1-light dashed">Label</p></td>
        <td><p class="tags-color-1-medium dashed">Label</p></td>
        <td><p class="tags-color-1-dark dashed">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-1-light dotted">Label</p></td>
        <td><p class="tags-color-1-medium dotted">Label</p></td>
        <td><p class="tags-color-1-dark dotted">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-2-light plain">Label</p></td>
        <td><p class="tags-color-2-medium plain">Label</p></td>
        <td><p class="tags-color-2-dark plain">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-2-light solid">Label</p></td>
        <td><p class="tags-color-2-medium solid">Label</p></td>
        <td><p class="tags-color-2-dark solid">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-2-light dashed">Label</p></td>
        <td><p class="tags-color-2-medium dashed">Label</p></td>
        <td><p class="tags-color-2-dark dashed">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-2-light dotted">Label</p></td>
        <td><p class="tags-color-2-medium dotted">Label</p></td>
        <td><p class="tags-color-2-dark dotted">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-3-light plain">Label</p></td>
        <td><p class="tags-color-3-medium plain">Label</p></td>
        <td><p class="tags-color-3-dark plain">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-3-light solid">Label</p></td>
        <td><p class="tags-color-3-medium solid">Label</p></td>
        <td><p class="tags-color-3-dark solid">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-3-light dashed">Label</p></td>
        <td><p class="tags-color-3-medium dashed">Label</p></td>
        <td><p class="tags-color-3-dark dashed">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-3-light dotted">Label</p></td>
        <td><p class="tags-color-3-medium dotted">Label</p></td>
        <td><p class="tags-color-3-dark dotted">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-4-light plain">Label</p></td>
        <td><p class="tags-color-4-medium plain">Label</p></td>
        <td><p class="tags-color-4-dark plain">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-4-light solid">Label</p></td>
        <td><p class="tags-color-4-medium solid">Label</p></td>
        <td><p class="tags-color-4-dark solid">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-4-light dashed">Label</p></td>
        <td><p class="tags-color-4-medium dashed">Label</p></td>
        <td><p class="tags-color-4-dark dashed">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-4-light dotted">Label</p></td>
        <td><p class="tags-color-4-medium dotted">Label</p></td>
        <td><p class="tags-color-4-dark dotted">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-5-light plain">Label</p></td>
        <td><p class="tags-color-5-medium plain">Label</p></td>
        <td><p class="tags-color-5-dark plain">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-5-light solid">Label</p></td>
        <td><p class="tags-color-5-medium solid">Label</p></td>
        <td><p class="tags-color-5-dark solid">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-5-light dashed">Label</p></td>
        <td><p class="tags-color-5-medium dashed">Label</p></td>
        <td><p class="tags-color-5-dark dashed">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-5-light dotted">Label</p></td>
        <td><p class="tags-color-5-medium dotted">Label</p></td>
        <td><p class="tags-color-5-dark dotted">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-6-light plain">Label</p></td>
        <td><p class="tags-color-6-medium plain">Label</p></td>
        <td><p class="tags-color-6-dark plain">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-6-light solid">Label</p></td>
        <td><p class="tags-color-6-medium solid">Label</p></td>
        <td><p class="tags-color-6-dark solid">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-6-light dashed">Label</p></td>
        <td><p class="tags-color-6-medium dashed">Label</p></td>
        <td><p class="tags-color-6-dark dashed">Label</p></td>
      </tr>

      <tr>
        <td><p class="tags-color-6-light dotted">Label</p></td>
        <td><p class="tags-color-6-medium dotted">Label</p></td>
        <td><p class="tags-color-6-dark dotted">Label</p></td>
      </tr>

    </tbody>
  </table>
</div>

Bijbehorende bestanden

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

Importeer component via npm

CSS-voorbeeld:

Het voorbeeld maakt gebruik van de kleurenset tag-colors-soft. Dit is optioneel. De variabelen binnen tags-6-3 kunnen naar keuze met kleuren (hex codes) of variabelen uit kleurensets gevuld worden.

Bij het gebruik van variabelen uit kleurensets dient de kleurenset altijd eerst ingeladen te worden zodat de variabelen uit die set beschikbaar zijn voor het tags-6-3-bestand.Zie onderstaand voorbeeld voor meer informatie.

/* Color sets */
@use "@minvws/manon/tag-colors-soft";

/* Tags */
@use "@minvws/manon/tag";
@use "@minvws/manon/tags";
@use "@minvws/manon/tags-6-3";

Instelbare variabelen

Beschikbare instelbare variabelen:
VariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
--tags-color-1-light-background-colorbackground-colorvar(--tags-soft-blue-light-background-color)--
--tags-color-1-light-text-colortext-colorvar(--tags-soft-blue-light-text-color)--
--tags-color-1-light-border-colorborder-colorvar(--tags-soft-blue-light-border-color)--
--tags-color-1-medium-background-colorbackground-colorvar(--tags-soft-blue-medium-background-color)--
--tags-color-1-medium-text-colortext-colorvar(--tags-soft-blue-medium-text-color)--
--tags-color-1-medium-border-colorborder-colorvar(--tags-soft-blue-medium-border-color)--
--tags-color-1-dark-background-colorbackground-colorvar(--tags-soft-blue-dark-background-color)--
--tags-color-1-dark-text-colortext-colorvar(--tags-soft-blue-dark-text-color)--
--tags-color-1-dark-border-colorborder-colorvar(--tags-soft-blue-dark-border-color)--
--tags-color-2-light-background-colorbackground-colorvar(--tags-soft-green-light-background-color)--
--tags-color-2-light-text-colortext-colorvar(--tags-soft-green-light-text-color)--
--tags-color-2-light-border-colorborder-colorvar(--tags-soft-green-light-border-color)--
--tags-color-2-medium-background-colorbackground-colorvar(--tags-soft-green-medium-background-color)--
--tags-color-2-medium-text-colortext-colorvar(--tags-soft-green-medium-text-color)--
--tags-color-2-medium-border-colorborder-colorvar(--tags-soft-green-medium-border-color)--
--tags-color-2-dark-background-colorbackground-colorvar(--tags-soft-green-dark-background-color)--
--tags-color-2-dark-text-colortext-colorvar(--tags-soft-green-dark-text-color)--
--tags-color-2-dark-border-colorborder-colorvar(--tags-soft-green-dark-border-color)--
--tags-color-3-light-background-colorbackground-colorvar(--tags-soft-yellow-light-background-color)--
--tags-color-3-light-text-colortext-colorvar(--tags-soft-yellow-light-text-color)--
--tags-color-3-light-border-colorborder-colorvar(--tags-soft-yellow-light-border-color)--
--tags-color-3-medium-background-colorbackground-colorvar(--tags-soft-yellow-medium-background-color)--
--tags-color-3-medium-text-colortext-colorvar(--tags-soft-yellow-medium-text-color)--
--tags-color-3-medium-border-colorborder-colorvar(--tags-soft-yellow-medium-border-color)--
--tags-color-3-dark-background-colorbackground-colorvar(--tags-soft-yellow-dark-background-color)--
--tags-color-3-dark-text-colortext-colorvar(--tags-soft-yellow-dark-text-color)--
--tags-color-3-dark-border-colorborder-colorvar(--tags-soft-yellow-dark-border-color)--
--tags-color-4-light-background-colorbackground-colorvar(--tags-soft-orange-light-background-color)--
--tags-color-4-light-text-colortext-colorvar(--tags-soft-orange-light-text-color)--
--tags-color-4-light-border-colorborder-colorvar(--tags-soft-orange-light-border-color)--
--tags-color-4-medium-background-colorbackground-colorvar(--tags-soft-orange-medium-background-color)--
--tags-color-4-medium-text-colortext-colorvar(--tags-soft-orange-medium-text-color)--
--tags-color-4-medium-border-colorborder-colorvar(--tags-soft-orange-medium-border-color)--
--tags-color-4-dark-background-colorbackground-colorvar(--tags-soft-orange-dark-background-color)--
--tags-color-4-dark-text-colortext-colorvar(--tags-soft-orange-dark-text-color)--
--tags-color-4-dark-border-colorborder-colorvar(--tags-soft-orange-dark-border-color)--
--tags-color-5-light-background-colorbackground-colorvar(--tags-soft-red-light-background-color)--
--tags-color-5-light-text-colortext-colorvar(--tags-soft-red-light-text-color)--
--tags-color-5-light-border-colorborder-colorvar(--tags-soft-red-light-border-color)--
--tags-color-5-medium-background-colorbackground-colorvar(--tags-soft-red-medium-background-color)--
--tags-color-5-medium-text-colortext-colorvar(--tags-soft-red-medium-text-color)--
--tags-color-5-medium-border-colorborder-colorvar(--tags-soft-red-medium-border-color)--
--tags-color-5-dark-background-colorbackground-colorvar(--tags-soft-red-dark-background-color)--
--tags-color-5-dark-text-colortext-colorvar(--tags-soft-red-dark-text-color)--
--tags-color-5-dark-border-colorborder-colorvar(--tags-soft-red-dark-border-color)--
--tags-color-6-light-background-colorbackground-colorvar(--tags-soft-violet-light-background-color)--
--tags-color-6-light-text-colortext-colorvar(--tags-soft-violet-light-text-color)--
--tags-color-6-light-border-colorborder-colorvar(--tags-soft-violet-light-border-color)--
--tags-color-6-medium-background-colorbackground-colorvar(--tags-soft-violet-medium-background-color)--
--tags-color-6-medium-text-colortext-colorvar(--tags-soft-violet-medium-text-color)--
--tags-color-6-medium-border-colorborder-colorvar(--tags-soft-violet-medium-border-color)--
--tags-color-6-dark-background-colorbackground-colorvar(--tags-soft-violet-dark-background-color)--
--tags-color-6-dark-text-colortext-colorvar(--tags-soft-violet-dark-text-color)--
--tags-color-6-dark-border-colorborder-colorvar(--tags-soft-violet-dark-border-color)--