Ga naar hoofdinhoud

Componenten

Paragraph

Candidate

De paragraph gebruik je voor een alinea met lopende tekst, instructies van formulieren en voor overige losstaande tekstfragmenten.

Anatomie

Gebruik deze component

CSS

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

@nl-design-system-candidate/paragraph-css versie 2.

Gebruik de nl-paragraph class name op een p element:

<p class="nl-paragraph">Op brute wijze ving de schooljuf de quasi-kalme lynx.</p>

Voor de Lead Paragraph gebruik je de extra class name nl-paragraph--lead:

<p class="nl-paragraph nl-paragraph--lead">
  Op brute wijze ving de schooljuf de quasi-kalme lynx. Je gelooft nooit wat er toen gebeurde!
</p>

Je kunt de CSS zo in je project installeren:

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

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

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

Als je CSS imports gebruikt vanuit JavaScript:

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

React

De React component is gepubliceerd in een npm package:

@nl-design-system-candidate/paragraph-react versie 2.

Je kunt de npm package zo installeren:

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

Je kunt de React component zo gebruiken:

import { Paragraph } from "@nl-design-system-candidate/paragraph-react";


export const MyPage = () => {
  return (
    <html>
      <body>
        <Paragraph>Op brute wijze ving de schooljuf de quasi-kalme lynx.</Paragraph>
      </body>
    </html>
  );
};

De Lead Paragraph werkt zo:

Je kunt de React component zo gebruiken:

<Paragraph purpose="lead">Op brute wijze ving de schooljuf de quasi-kalme lynx.</Paragraph>

Figma

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

Definition of Done

Implementaties

Community Amsterdam

11 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Component gebruiken?

Community Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Component gebruiken?

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 dit component, kun je er vanuit gaan dat je gebruik van dit component voldoet aan WCAG, niveau A en AA, en voor twee succescriteria aan niveau AAA (2.4.13 Focusweergave en 2.5.5 Grootte van het aanwijsgebied uitgebreid).

Toegankelijkheid

Wij letten op de volgende WCAG 2.2 succescriteria, als wij de toegankelijkheid van de Candidate Paragraph component testen:

De Candidate Paragraph component is onderdeel van een verzameling test-webpagina's, die is getoetst op deze successcriteria. Onze test-webpagina's voldoen aan deze succescriteria.

Wanneer je de Candidate Paragraph component ook toegankelijk wil toepassen in jouw webpagina's, doe dan het volgende:

  • Stel het contrast van de design tokens in op voldoende contrast tussen nl.paragraph.color en de achtergrondkleur van de webpagina.

  • Pas de lettergrootte aan naar een groot lettertype, wanneer je een kleur wilt gebruiken met een contrast tussen de 3 ÷ 1 en 4,5 ÷ 1.

  • Gebruik de Paragraph component alleen in combinatie met CSS voor woordafbreking. Bijvoorbeeld:

    :root {
  hyphens: auto;
  word-break: break-word;
}

  • Verminder niet het contrast door de gebruikersvoorkeuren voor anti-aliasing aan te passen in CSS, of maak de wijzigingen ongedaan met:

    * {
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
}

  • Maak een overzicht van alle achtergrondkleuren waarop de Paragraph component voorkomt. Stel voor elke situatie de volgende design token in op een kleur met voldoende contrast: nl.paragraph.color.

  • Geef de redactie van de webpagina's de mogelijkheid om de taal en tekstrichting van de component in te stellen. Dit kan bijvoorbeeld in een CMS.

    Maak het ook makkelijk om te herkennen bij welke Paragraph component een alternatieve taal is ingesteld, zodat het opvallend is waar de taal nog niet is ingesteld.

  • Geef de redactie van de webpagina's de mogelijkheid om de taal en tekstrichting van delen van de tekst in te stellen. Dit kan bijvoorbeeld in de Rich Text Editor van een CMS.

  • Geef de redactie van de webpagina's de instructie om de taal van alinea's in te stellen, wanneer die anders is dan de taal van de webpagina.

  • Geef de redactie van de webpagina's de instructie om de taal van delen van de tekst in te stellen, wanneer die anders is dan de taal van de webpagina.

  • Maak een overzicht van webpagina's waarin de taal van onderdelen een alternatieve taal is, en controleer of de de taal goed is ingesteld.

  • Stel de font-size van een Paragraph in met een relatieve CSS units. Bijvoorbeeld: bij voorkeur rem, of eventueel em, %. Gebruik geen px of pt.

  • Stel de line-height van een Paragraph in met een relatieve CSS units. Bijvoorbeeld: bij voorkeur een unitless line-height (bijvoorbeeld: 1.5), of eventueel %, rem, of em. Gebruik geen px of pt.

De Paragraph component is in de volgende webpagina's gebruikt die op deze successcriteria voldoen aan WCAG 2.2 Niveau AA:

  • Laat het weten als jouw site hier vermeld kan worden, en stuur ons de link van je toegankelijkheidsverklaring!

Help component verbeteren

We vinden het belangrijk dat de component Paragraph goed te gebruiken is door iedereen. Help je mee?