Naar de inhoud
Zoeken

subnavigatie

Canvas arrow function

Tests whether a Canvas with arrow function children renders correctly

Dit is een testpagina

Deze pagina is bedoeld om de werking van de website geïsoleerd te kunnen testen door de developers van nldesignsystem.nl. Deze pagina wordt niet getest op toegankelijkheid

Simple example

Hello from Canvas

Code
<p>
  Hello
  <strong>from</strong>
  Canvas
</p>

Code attr wins over children

existing code attr

Code
<p>existing <em>code</em> attr</p>

Authored attributes are being preserved, elements won’t receive .nl-* classes

Vul de voornaam of voornamen in zoals deze op je id-kaart of paspoort staan.

Code
<p><label for="first-name">Voornaam (een of meerdere)</label></p>
<p id="first-name-description">
  Vul de voornaam of voornamen in zoals deze op je id-kaart of paspoort staan.
</p>
<p>
  <input
    autocomplete="given-name"
    type="text"
    name="first_name"
    id="first-name"
    aria-describedby="first-name-description"
  />
</p>

JSX artifacts do not show up

Wij hebben jouw toestemming nodig om je e-mailadres op te slaan zodat we je onze nieuwsbrief kunnen sturen. Lees onze privacybeleid (opent in een nieuw venster) .

Code
<p id="desc">
  Wij hebben jouw toestemming nodig om je e-mailadres op te slaan zodat we je
  onze nieuwsbrief kunnen sturen. Lees onze 
  <a
    href="#"
    target="_blank"
  >
    privacybeleid (opent in een nieuw venster)
  </a>
  .
</p>

Headings do not show up in table of contents

This is an heading

Code
<h2>This is an heading</h2>

External icon is rendered

Lees het privacybeleid , opent in een nieuwe tab .

Code
<p>
  <a
    href="#"
    target="_blank"
    class="nlds-icon-ext"
  >
    Lees het privacybeleid
    <span class="sr-only">, opent in een nieuwe tab</span>
  </a>
  .
</p>

Multiline style tags are being rendered correctly

Kaarten van Nederland

Code
<div
  style=" background: center center no-repeat url('https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen_content_afbeeldingen-Kaart.jpg'); "
>
  <h2 style=" padding: 50px; color: white; background-color: #00000088 ">
    Kaarten van Nederland
  </h2>
</div>
Hoofdmenu