Skip to content

Latest commit

 

History

History
68 lines (44 loc) · 1.62 KB

get-started.mdx

File metadata and controls

68 lines (44 loc) · 1.62 KB

import { Meta } from '@storybook/blocks';

🚀 Kom i gang

Følg disse stegene for å komme i gang med React-komponentene.

1. Installer pakkene

npm i @digdir/designsystemet-react @digdir/designsystemet-theme @digdir/designsystemet-css

Typescript

Dersom du bruker Typescript, sørg for at du har typescript >= 3.8 i devDependencies:

npm i typescript --save-dev

2. Font

Du kan fritt bruke hvilken som helst font-familie med komponentene.

Komponentene er designet og utviklet med Inter fonten, så variasjoner kan forekomme dersom du bruker en annen font.

Legg til Inter fonten (valgfritt)

Legg til <link> taggen i <head>, og sett font-family til Inter i din globale css fil.

font-feature-settings legger til en hale på små L'er.

HTML

<link
  rel="stylesheet"
  href="https://altinncdn.no/fonts/inter/v4.1/inter.css"
  integrity="sha384-OcHzc/By/OPw9uJREawUCjP2inbOGKtKb4A/I2iXxmknUfog2H8Adx71tWVZRscD"
  crossorigin="anonymous"
/>

CSS

body {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */
}

Dersom du velger å installere fonten på en annen måte, husk å inkludere fontvektene 400, 500 og 600.

3. Bruk en React-komponent

import '@digdir/designsystemet-theme';
import '@digdir/designsystemet-css';

import { Button } from '@digdir/designsystemet-react';

<Button variant='secondary'>Jeg er en knapp!</Button>;

@digdir/designsystemet-theme og @digdir/designsystemet-css må kun importeres én gang i applikasjonen.