Heading

Community

Koptekst die in de koppenstructuur ingesteld kan worden op het juiste niveau.

Anatomie

Gebruik deze component

CSS

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

@nl-design-system-candidate/heading-css versie 1.

Je kunt de CSS zo in je project installeren:

npm install --save-dev @nl-design-system-candidate/heading-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/heading-css@1/dist/heading.css" />

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

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

Als je CSS imports gebruikt vanuit JavaScript:

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

Heading level 1

Gebruik voor een hoofdkop van een pagina de nl-heading en nl-heading--level-1 class name op een h1, element:

<h1 class="nl-heading nl-heading--level-1">Hoofdkop van de pagina</h1>

Heading level 2

Gebruik voor een koptekst die volgt na de hoofdkop en in de koppenstructuur op het tweede niveau staat de nl-heading en nl-heading--level-2 class name op een h2, element:

<h2 class="nl-heading nl-heading--level-2">
  Een koptekst die volgt na de hoofdkop en in de koppenstructuur op het tweede niveau staat
</h2>

Heading level 3

Gebruik voor een koptekst die in de koppenstructuur op het derde niveau staat de nl-heading en nl-heading--level-3 class name op een h3, element:

<h3 class="nl-heading nl-heading--level-3">Een koptekst die in de koppenstructuur op het derde niveau staat</h3>

Heading level 4

Gebruik voor een koptekst die in de koppenstructuur op het vierde niveau staat de nl-heading en nl-heading--level-4 class name op een h4, element:

<h4 class="nl-heading nl-heading--level-4">Een koptekst die in de koppenstructuur op het vierde niveau staat</h4>

Heading level 5

Gebruik voor een koptekst die in de koppenstructuur op het vijfde niveau staat de nl-heading en nl-heading--level-5 class name op een h5, element:

<h5 class="nl-heading nl-heading--level-5">Een koptekst die in de koppenstructuur op het vijfde niveau staat</h5>

Heading level 6

Gebruik voor een koptekst die in de koppenstructuur op het zesde niveau staat de nl-heading en nl-heading--level-5 class name op een h6, element:

<h6 class="nl-heading nl-heading--level-6">Een koptekst die in de koppenstructuur op het zesde niveau staat</h6>

Kop gebruiken met het uiterlijk van een ander level

Gebruik voor een koptekst die semantisch op het ene level staat, maar visueel de uitstraling heeft van een ander level de nl-heading en nl-heading--level-{het visuele level} op het semantische heading component naar keuze:

<h2 class="nl-heading nl-heading--level-4">
  Een koptekst die in de koppenstructuur op het tweede level staat en eruit ziet als het vierde level.
</h2>

React

De React component is gepubliceerd in een npm package:

@nl-design-system-candidate/heading-react versie 1.

Je kunt de npm package zo installeren:

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

Je kunt de React component zo gebruiken:

import { Heading } from "@nl-design-system-candidate/heading-react";


export const MyComponent = () => {
  return (
    <div>
      <Heading level={2} appearance="level-4"></Heading>
    </div>
  );
};

Of inclusief CSS:

import { Heading } from "@nl-design-system-candidate/heading-react/css";


export const MyComponent = () => {
  return (
    <div>
      <Heading level={2} appearance="level-4"></Heading>
    </div>
  );
};

Figma

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

Definition of Done

Implementaties

Community Amsterdam

11 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Component gebruiken?

• ams-heading in Figma
• ams-heading op NPM
• ams-heading op GitHub
• ams-heading in Storybook van Community Amsterdam
• ams-heading voor visuele regressie tests

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 Heading 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 voortang van Heading 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.