TODO: PageHeader

Hoofdmenu

Code Block

Candidate

Blok met één of meerdere regels computercode.

:::tip[Tip] Gebruik de Code component als de code in een regel met andere tekst staat. :::

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 1 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 1 items zijn nu zichtbaar.

Gebruik Code Block

CSS

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

@nl-design-system-candidate/code-block-css

Gebruik de nl-code-block class name op een pre element met de nl-code-block__code class name op een code element:

<pre dir="ltr" translate="no" class="nl-code-block">
  <code class="nl-code-block__code">function addNumbers(a, b) {
  return a + b;
}</code>
</pre>

Je kunt de CSS zo in je project installeren:

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

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

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

Als je CSS imports gebruikt vanuit JavaScript:

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

React

De React component is gepubliceerd in een npm package:

@nl-design-system-candidate/code-block-react

Je kunt de npm package zo installeren:

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

Je kunt de React component zo gebruiken:

import { CodeBlock } from "@nl-design-system-candidate/code-block-react";

export const MyPage = () => {
  return (
    <html>
      <body>
        function addNumbers(a, b) {
          return a + b;
        }
      </body>
    </html>
  );
};

Design tokens

nametype
nl.code-block.background-color color
nl.code-block.border-radius dimension
nl.code-block.color color
nl.code-block.font-family fontFamilies
nl.code-block.font-size fontSizes
nl.code-block.line-height lineHeights
nl.code-block.padding-block dimension
nl.code-block.padding-inline dimension

Definition of Done

Help om deze component te verbeteren

We vinden het belangrijk dat de component Code Block 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-code-block in CSS
utrecht-code-block in HTML
utrecht-code-block in Web Component
utrecht-code-block in React
utrecht-code-block in Vue

Den Haag

2 van 11 stappen gedocumenteerd op het Community Den Haag projectbord