Gå til hovedinnhold
KOMPONENTER

Typografi

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.

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

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

Hvor du vil ha marginer

Overskrifter

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

Overskrift nivå 1

Overskrift nivå 2

Overskrift nivå 3

Overskrift nivå 4

Overskrift nivå 5
Overskrift nivå 6

Ingress

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

Entur gjør det enklere å reise kollektivt

Vanlig tekst

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

Entur leverer tjenester som gjør det enkelt å reise på tvers av alle kollektivselskaper i Norge.

Entur leverer tjenester som gjør det enkelt å reise på tvers av alle kollektivselskaper i Norge.

Entur leverer tjenester som gjør det enkelt å reise på tvers av alle kollektivselskaper i Norge.

Label-tekst

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


Entur leverer tjenester som gjør det enkelt å reise på tvers av alle kollektivselskaper i Norge.

Lister

Du har to forskjellige listetyper - usortert og nummerert.

Usorterte lister er fine for å summere opp en rekke punkter der rekkefølgen ikke er så viktig

  • Du kan bruke dem til å summere opp hva kunden har kjøpt
  • Du kan liste opp hovedtrekk i en kjøpskontrakt
  • Du kan gjerne skrive lengre punkter om du vil, men det er ofte lettere å lese korte og konsise punkter enn lange og detaljrike tekster.

Nummererte lister er flotte når du har en rekke punker du vil fremheve rekkefølgen på.

  1. Først bør du huske på å bruke title-propenDa får du en fin fet overskrift på punktet ditt
  2. For det andre bør du ha gode overskrifterDette er forferdelige eksempler, så gjør en mye bedre jobb enn det vi har gjort her.

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?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

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

Hvor du vil ha marginer

LeadParagraph

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

Paragraph

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

margin"bottom" | "none"

Hvor du vil ha marginer

SubParagraph

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

SmallText

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

Label

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

SubLabel

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

StrongText

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

EmphasizedText

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

PreformattedText

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

HTML-elementet eller React-komponenten som rendres

classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

CodeText

NavnTypePåkrevd?Beskrivelse
asstring | ComponentClass<any, any> | FunctionComponent<any>

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