KOMPONENTER

Typography

npmv1.8.0

Retningslinjer for bruk av typografi står beskrevet under Visuell identitet.

Det er definert en typografisk skala, hvor vi bruker ulike fontstørrelser for å skape typografisk hierarki i teksten. Dette er den typografiske skalaen for løpende brødtekst og titler, navngitt etter “heading” nummerering i synkende skala der øverste nivå er H1, deretter H2, H3 osv.

Tabellen viser hvilke størrelser og linjeavstander vi skal bruke når vi designer for web. Ved å kombinere ulike fontstørrelser på en god måte kan vi skape et tydelig hierarki og en struktur som gjør det enklere for leseren å forstå og navigere seg gjennom tekstene våre.

Tekstavstand:

Tekstavstanden skal kunne overstyres for å gjøre teksten lettere å lese. Suksesskriterium for tekstavstand er følgende:

Linjehøyde (linjeavstand) angis til minst 1,5 ganger skriftstørrelsen.
Avstand etter avsnitt angis til minst 2 ganger skriftstørrelsen.
Avstanden mellom bokstaver i blokker av tekst (sperring) angis til minst 0,12 ganger skriftstørrelsen.
Avstanden mellom ord angis til minst 0,16 ganger skriftstørrelsen.

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"h1"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "bottom" \| "top"`	`"both"`	Hvor du vil ha marginer

Overskrifter

Vi har egne komponenter for hver overskriftstype - en for hvert av de 6 nivåene vi støtter.

Ingress

Ingressen er et kort avsnitt som normalt kommer etter tittelen på en side.

Vanlig tekst

Vi har tre nivåer med tekst - "paragraph", "sub paragraph" og "small text".

Label-tekst

Vi har to nivåer med "label"-tekst - "label" og "sub label".

Lister

Du har to forskjellige listetyper - usortert og nummerert.

Andre typografiske elementer

Blockquote

Link

CSS properties

Vi eksponerer noen CSS-properties fra denne pakken, som kan brukes på tvers av andre komponenter. Disse er:

--primary-background-color;
--primary-text-color;
--primary-label-color;

De vil bli dokumentert bedre etterhvert, men vil være de aktuelle hovedfargene for gitt tema og modus.

Komponenter

Heading1-6

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"h1"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "bottom" \| "top"`	`"both"`	Hvor du vil ha marginer

LeadParagraph

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"p"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "bottom" \| "top"`	`"both"`	Hvor du vil ha marginer

Paragraph

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"p"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "bottom"`	`"bottom"`	Hvor du vil ha marginer

SubParagraph

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"p"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "bottom" \| "top"`	`"both"`	Hvor du vil ha marginer

SmallText

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"span"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "bottom" \| "top"`	`"both"`	Hvor du vil ha marginer

Label

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"label"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "bottom" \| "top"`	`"both"`	Hvor du vil ha marginer

SubLabel

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"span"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "bottom" \| "top"`	`"both"`	Hvor du vil ha marginer

StrongText

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"strong"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "bottom" \| "top"`	`"both"`	Hvor du vil ha marginer

EmphasizedText

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"em"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "bottom" \| "top"`	`"both"`	Hvor du vil ha marginer

Link

Navn	Type	Default-verdi	Beskrivelse
`external?`	`boolean`
`as?`	`string \| React.ElementType`	`"a"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "bottom" \| "top"`	`"both"`	Hvor du vil ha marginer

PreformattedText

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"pre"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet

CodeText

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"code"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet

UnorderedList

Navn	Type	Beskrivelse
`className?`	`string`	Ekstra klassenavn
`children?`	`ReactNode`	Innholdet

NumberedList

Navn	Type	Beskrivelse
`className?`	`string`	Ekstra klassenavn
`children?`	`ReactNode`	Innholdet

ListItem

Navn	Type	Beskrivelse
`className?`	`string`	Ekstra klassenavn
`children?`	`ReactNode`	Innholdet
`title?`	`ReactNode`	Tittel