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>
<h1 className="typo-sidetittel">Sidetittel</h1>
 Kopiert! 

<Innholdstittel>Innholdstittel</Innholdstittel>
<h1 className="typo-innholdstittel">Innholdstittel</h1>
 Kopiert! 

<Systemtittel>Systemtittel</Systemtittel>
<h2 className="typo-systemtittel">Systemtittel</h2>
 Kopiert! 

<Undertittel>Undertittel</Undertittel>
<h2 className="typo-undertittel">Undertittel</h2>
 Kopiert! 

<Ingress>Ingress</Ingress>
<p className="typo-ingress">Ingress</p>
 Kopiert! 

<Element>Element</Element>
<p className="typo-element">Element</p>
 Kopiert! 

<Feilmelding>Feilmelding</Feilmelding>
<p className="typo-feilmelding">Feilmelding</p>
 Kopiert! 

<Normaltekst>Normaltekst</Normaltekst>
<p className="typo-normal">Normaltekst</p>
 Kopiert! 

<Undertekst>Undertekst</Undertekst>
<p className="typo-undertekst">Undertekst</p>
 Kopiert! 

<UndertekstBold>UndertekstBold</UndertekstBold>
<p className="typo-undertekst-bold">UndertekstBold</p>
 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 tag="h4">Sidetittel</Sidetittel>
 Kopiert!