Gå til hovedinnhold
KOMPONENTER

Typography

npmv1.6.13

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.
NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "h1"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

margin"top" | "bottom" | "both" | "none" 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

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

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "h1"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

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

Hvor du vil ha marginer

LeadParagraph

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "p"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

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

Hvor du vil ha marginer

Paragraph

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "p"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

margin"bottom" | "none" bottom

Hvor du vil ha marginer

SubParagraph

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "p"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

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

Hvor du vil ha marginer

SmallText

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "span"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

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

Hvor du vil ha marginer

Label

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "label"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

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

Hvor du vil ha marginer

SubLabel

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "span"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

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

Hvor du vil ha marginer

StrongText

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "strong"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

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

Hvor du vil ha marginer

EmphasizedText

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "em"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

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

Hvor du vil ha marginer

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "a"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

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

Hvor du vil ha marginer

PreformattedText

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "pre"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

CodeText

NavnTypePåkrevd?Default-verdiBeskrivelse
as(string & ElementType<any>) | (ComponentClass<any, any> & ElementType<any>) | (FunctionComponent<any> & ElementType<...>) "code"

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

UnorderedList

NavnTypePåkrevd?Beskrivelse
classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

NumberedList

NavnTypePåkrevd?Beskrivelse
classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

ListItem

NavnTypePåkrevd?Beskrivelse
classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

titleReactNode

Tittel

Rediger denne siden på Bitbucket