Typografi

Vi deler opp typografi i Indeks etter tre kategorier: overskrifter, brødtekst og lenker.

import { Heading, Text, LinkText } from '@sb1/indeks-react';

Overskrifter (Heading)

For overskrifter har vi en egen komponent: Heading.

Heading-nivå spesifiseres med as-propen. Størrelse og semantikk er holdt adskilt — du kan fritt overstyre størrelsen med size hvis det visuelle hierarkiet ikke samsvarer med det semantiske.

Størrelse (size)	Heading-nivå (as)	Font
2xl	h1	SpareBank 1 Title
xl	h2	SpareBank 1 Title
lg	h3	SpareBank 1 Title
md	h4	SpareBank 1
sm	h5	SpareBank 1
xs	h6	SpareBank 1

Kom i gang

React

Live Editor

<Heading as="h1">Renter og betingelser</Heading>

Result

Loading...

HTML

Live Editor

<h1 className="ix-heading ix-heading--2xl">Renter og betingelser</h1>

Result

Loading...

Heading-nivå kan overstyres med size hvis det visuelle hierarkiet ikke samsvarer med det semantiske:

React

Live Editor

<>
  <Heading as="h1" size="lg">Renter og betingelser</Heading>
  <Heading as="h2" size="md">Effektiv rente</Heading>
</>

Result

Loading...

HTML

Live Editor

<>
  <h1 className="ix-heading ix-heading--lg">Renter og betingelser</h1>
  <h2 className="ix-heading ix-heading--md">Effektiv rente</h2>
</>

Result

Loading...

Spacing i overskrifter

• Alle overskrifter kommer uten noe spacing.
• Legg til propen addRecommendedSpacing (boolean) for riktig spacing-verdi i forhold til størrelsen.
• Du kan også bruke spacing-variabler eller util-klasser til å sette margin selv.

Props — Heading

React

Prop	Type	Standard	Beskrivelse
as	h1 | h2 | h3 | h4 | h5 | h6	— (påkrevd)	Semantisk HTML-element. Bestemmer heading-nivå.
size	2xl | xl | lg | md | sm | xs	Utledet fra as	Visuell størrelse. Overstyrer standard mapping.
addRecommendedSpacing	boolean	false	Legger til margin-bottom basert på størrelse.
className	string	—	Ekstra CSS-klasser.

HTML

Klasse	Beskrivelse
ix-heading	Påkrevd basisklasse. Setter farge og linjehøyde.
ix-heading--2xl	Størrelse 2xl — tilsvarer h1.
ix-heading--xl	Størrelse xl — tilsvarer h2.
ix-heading--lg	Størrelse lg — tilsvarer h3.
ix-heading--md	Størrelse md — tilsvarer h4.
ix-heading--sm	Størrelse sm — tilsvarer h5.
ix-heading--xs	Størrelse xs — tilsvarer h6.

---

Brødtekst (Text)

Brødtekster lages med Text-komponenten. Standard element er <p>, men det kan overstyres med as. Størrelsene (xs–2xl) følger samme skala som spacing.

Kom i gang

React

Live Editor

<Text>Kontoen din har en saldo på 12 345,00 kr.</Text>

Result

Loading...

HTML

Live Editor

<p className="ix-text ix-text--md">Kontoen din har en saldo på 12 345,00 kr.</p>

Result

Loading...

Eget element

Tekst rendres som standard i en <p>. Bruk as når elementet ikke er en paragraf — for eksempel i lister, tabellceller eller når du nøster inn i andre elementer:

React

Live Editor

<ul>
  <Text as="li">Brukskonto</Text>
  <Text as="li">Sparekonto</Text>
</ul>

Result

Loading...

HTML

Live Editor

<ul>
  <li className="ix-text ix-text--md">Brukskonto</li>
  <li className="ix-text ix-text--md">Sparekonto</li>
</ul>

Result

Loading...

Linjehøyde

Standard linjehøyde er 1.2. Brødtekst som er lengre enn noen få linjer trenger større linjehøyde for bedre lesbarhet, og kan overstyres til 1.4 med long-propen:

React

Live Editor

<Text long>
  Renten på boliglånet ditt er basert på Nibor pluss et påslag. Den effektive
  renten inkluderer alle gebyrer og kostnader knyttet til lånet, og gir deg et
  mer realistisk bilde av hva lånet faktisk koster deg per år.
</Text>

Result

Loading...

HTML

Live Editor

<p className="ix-text ix-text--md ix-text--long">
  Renten på boliglånet ditt er basert på Nibor pluss et påslag. Den effektive
  renten inkluderer alle gebyrer og kostnader knyttet til lånet, og gir deg et
  mer realistisk bilde av hva lånet faktisk koster deg per år.
