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