Typografi

Typografi-pakken vår består av flere tekstkomponenter med forhåndsbestemt størrelse og styling.

Bruk av Typografi i prosjekter

For å sikre at prosjektet ditt får riktig typografi bruker typografi-komponenten vår denne CSS-klassen fra nav-frontend-typografi-style.

.app {
  .typo-normal-mixin();
  color: @navMorkGra;
  font-family: @font-family;
  line-height: @line-height-base;
}

Kopiert!

Det antas da at prosjektet er pakket inn under CSS-klassen .app å disse blir da lagt til der. Hvis dette ikke er tilfellet i prosjektet ditt, kan det være greit å legge til manuelt da man sikrer at hele prosjektet får riktig typografi. Dette kan gjøres ved å legge til

@import (reference) "~nav-frontend-typografi-style/src/index.less";

Kopiert!

i ønsket less fil og da legge til klassen app på elementet som pakker in prosjektet ditt.

Alle vekter

Sidetittel

<Sidetittel>Sidetittel</Sidetittel>

Kopiert!

Innholdstittel

<Innholdstittel>Innholdstittel</Innholdstittel>

Kopiert!

Systemtittel

<Systemtittel>Systemtittel</Systemtittel>

Kopiert!

Undertittel

<Undertittel>Undertittel</Undertittel>

Kopiert!

Ingress

<Ingress>Ingress</Ingress>

Kopiert!

Element

<Element>Element</Element>

Kopiert!

Feilmelding

<Feilmelding>Feilmelding</Feilmelding>

Kopiert!

Normaltekst

<Normaltekst>Normaltekst</Normaltekst>

Kopiert!

EtikettLiten

<EtikettLiten>EtikettLiten</EtikettLiten>

Kopiert!

Undertekst

<Undertekst>Undertekst</Undertekst>

Kopiert!

Selvbestemt HTML-tag

Du kan selv bestemme hvilken HTML-tag de forskjellige typografi-vektene skal bruke. For eksempel kan du overstyre h1-defaulten for Sidetittel med h4 slik:

Sidetittel

<Sidetittel tag="h4">Sidetittel</Sidetittel>

Kopiert!