1'use strict'; 2(globalThis.webpackChunk_nl_design_system_website = globalThis.webpackChunk_nl_design_system_website || []).push([ 3 [10160], 4 { 5 18439(e, r, n) { 6 n.d(r, { R: () => s, x: () => d }); 7 var t = n(30758); 8 const i = {}, 9 l = t.createContext(i); 10 function s(e) { 11 const r = t.useContext(l); 12 return t.useMemo( 13 function () { 14 return 'function' == typeof e ? e(r) : { ...r, ...e }; 15 }, 16 [r, e], 17 ); 18 } 19 function d(e) { 20 let r; 21 return ((r = e.disableParentContext ? ('function' == typeof e.components ? e.components(i) : e.components || i) : s(e.components)), t.createElement(l.Provider, { value: r }, e.children)); 22 } 23 }, 24 46657(e, r, n) { 25 (n.r(r), n.d(r, { assets: () => k, contentTitle: () => j, default: () => b, frontMatter: () => u, metadata: () => t, toc: () => g })); 26 const t = JSON.parse('{"id":"richtlijnen/stijl/colour/settings/index","title":"Let op voorkeursinstellingen voor kleur","description":"Vergeet niet dat gebruikers mogelijk voorkeursinstellingen voor kleuren hebben toegepast.","source":"@site/docs/richtlijnen/stijl/colour/6-settings/index.mdx","sourceDirName":"richtlijnen/stijl/colour/6-settings","slug":"/richtlijnen/stijl/kleuren/voorkeuren","permalink":"/richtlijnen/stijl/kleuren/voorkeuren","draft":false,"unlisted":false,"editUrl":"https://github.com/nl-design-system/documentatie/tree/main/docs/richtlijnen/stijl/colour/6-settings/index.mdx","tags":[],"version":"current","frontMatter":{"title":"Let op voorkeursinstellingen voor kleur","title_sm":"Voorkeursinstellingen voor kleur","hide_title":true,"hide_table_of_contents":false,"sidebar_label":"Voorkeursinstellingen voor kleur","pagination_label":"Let op voorkeursinstellingen voor kleur","description":"Vergeet niet dat gebruikers mogelijk voorkeursinstellingen voor kleuren hebben toegepast.","slug":"/richtlijnen/stijl/kleuren/voorkeuren","keywords":["voorkeursinstellingen","kleur"]},"sidebar":"richtlijnen","previous":{"title":"Let op verschillen in waarneming van kleur","permalink":"/richtlijnen/stijl/kleuren/waarneming"},"next":{"title":"Introductie richtlijnen voor ruimte","permalink":"/richtlijnen/stijl/ruimte/"}}'); 27 var i = n(86070), 28 l = n(18439), 29 s = n(56672); 30 function d(e) { 31 const r = { h3: 'h3', p: 'p', ...(0, l.R)(), ...e.components }; 32 return (0, i.jsxs)(i.Fragment, { children: [(0, i.jsx)(r.h3, { id: 'css-system-color-voorbeelden', children: 'CSS system-color voorbeelden' }), '\n', (0, i.jsx)(r.p, { children: "De kleuren in deze tabel veranderen mee met de ingestelde kleurthema's." }), '\n', (0, i.jsxs)('table', { children: [(0, i.jsx)('thead', { children: (0, i.jsxs)('tr', { children: [(0, i.jsx)('th', { children: 'CSS system-color' }), (0, i.jsx)('th', { children: 'Voorbeeld' })] }) }), (0, i.jsxs)('tbody', { children: [(0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'AccentColor' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok Acce
32ntColor', style: { display: 'block', width: '50px', height: '50px', background: 'AccentColor', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'AccentColorText' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok AccentColorText', style: { display: 'block', width: '50px', height: '50px', background: 'AccentColorText', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'ActiveText' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok ActiveText', style: { display: 'block', width: '50px', height: '50px', background: 'ActiveText', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'ButtonBorder' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok ButtonBorder', style: { display: 'block', width: '50px', height: '50px', background: 'ButtonBorder', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'ButtonFace' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok ButtonFace', style: { display: 'block', width: '50px', height: '50px', background: 'ButtonFace', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'ButtonText' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok ButtonText', style: { display: 'block', width: '50px', height: '50px', background: 'ButtonText', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'Canvas' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok Canvas', style: { display: 'block', width: '50px', height: '50px', background: 'Canvas', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'CanvasText' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok CanvasText', style: { display: 'block', width: '50px', height: '50px', background: 'CanvasText', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'Field' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok Field', style: { display: 'block', width: '50px', height: '50px', background: 'Field', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'FieldText' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok FieldText', style: { display: 'block', width: '50px', height: '50px', background: 'FieldText', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'GrayText' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok GrayText', style: { display: 'block', width: '50px', height: '50px', background: 'GrayText', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'Highlight' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok Highlight', style: { display: 'block', width: '50px', height: '50px', background: 'Highlight', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'HighlightText' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok HighlightText', style: { display: 'block', width: '50px', height: '50px', background: 'HighlightText', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'LinkText' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok LinkText', style: { display: 'block', width: '50px', height: '50px', background: 'LinkText', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'Mark' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok Mark', style: { display: 'block', width: '50px', height: '50px', background: 'Mark', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'MarkText' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok MarkText', style: { display: 'block', width: '50px', height: '50px', background: 'MarkText', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'SelectedItem' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok SelectedItem', style: { display: 'block', width: '50px', height: '50px', background: 'SelectedItem', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'SelectedItemText' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok SelectedItemText', style: { display: 'block', width: '50px', height: '50px', background: 'SelectedItemText', border: 'ButtonBorder solid 2px' } }) })] }), (0, i.jsxs)('tr', { children: [(0, i.jsx)('td', { children: 'VisitedText' }), (0, i.jsx)('td', { children: (0, i.jsx)('div', { role: 'img', 'aria-label': 'Kleurblok VisitedText', style: { display: 'block', width: '50px', height: '50px', background: 'VisitedText', border: 'ButtonBorder solid 2px' } }) })] })] })] })] }); 33 } 34 function o(e = {}) { 35 const { wrapper: r } = { ...(0, l.R)(), ...e.components }; 36 return r ? (0, i.jsx)(r, { ...e, children: (0, i.jsx)(d, { ...e }) }) : d(e); 37 } 38 function c(e) { 39 const r = { a: 'a', code: 'code', h2: 'h2', h3: 'h3', img: 'img', li: 'li', p: 'p', table: 'table', tbody: 'tbody', td: 'td', th: 'th', thead: 'thead', tr: 'tr', ul: 'ul', ...(0, l.R)(), ...e.components }; 40 return (0, i.jsxs)(i.Fragment, { children: [(0, i.jsx)(r.p, { children: 'Vergeet niet dat men mogelijk voorkeursinstellingen heeft toegepast.' }), '\n', (0, i.jsx)(r.p, { children: 'Voorbeelden van voorkeursinstellingen:' }), '\n', (0, i.jsx)(r.h2, { id: 'aangepast-kleurenthema', children: 'Aangepast kleurenthema' }), '\n', (0, i.jsx)(r.p, { children: 'Sommige mensen bekijken webpagina\u2019s liever in een donker (dark-mode) of juist licht kleurenthema (light-mode). Zij kunnen deze voorkeur aangeven via een instelling van het besturingssysteem.' }), '\n', (0, i.jsxs)(r.p, { children: ['Door de media query ', (0, i.jsx)(r.a, { href: 'https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme', children: (0, i.jsx)(r.code, { children: 'prefers-color-scheme' }) }), ' is dit te detecteren en kun je deze mensen een donker kleuren thema aanbieden.'] }), '\n', (0, i.jsx)(r.h2, { id: 'aangepast-contrast', children: 'Aangepast contrast' }), '\n', (0, i.jsx)(r.p, { children: 'Sommige mensen bekijken webpagina\u2019s liever met meer of juist minder contrast. Zij kunnen deze voorkeur aangeven via een instelling van het besturingssysteem.' }), '\n', (0, i.jsxs)(r.p, { children: ['Door de media query ', (0, i.jsx)(r.a, { href: 'https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast', children: (0, i.jsx)(r.code, { children: 'prefers-contrast' }) }), ' is dit te detecteren en kun je deze mensen een passend kleurenthema aanbieden. Maar ze zouden ook gebruik kunnen maken van ', (0, i.jsx)(r.a, { href: 'https://support.microsoft.com/en-us
40/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696', children: 'Windows high contrast mode' }), '.'] }), '\n', (0, i.jsx)(r.p, { children: (0, i.jsx)(r.img, { src: 'https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen_stijl_kleuren_voorkeursinstellingen.png', alt: 'Afgebeeld zijn drie schermen met dezelfde inhoud. Het eerste voorbeeld toont een lichte modus. Het tweede voorbeeld toont een donkere modus. Het derde voorbeeld tot een hoog contrast voorbeeld.' }) }), '\n', (0, i.jsx)(r.h3, { id: 'contrastthemas-in-windows-en-systeemkleuren', children: "Contrastthema's in Windows en systeemkleuren" }), '\n', (0, i.jsx)(r.p, { children: "In Windows high contrast mode kunnen gebruikers systeemkleuren instellen. Deze kleuren worden dan gebruikt voor het hele besturingssysteem en alle programma's die daarop draaien. Er zijn 4 vooraf ingestelde contrastthema's beschikbaar. Door een thema te bewerken, kan een gebruiker zijn of haar voorkeursinstellingen opslaan in een nieuw thema." }), '\n', (0, i.jsx)(r.p, { children: 'Binnen een thema kan een bezoeker 8 kleuren kiezen:' }), '\n', (0, i.jsxs)(r.ul, { children: ['\n', (0, i.jsx)(r.li, { children: 'Achtergrond' }), '\n', (0, i.jsx)(r.li, { children: 'Tekst' }), '\n', (0, i.jsx)(r.li, { children: 'Hyperlink' }), '\n', (0, i.jsx)(r.li, { children: 'Inactieve tekst' }), '\n', (0, i.jsx)(r.li, { children: 'Knop (tekstkleur)' }), '\n', (0, i.jsx)(r.li, { children: 'Knop (achtergrondkleur)' }), '\n', (0, i.jsx)(r.li, { children: 'Geselecteerde tekst (tekstkleur)' }), '\n', (0, i.jsx)(r.li, { children: 'Geselecteerde tekst (achtergrondkleur)' }), '\n'] }), '\n', (0, i.jsxs)(r.p, { children: ['Als een gebruiker high contrast modus heeft ingeschakeld, past de browser deze kleuren automatisch toe op alle websites. Met de media query ', (0, i.jsx)(r.a, { href: 'https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors', children: (0, i.jsx)(r.code, { children: 'forced-colors: active' }) }), ' kun je rekening houden met bezoekers die hier gebruik van maken, bijvoorbeeld door te zorgen dat belangrijke informatie niet verloren gaat wanneer de browser kleuren overschrijft.'] }), '\n', (0, i.jsxs)(r.p, { children: ['In CSS kun je de namen van systeemkleuren (', (0, i.jsx)(r.a, { href: 'https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color', children: (0, i.jsx)(r.code, { children: 'system-color' }) }), ') gebruiken. In deze tabel lees je welke Windows systeemkleur daaraan gekoppeld is:'] }), '\n', (0, i.jsxs)(r.table, { children: [(0, i.jsx)(r.thead, { children: (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.th, { children: 'CSS system-color naam' }), (0, i.jsx)(r.th, { children: 'Naam in contrastthema' })] }) }), (0, i.jsxs)(r.tbody, { children: [(0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'AccentColor' }), (0, i.jsx)(r.td, { children: 'Geselecteerde tekst (achtergrondkleur)' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'AccentColorText' }), (0, i.jsx)(r.td, { children: 'Achtergrond' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'ActiveText' }), (0, i.jsx)(r.td, { children: 'Hyperlink' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'ButtonBorder' }), (0, i.jsx)(r.td, { children: 'Knop (tekstkleur)' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'ButtonFace' }), (0, i.jsx)(r.td, { children: 'Knop (achtergrondkleur)' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'ButtonText' }), (0, i.jsx)(r.td, { children: 'Knop (tekstkleur)' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'Canvas' }), (0, i.jsx)(r.td, { children: 'Achtergrond' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'CanvasText' }), (0, i.jsx)(r.td, { children: 'Tekst' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'Field' }), (0, i.jsx)(r.td, { children: 'Achtergrond' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'FieldText' }), (0, i.jsx)(r.td, { children: 'Chrome: Tekst, Firefox: Knop (tekst
40kleur)' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'GrayText' }), (0, i.jsx)(r.td, { children: 'Inactieve tekst' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'Highlight' }), (0, i.jsx)(r.td, { children: 'Geselecteerde tekst (achtergrondkleur)' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'HighlightText' }), (0, i.jsx)(r.td, { children: 'Geselecteerde tekst (tekstkleur)' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'LinkText' }), (0, i.jsx)(r.td, { children: 'Hyperlink' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'Mark' }), (0, i.jsx)(r.td, { children: 'Hyperlink' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'MarkText' }), (0, i.jsx)(r.td, { children: 'Achtergrond' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'SelectedItem' }), (0, i.jsx)(r.td, { children: 'Geselecteerde tekst (achtergrondkleur)' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'SelectedItemText' }), (0, i.jsx)(r.td, { children: 'Geselecteerde tekst (tekstkleur)' })] }), (0, i.jsxs)(r.tr, { children: [(0, i.jsx)(r.td, { children: 'VisitedText' }), (0, i.jsx)(r.td, { children: 'Hyperlink' })] })] })] }), '\n', (0, i.jsx)(r.p, { children: 'In sommige gevallen gebruikt een browser een andere kleur dan een ingestelde systeemkleur:' }), '\n', (0, i.jsxs)(r.ul, { children: ['\n', (0, i.jsx)(r.li, { children: 'Voor SelectedItem gebruikt Chrome een eigen kleur, afhankelijk van welk Chrome-thema de gebruiker heeft ingesteld.' }), '\n', (0, i.jsx)(r.li, { children: 'Voor VisitedText gebruikt Firefox een eigen kleur, afhankelijk van welk Firefox-thema de gebruiker heeft ingesteld.' }), '\n'] })] }); 41 } 42 function h(e = {}) { 43 const { wrapper: r } = { ...(0, l.R)(), ...e.components }; 44 return r ? (0, i.jsx)(r, { ...e, children: (0, i.jsx)(c, { ...e }) }) : c(e); 45 } 46 function a(e) { 47 const r = { a: 'a', h2: 'h2', li: 'li', ul: 'ul', ...(0, l.R)(), ...e.components }; 48 return (0, i.jsxs)(i.Fragment, { children: [(0, i.jsx)(r.h2, { id: 'gerelateerde-wcag-succescriteria', children: 'Gerelateerde WCAG-succescriteria:' }), '\n', (0, i.jsxs)(r.ul, { children: ['\n', (0, i.jsx)(r.li, { children: (0, i.jsx)(r.a, { href: '/wcag/1.4.1/', children: '1.3.3 Zintuiglijke eigenschappen' }) }), '\n', (0, i.jsx)(r.li, { children: (0, i.jsx)(r.a, { href: '/wcag/1.4.1/', children: '1.4.1 Gebruik van kleur' }) }), '\n', (0, i.jsx)(r.li, { children: (0, i.jsx)(r.a, { href: '/wcag/1.4.3/', children: '1.4.3 Contrast (minimum)' }) }), '\n', (0, i.jsx)(r.li, { children: (0, i.jsx)(r.a, { href: '/wcag/1.4.11/', children: '1.4.11 Contrast van niet-tekstuele content' }) }), '\n'] })] }); 49 } 50 function x(e = {}) { 51 const { wrapper: r } = { ...(0, l.R)(), ...e.components }; 52 return r ? (0, i.jsx)(r, { ...e, children: (0, i.jsx)(a, { ...e }) }) : a(e); 53 } 54 const u = { title: 'Let op voorkeursinstellingen voor kleur', title_sm: 'Voorkeursinstellingen voor kleur', hide_title: !0, hide_table_of_contents: !1, sidebar_label: 'Voorkeursinstellingen voor kleur', pagination_label: 'Let op voorkeursinstellingen voor kleur', description: 'Vergeet niet dat gebruikers mogelijk voorkeursinstellingen voor kleuren hebben toegepast.', slug: '/richtlijnen/stijl/kleuren/voorkeuren', keywords: ['voorkeursinstellingen', 'kleur'] }, 55 j = 'Let op voorkeursinstellingen voor kleur', 56 k = {}, 57 g = [{ value: 'Aangepast kleurenthema', id: 'aangepast-kleurenthema', level: 2 }, { value: 'Aangepast contrast', id: 'aangepast-contrast', level: 2 }, { value: 'Contrastthema's in Windows en systeemkleuren', id: 'contrastthemas-in-windows-en-systeemkleuren', level: 3 }, { value: 'CSS system-color voorbeelden', id: 'css-system-color-voorbeelden', level: 3 }, { value: 'Gerelateerde WCAG-succescriteria:', id: 'gerelateerde-wcag-succescriteria', level: 2 }, ...s.RM]; 58 function p(e) { 59 const r = { h1: 'h1', header: 'header', ...(0, l.R)(), ...e.components }; 60 return (0, i.jsxs)(i.Fragment, { children: ['\n', '\n', (0, i.jsx)(r.header, { children: (0, i.jsx)(r.h1, { id: 'let-op-voorkeursinstellingen-voor-kleur', children: 'Let op voorkeursinstellingen voor kleur' }) }), '\n', (0, i.jsx)(h, {}), '\n', (0, i.jsx)(o, {}), '\n', (0, i.jsx)(x, {}), '\n', (0, i.jsx)(s.Ay, {})] }); 61 } 62 function b(e = {}) { 63 const { wrapper: r } = { ...(0, l.R)(), ...e.components }; 64 return r ? (0, i.jsx)(r, { ...e, children: (0, i.jsx)(p, { ...e }) }) : p(e); 65 } 66 }, 67 56672(e, r, n) { 68 n.d(r, { Ay: () => d, RM: () => l }); 69 var t = n(86070), 70 i = n(18439); 71 const l = [{ value: 'Over deze richtlijnen', id: 'over-deze-richtlijnen', level: 2 }]; 72 function s(e) { 73 const r = { a: 'a', em: 'em', h2: 'h2', p: 'p', ...(0, i.R)(), ...e.components }; 74 return (0, t.jsxs)(t.Fragment, { children: [(0, t.jsx)(r.h2, { id: 'over-deze-richtlijnen', children: 'Over deze richtlijnen' }), '\n', (0, t.jsxs)(r.p, { children: ['Deze richtlijnen worden onderhouden door NL Design System en zijn op dit moment in ', (0, t.jsx)(r.em, { children: 'beta' }), '.'] }), '\n', (0, t.jsxs)(r.p, { children: ['We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen?\n', (0, t.jsx)(r.a, { href: 'https://github.com/nl-design-system/documentatie/issues', children: 'Open een issue op GitHub' }), ' en deel je mening.'] })] }); 75 } 76 function d(e = {}) { 77 const { wrapper: r } = { ...(0, i.R)(), ...e.components }; 78 return r ? (0, t.jsx)(r, { ...e, children: (0, t.jsx)(s, { ...e }) }) : s(e); 79 } 80 }, 81 }, 82]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.