Ga naar hoofdinhoud

Componenten

Color Sample

Community

Toont een voorbeeld van een kleur.

Anatomie

Gebruik deze component

CSS

De CSS van deze component is gepubliceerd in een npm package:

@nl-design-system-candidate/color-sample-css versie 1.

Gebruik de nl-color-sample class name op een svg element:

<svg role="img" xmlns="http://www.w3.org/2000/svg" class="nl-color-sample" style="color: deeppink;">
  <path d="M0 0H32V32H0Z" fill="currentcolor" />
</svg>

Zorg dat je een duidelijke beschrijving naast de Color Sample hebt en gebruik wanneer de Color Sample en beschrijving niet direct bij elkaar staan dat je ze goed aan elkaar linkt. Bijvoorbeeld door er een figure omheen te zetten:

<h1>Huisstijlkleuren</h1>
<figure>
  <ColorSample value="deeppink" aria-labelledby="kleur-1" />
  <figcaption id="kleur-1">Roze</figcaption>
</figure>

Je kunt de CSS zo in je project installeren:

npm install --save-dev @nl-design-system-candidate/color-sample-css

Als je een CDN gebruikt, dan kun je de CSS zo importeren:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nl-design-system-candidate/color-sample-css@1/dist/color-sample.css"
/>

Gebruik je geen CDN, dan kun je de CSS uit node_modules/ importeren:

<link rel="stylesheet" href="node_modules/@nl-design-system-candidate/color-sample-css/dist/color-sample.css" />

Als je CSS imports gebruikt vanuit JavaScript:

import "@nl-design-system-candidate/color-sample-css/color-sample.css";

React

De React component is gepubliceerd in een npm package:

@nl-design-system-candidate/color-sample-react versie 1.

Je kunt de npm package zo installeren:

npm install --save-dev @nl-design-system-candidate/color-sample-react

Je kunt de React component zo gebruiken:

import { ColorSample } from "@nl-design-system-candidate/color-sample-react";


export const MyPage = () => {
  return (
    <html>
      <body>
        <ColorSample value="deeppink" />
      </body>
    </html>
  );
};

Zorg dat je een duidelijke beschrijving naast de Color Sample hebt en gebruik wanneer de Color Sample en beschrijving niet direct bij elkaar staan een id op de beschrijving die je met aria-labelledby koppelt aan de ColorSample:

export const MyPage = () => {
  return (
    <html>
      <body>
        <figure>
          <ColorSample value="deeppink"/>
          <figcaption>
            Roze
          </figcaption>
      </body>
    </html>
  );
};

Figma

De Figma component staat in NL Design System Voorbeeld Bibliotheek — Color Sample.

Definition of Done

Implementaties

Community Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Component gebruiken?

Acceptatiecriteria

Gebruik jij één van de implementaties van deze component of heb je je eigen component gemaakt? In beide gevallen geldt: met onderstaande acceptatiecriteria kun je nagaan of jouw gebruik van deze component klopt met NL Design System.

Als je implementatie voldoet aan de acceptatiecriteria voor deze component, kun je er vanuit gaan dat je gebruik van deze component voldoet aan WCAG, niveau A en AA, en voor 2.5.5 Grootte van het aanwijsgebied uitgebreid) AAA.

Help component verbeteren

We vinden het belangrijk dat de component Color Sample goed te gebruiken is door iedereen. Help je mee?