</p>

Result

Loading...

Bold og emphasized tekst

Bruk <strong> og <em> for å utheve tekst med henholdsvis fet og kursiv stil. Begge har semantisk betydning. Bruk <b> og <i> kun når du vil ha visuell effekt uten semantisk mening.

React

Live Editor

<>
  <Text>Saldo: <strong>12 345,00 kr</strong></Text>
  <Text>Renten er <em>variabel</em> og kan endres.</Text>
</>

Result

Loading...

Vil du utheve en hel paragraf uten <p>-elementet, bruk as:

Live Editor

<Text as="strong">Denne teksten er uthevet i sin helhet</Text>

Result

Loading...

HTML

Live Editor

<>
  <p className="ix-text ix-text--md">Saldo: <strong>12 345,00 kr</strong></p>
  <p className="ix-text ix-text--md">Renten er <em>variabel</em> og kan endres.</p>
</>

Result

Loading...

Props — Text

React

Prop	Type	Standard	Beskrivelse
as	ElementType	p	HTML-element som rendres. Kan være span, strong, em, etc.
size	2xl | xl | lg | md | sm | xs	md	Skriftstørrelse.
long	boolean	false	Øker linjehøyden til 1.4. Bruk for tekst over flere linjer.
addRecommendedSpacing	boolean	false	Legger til anbefalt margin-bottom under teksten.
className	string	—	Ekstra CSS-klasser.

HTML

Klasse	Beskrivelse
ix-text	Påkrevd basisklasse. Setter linjehøyde.
ix-text--2xl	Størrelse 2xl.
ix-text--xl	Størrelse xl.
ix-text--lg	Størrelse lg.
ix-text--md	Størrelse md (tilsvarer standard brødtekst).
ix-text--sm	Størrelse sm.
ix-text--xs	Størrelse xs.
ix-text--long	Øker linjehøyde til 1.4 for lengre tekstblokker.

---

Lenker (LinkText)

LinkText brukes til navigasjon i løpende tekst. Standard element er <a>, men det kan overstyres med as — for eksempel for å bruke en router-komponent.

Kom i gang

React

Live Editor

<LinkText href="/konto">Se kontooversikt</LinkText>

Result

Loading...

HTML

Live Editor

<a className="ix-link-text ix-link-text--underline" href="/konto">Se kontooversikt</a>

Result

Loading...

Props — LinkText

React

Prop	Type	Standard	Beskrivelse
as	ElementType	a	HTML-element som rendres. Bruk f.eks. Link fra React Router.
size	'sm' | 'md' | 'lg'	md	Skriftstørrelse.
underline	boolean	true	Viser understrek. Deaktiver kun i spesielle kontekster.
isActive	boolean	false	Markerer lenken som aktiv — brukes i navigasjonsmenyer o.l.
className	string	—	Ekstra CSS-klasser.

HTML

Klasse	Beskrivelse
ix-link-text	Påkrevd basisklasse. Setter lenkefarge og fjerner standard understrek.
ix-link-text--underline	Viser understrek. Legg til som standard.
ix-link-text--active	Aktiv-tilstand. Endrer lenkefargen til aktiv-varianten. Brukes typisk for å markere gjeldende side i navigasjonsmenyer.

---

Utility-klasser

For tilfeller der du ikke bruker Text-komponenten, finnes det utility-klasser for typografi.

Skriftstørrelse

Live Editor

<>
  <p className="ix-font-size-xs">xs — ekstra liten tekst</p>
  <p className="ix-font-size-sm">sm — liten tekst</p>
  <p className="ix-font-size-md">md — standardstørrelse</p>
  <p className="ix-font-size-lg">lg — stor tekst</p>
  <p className="ix-font-size-xl">xl — ekstra stor tekst</p>
  <p className="ix-font-size-2xl">2xl</p>
  <p className="ix-font-size-3xl">3xl</p>
  <p className="ix-font-size-4xl">4xl</p>
  <p className="ix-font-size-5xl">5xl</p>
</>

Result

Loading...

Vekt og stil

Klasse	Beskrivelse
.ix-text-bold	Setter font-weight: medium. Tilsvarer effekten av <strong> og <b>.
.ix-text-italic	Setter font-style: italic. Tilsvarer effekten av <em> og <i>.

tip

strong og b arver automatisk bold-stilen fra .ix-body. Det samme gjelder em og i for kursiv. Utility-klassene er nyttige når du ikke kan endre HTML-semantikken.

---

Relatert

• Typografi — retningslinjer og prinsipper
• Spacing-tokens og utility-klasser