Ga naar hoofdinhoud

Paragraph

Paragraph

Candidate

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

Anatomie

Candidate component gebruiken

Design tokens

name type
nl.paragraph.color color
nl.paragraph.font-family fontFamilies
nl.paragraph.font-size fontSizes
nl.paragraph.font-weight fontWeights
nl.paragraph.line-height lineHeights
nl.paragraph.margin-block-end dimension
nl.paragraph.margin-block-start dimension
nl.paragraph.lead.font-size fontSizes
nl.paragraph.lead.font-weight fontWeights
nl.paragraph.lead.line-height lineHeights
nl.paragraph.lead.margin-block-end dimension
nl.paragraph.lead.margin-block-start dimension

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/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.

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 deze component, kun je er vanuit gaan dat je gebruik van deze component voldoet aan WCAG, niveau A en AA.

Community implementaties

Amsterdam

11 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Snel aan de slag

ams-paragraph in CSS
ams-paragraph in React

Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Snel aan de slag

utrecht-paragraph in CSS
utrecht-paragraph in HTML
utrecht-paragraph in React
utrecht-paragraph in Vue
utrecht-paragraph in Angular

Definition of Done

Help component verbeteren

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