Number Badge
Candidate
Toont een klein label dat de aandacht trekt en informeert over een aantal.
Anatomie
Candidate component gebruiken
Design tokens
name | type |
---|---|
nl.number-badge.background-color
|
color |
nl.number-badge.border-color
|
color |
nl.number-badge.border-radius
|
dimension |
nl.number-badge.border-width
|
dimension |
nl.number-badge.color
|
color |
nl.number-badge.font-family
|
fontFamilies |
nl.number-badge.font-size
|
fontSizes |
nl.number-badge.font-weight
|
fontWeights |
nl.number-badge.min-block-size
|
dimension |
nl.number-badge.min-inline-size
|
dimension |
nl.number-badge.padding-block
|
dimension |
nl.number-badge.padding-inline
|
dimension |
CSS
De CSS van deze component is gepubliceerd in een npm package:
@nl-design-system-candidate/number-badge-css versie 1.
Gebruik de nl-number-badge
class name op een span
element:
<span class="nl-number-badge">42</span>
Je kunt de CSS zo in je project installeren:
codevoorbeeldnpm install --save-dev @nl-design-system-candidate/number-badge-css
Als je een CDN gebruikt, dan kun je de CSS zo importeren:
codevoorbeeld<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@nl-design-system-candidate/number-badge-css@1/dist/number-badge.css"
/>
Gebruik je geen CDN, dan kun je de CSS uit node_modules/
importeren:
<link rel="stylesheet" href="node_modules/@nl-design-system-candidate/number-badge-css/dist/number-badge.css" />
Als je CSS imports gebruikt vanuit JavaScript:
codevoorbeeldimport "@nl-design-system-candidate/number-badge-css/number-badge.css";
Number badge als data component
Je kunt er ook voor kiezen om number badge op een data
element te gebruiken:
<data class="nl-number-badge" value="42">42</data>
Number badge met een toegankelijk label
Om te zorgen dat de betekenis van een number badge duidelijk is wanneer de pagina wordt voorgelezeg kun je ook een onzichtbaar label toevoegen:
codevoorbeeld<data value="42" class="nl-number-badge">
<span hidden aria-hidden="true" class="nl-number-badge__visible-label">42</span>
<span class="nl-number-badge__hidden-label">42 ongelezen berichten</span>
</data>
React
De React component is gepubliceerd in een npm package:
@nl-design-system-candidate/number-badge-react versie 1.
Je kunt de npm package zo installeren:
codevoorbeeldnpm install --save-dev @nl-design-system-candidate/number-badge-react
Je kunt de React component zo gebruiken:
codevoorbeeldimport { NumberBadge } from "@nl-design-system-candidate/number-badge-react";
export const MyComponent = () => <NumberBadge value="42" />;
Figma
De Figma component staat in NL Design System Voorbeeld Bibliotheek — Number Badge.
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.
-
De tekst van de Number Badge heeft voldoende contrast tegen de achtergrond.
De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:
- 4,5:1 contrast voor normale tekst.
- 3:1 contrast voor grotere letters (vanaf 24 pixels).
- 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).
Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.
NL Design System richtlijnen:
-
Gebruik geen afbeeldingen van tekst voor de Number Badge.
Het label bestaat uit gewone tekst, niet uit een afbeelding van tekst. Tenzij het om een logo gaat, zoals een DigiD-logo.
NL Design System richtlijnen:
-
Als een tekst en/of het aria-label in de Number Badge in een andere taal is dan de taal van de pagina, dan heeft de Number Badge een lang-attribuut met de juiste taalcode.
Als een tekst in een andere taal is dan de taal van de pagina, dan heeft het element een
lang
-attribuut met de juiste taalcode.Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites. Of aan een citaat in het Engels, op een Nederlandstalige pagina.
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.
-
Geef de informatie uit de Number Badge ook door aan screenreaders
Visueel heeft de Number Badge een betekenis die duidelijk is. Deze betekenis moet ook duidelijk zijn voor gebruikers van screenreaders. Het volstaat daarom meestal niet als de Number Badge alleen een cijfer toevoegt aan bijvoorbeeld een tekst 'Inbox'. De visuele layout maakt namelijk duidelijk dat het om nieuwe berichten gaat.
Geeft dan extra tekstuele context, bijvoorbeeld met een visueel verborgen tekst:
codevoorbeeld<a href="/inbox"> Inbox <data class="utrecht-number-badge" value="4">4</data> <span class="screenreader-only">nieuwe berichten</span> </a>
-
Als je de tekst van de Number Badge vergroot tot 200% blijft de tekst in zijn geheel zichtbaar
Als je de tekst vergroot tot 200%, via browserzoom of via de browserinstellingen voor tekstgrootte, blijft de tekst volledig zichtbaar.
Zorg ervoor dat het component meegroeit met de tekst. Definieer hoogte en de breedte niet in
px
, maar gebruik een relatieve waarde alsem
ofrem
.Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld
word-break: break-word; hyphens: auto;
in combinatie mettext-wrap-style: pretty
oftext-wrap-style: balance
. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root
) niveau.NL Design System richtlijnen:
-
Als je de tekstafstand van de Number Badge vergroot blijft de tekst in zijn geheel zichtbaar
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden. Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.
Zorg ervoor dat de component mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.
Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld
word-break: break-word; hyphens: auto;
in combinatie mettext-wrap-style: pretty
oftext-wrap-style: balance
. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root
) niveau.Je moet de afstand kunnen vergroten naar deze waardes:
- Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte.
- Afstand tussen alinea's naar ten minste 2 keer de lettergrootte.
- Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte.
- Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.
Dit is te testen met een extensie zoals Stylus of User CSS, een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de
codevoorbeeldhead
van de pagina:<style> body * { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } body p { margin-bottom: 2em !important; } </style>
NL Design System richtlijnen:
Community implementaties
Utrecht
11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord
Snel aan de slag
utrecht-number-badge in CSS
- utrecht-number-badge (CSS) op NPM
- utrecht-number-badge (CSS) op GitHub
- utrecht-number-badge (CSS) in Storybook van Community Utrecht
utrecht-number-badge in Web Component
- utrecht-number-badge (Web Component) op GitHub
- utrecht-number-badge (Web Component) in Storybook van Community Utrecht
- utrecht-number-badge (Web Component) op NPM
utrecht-number-badge in React
utrecht-number-badge in Vue
Definition of Done
Help component verbeteren
We vinden het belangrijk dat de component Number Badge goed te gebruiken is door iedereen. Help je mee?
- Vul de GitHub Discussion aan met de eisen en wensen voor jouw project of organisatie.
- Draag bij aan de voortgang van Number Badge door te zorgen dat deze aan meer checkpoints van de Definition of Done voldoet. Deze houden we bij in de projectborden bij de publieke GitHub Backlog.