diff --git a/docs/componenten/heading/_usage.md b/docs/componenten/heading/_usage.md new file mode 100644 index 0000000000..85697e123f --- /dev/null +++ b/docs/componenten/heading/_usage.md @@ -0,0 +1,125 @@ +# Gebruik Code + +## CSS + +De CSS van deze component is gepubliceerd in een npm package: + +[ @nl-design-system-candidate/heading-css](https://www.npmjs.com/package/@nl-design-system-candidate/heading-css) +versie 1. + +Je kunt de CSS zo in je project installeren: + +```sh +npm install --save-dev @nl-design-system-candidate/heading-css +``` + +Als je een CDN gebruikt, dan kun je de CSS zo importeren: + +```html + +``` + +Gebruik je geen CDN, dan kun je de CSS uit `node_modules/` importeren: + +```html + +``` + +Als je CSS imports gebruikt vanuit JavaScript: + +```js +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: + +```html +

Hoofdkop van de pagina

+``` + +### 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: + +```html +

+ Een koptekst die volgt na de hoofdkop en in de koppenstructuur op het tweede niveau staat +

+``` + +### 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: + +```html +

Een koptekst die in de koppenstructuur op het derde niveau staat

+``` + +### Heading 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: + +```html +

Een koptekst die in de koppenstructuur op het vierde niveau staat

+``` + +### Heading 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: + +```html +
Een koptekst die in de koppenstructuur op het vijfde niveau staat
+``` + +### Heading 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: + +```html +
Een koptekst die in de koppenstructuur op het zesde niveau staat
+``` + +### 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: + +```html +

+ Een koptekst die in de koppenstructuur op het tweede level staat en eruit ziet als het vierde level. +

+``` + +## React + +De React component is gepubliceerd in een npm package: + +[ @nl-design-system-candidate/heading-react](https://www.npmjs.com/package/@nl-design-system-candidate/heading-react) +versie 1. + +Je kunt de npm package zo installeren: + +```sh +npm install --save-dev @nl-design-system-candidate/heading-react +``` + +Je kunt de React component zo gebruiken: + +```jsx +import { Heading } from "@nl-design-system-candidate/heading-react"; + +export const MyPage = () => { + return ( + + + + + + ); +}; +``` + +## Figma + +De Figma component staat in [NL Design System Voorbeeld Bibliotheek — Code](https://www.figma.com/design/shhwGcqPLi2CapK0P1zz8O/NLDS---Voorbeeld---Bibliotheek?node-id=15862-1610&t=0Pfnum6S0ChsWQDW-4). diff --git a/docs/componenten/heading/index.mdx b/docs/componenten/heading/index.mdx index 5625117338..84b5a7683a 100644 --- a/docs/componenten/heading/index.mdx +++ b/docs/componenten/heading/index.mdx @@ -28,6 +28,8 @@ HelpImproveComponent, Implementations, Introduction, } from "@site/src/components/ComponentPage"; +import { Markdown } from "@site/src/components/Markdown"; +import Usage from "./\_usage.md"; {/* Add name and description for the component */} export const title = "Heading"; @@ -44,6 +46,12 @@ export const component = componentProgress.find((item) => item.number === issueN +## Gebruik deze component + + + + + ## Definition of Done