Gå til hovedinnhold
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.
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

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.

Kontrast

Ingress

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

Kontrast

Vanlig tekst

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

Kontrast

Label-tekst

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

Kontrast

Lister

Du har to forskjellige listetyper - usortert og nummerert.

Kontrast

Andre typografiske elementer

Blockquote

Kontrast
Kontrast

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

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

LeadParagraph

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

Paragraph

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "bottom" "bottom"

Hvor du vil ha marginer

SubParagraph

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

SmallText

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

Label

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

SubLabel

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

StrongText

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

EmphasizedText

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

PreformattedText

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

CodeText

NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

UnorderedList

NavnTypeBeskrivelse
className?string

Ekstra klassenavn

children?ReactNode

Innholdet

NumberedList

NavnTypeBeskrivelse
className?string

Ekstra klassenavn

children?ReactNode

Innholdet

ListItem

NavnTypeBeskrivelse
className?string

Ekstra klassenavn

children?ReactNode

Innholdet

title?ReactNode

Tittel

Rediger denne siden på Bitbucket