Gå til hovedinnhold
KOMPONENTER

Typography

npmv1.6.5

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.

Denne komponenten har ingen props

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.

Andre typografiske elementer

Blockquote

Entur gjør det enklere å reise kollektivt
Ola Nordmann, Entur

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

Denne komponenten har ingen props

LeadParagraph

Denne komponenten har ingen props

Paragraph

Denne komponenten har ingen props

SubParagraph

Denne komponenten har ingen props

SmallText

Denne komponenten har ingen props

Label

Denne komponenten har ingen props

SubLabel

Denne komponenten har ingen props

StrongText

Denne komponenten har ingen props

EmphasizedText

Denne komponenten har ingen props

Denne komponenten har ingen props

PreformattedText

Denne komponenten har ingen props

CodeText

Denne komponenten har ingen props

UnorderedList

NavnTypePåkrevd?Beskrivelse
classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

NumberedList

Denne komponenten har ingen props

ListItem

NavnTypePåkrevd?Beskrivelse
classNamestring

Ekstra klassenavn

childrenReactNode

Innholdet

titleReactNode

Tittel

Rediger denne siden på Bitbucket