Ga naar hoofdinhoud

Color Sample

Candidate

Toont een voorbeeld van een kleur.

Figma

Storybook

npm

Checklist voor toegankelijkheid

Hier beschrijven we waar de component al aan voldoet en wat je zelf nog moet doen om de component toegankelijk én gebruiksvriendelijk in te zetten.

Acceptatiecriteria bij gebruik

Een component gebruik je in de context van een pagina, website of applicatie. Hoe toegankelijk en gebruiksvriendelijk een component is, hangt daarom voor een groot deel af van context. We hebben onderstaande criteria verdeeld op rol: de developer, de designer en de contentmaker. Vanuit iedere rol kun je je steentje bijdragen om een toegankelijke en gebruiksvriendelijke ervaring te bieden aan je gebruikers.

Filter acceptatiecriteria voor:

1 van de 0 items zijn nu zichtbaar.

    Acceptatiecriteria van de component

    Als je de NL Design System component gebruikt kun je er vanuit gaan dat onderstaande checks zijn gedaan. Maar door keuzes in de website of applicaties kan het natuurlijk zijn dat ze toch niet helemaal werken. Voor de zekerheid is het dus goed om ook op onderstaande punten te letten.

    Filter acceptatiecriteria voor:

    1 van de 0 items zijn nu zichtbaar.

      CSS

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

      @nl-design-system-candidate/color-sample-css

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

      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>
        </figure>
      </body>
    </html>
  );
};

      Design tokens

      name type
      nl.color-sample.background-color color
      nl.color-sample.block-size dimension
      nl.color-sample.border-color color
      nl.color-sample.border-radius dimension
      nl.color-sample.border-width dimension
      nl.color-sample.inline-size dimension

      Definition of Done

      Help om deze component te verbeteren

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

      Community implementaties

      Utrecht

      11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

      Snel aan de slag

      utrecht-color-sample in CSS
      utrecht-color-sample in Web Component
      utrecht-color-sample in React
      utrecht-color-sample in Angular

      Den Haag

      2 van 11 stappen gedocumenteerd op het Community Den Haag projectbord