Komponenter
Paragraph
Paragraph brukes til løpende tekst og benyttes typisk i artikler, komponenter, hjelpetekster og lignende.
HTML
Trykk Enter for å redigere
Unable to parse html
const Preview = () => { return ( <Paragraph> Personvernerklæringen gir informasjon om hvilke personopplysninger vi behandler, hvordan disse blir behandlet og hvilke rettigheter du har. </Paragraph> ); }; render(<Preview />)
Bruk
Bruk klassenavnet ds-paragraph på <p>.
CSS variabler og data-attributter
Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.
Ingen relevante css-variabler funnet.
| Navn | Verdi |
|---|---|
| data-variant | long, short |
Eksempel
Størrelser
HTML
Trykk Enter for å redigere
Unable to parse html
const Sizes = () => { return ( <> <Paragraph data-size='xl'>This is an xl paragraph</Paragraph> <Paragraph data-size='lg'>This is a lg paragraph</Paragraph> <Paragraph data-size='md'>This is a md paragraph</Paragraph> <Paragraph data-size='sm'>This is a sm paragraph</Paragraph> <Paragraph data-size='xs'>This is an xs paragraph</Paragraph> </> ); }; render(<Sizes />)
React
- variant
- Description
Adjusts styling for paragraph length
- Type
"long" | "default" | "short"- Default
default
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "long" | "default" | "short" | default | Adjusts styling for paragraph length |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |