Typografi

Indeks deler typografi i tre komponenter:

• Heading — overskrifter (h1–h6)
• Text — brødtekst og løpende tekst
• LinkText — lenker i løpende tekst

Alle bruker data-size for å styre visuell størrelse uavhengig av semantisk element.

Overskrifter (Heading)

Overskrifter i Indeks skiller mellom semantisk nivå og visuell størrelse. Semantisk nivå bestemmer dokumentstrukturen og hva skjermlesere annonserer — alltid et HTML-element fra h1 til h6. Visuell størrelse styrer utseendet og følger som standard en fast mapping, men kan overstyres hvis det visuelle hierarkiet krever det.

De tre største størrelsene (2xl–lg) bruker SpareBank 1 Title, de tre minste bruker SpareBank 1.

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

Kom i gang

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

Result

Loading...

Kode

Live Editor

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

Result

Loading...

Kode

Live Editor

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

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

Result

Loading...

Kode

Live Editor

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

Result

Loading...

Kode

Live Editor

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

Spacing i overskrifter

Alle overskrifter kommer uten spacing som standard. Du kan legge til anbefalt spacing basert på størrelsen, eller bruke spacing-utility-klasser til å sette margin selv.

Bruk addRecommendedSpacing-propen for å legge til anbefalt margin-bottom basert på størrelse:

Result

Loading...

Kode

Live Editor

<>
    <Heading as="h1" addRecommendedSpacing>Renter og betingelser</Heading>
    <Heading as="h2" addRecommendedSpacing>Effektiv rente</Heading>
</>

Legg til spacing-klassen som tilsvarer størrelsen:

Størrelse	Klasse
2xl (h1)	ix-mb-sm
xl (h2)	ix-mb-xs
lg (h3)	ix-mb-sm
md–xs (h4–h6)	ix-mb-2xs

Result

Loading...

Kode

Live Editor

<>
    <h1 className="ix-heading ix-mb-sm" data-size="2xl">Renter og betingelser</h1>
    <h2 className="ix-heading ix-mb-xs" data-size="xl">Effektiv rente</h2>
</>

Props — Heading

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.

Attributt / klasse	Beskrivelse
ix-heading	Påkrevd basisklasse. Setter farge og linjehøyde.
data-size="2xl"	Størrelse 2xl — tilsvarer h1.
data-size="xl"	Størrelse xl — tilsvarer h2.
data-size="lg"	Størrelse lg — tilsvarer h3.
data-size="md"	Størrelse md — tilsvarer h4.
data-size="sm"	Størrelse sm — tilsvarer h5.
data-size="xs"	Størrelse xs — tilsvarer h6.

---

Brødtekst (Text)

Text er utgangspunktet for all løpende tekst — beskrivelser, hjelpetekster, meldinger og innhold som ikke er overskrift eller lenke. Standard størrelse er md, og standard element er <p>.

Størrelsene (xs–2xl) følger samme skala som spacing, noe som gjør det lett å kombinere tekststørrelse og luft uten å blande ulike skalaer.

Kom i gang

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

Result

Loading...

Kode

Live Editor

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

Result

Loading...

Kode

Live Editor

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

Eget element

ix-text-klassen kan settes på alle block- og inline-elementer.

Tekst rendres som standard i en <p>. Bruk as når elementet ikke er en paragraf — for eksempel i lister eller tabellceller:

Result

Loading...

Kode

Live Editor

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

Result

Loading...

Kode

Live Editor

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

Linjehøyde

Standard linjehøyde er 1.2. Brødtekst over flere linjer trenger større linjehøyde for bedre lesbarhet — sett den til 1.4 med modifikatoren under:

Result

Loading...

Kode

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>

Legg til ix-text--long for økt linjehøyde:

Result

Loading...

Kode

Live Editor

<p className="ix-text ix-text--long" data-size="md">
    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>

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.

Result

Loading...

Kode

Live Editor

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

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

Result

Loading...

Kode

Live Editor

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

Result

Loading...

Kode

Live Editor

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

Props — Text

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.

Attributt / klasse	Beskrivelse
ix-text	Påkrevd basisklasse. Setter linjehøyde og farge.
data-size="2xl"	Størrelse 2xl.
data-size="xl"	Størrelse xl.
data-size="lg"	Størrelse lg.
data-size="md"	Størrelse md (tilsvarer standard brødtekst).
data-size="sm"	Størrelse sm.
data-size="xs"	Størrelse xs.
ix-text--long	Øker linjehøyde til 1.4 for lengre tekstblokker.

---

Lenker (LinkText)

LinkText er lenker som sitter i løpende tekst — ikke frittstående knapper eller navigasjonslenker. Komponenten setter riktig lenkefarge, understrek og aktiv-tilstand, og fungerer med <a> eller en hvilken som helst router-komponent.

Kom i gang

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

Result

Loading...

Kode

Live Editor

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

Result

Loading...

Kode

Live Editor

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

Props — LinkText

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.

Klasse	Beskrivelse
ix-link-text	Påkrevd basisklasse. Setter lenkefarge og understrek.
ix-link-text--no-underline	Fjerner understrek. Bruk kun i spesielle kontekster.
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

Result

Loading...

Kode

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>
</>

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.

---

Tilpasning med CSS

Typografi i Indeks er ikke bygget rundt én blokkklasse — stilene er i stedet fordelt på klasser per komponent og størrelse. Du kan bruke disse direkte i egenhåndig HTML uten React-komponentene.

Tilgjengelige klasser og selektorer

Komponent	Basisklasse	Størrelse	Modifikatorer
Heading	ix-heading	data-size="2xl|xl|lg|md|sm|xs"	—
Text	ix-text	data-size="2xl|xl|lg|md|sm|xs"	ix-text--long
LinkText	ix-link-text	—	ix-link-text--no-underline ix-link-text--active

Se fullstendig klasseliste med beskrivelse under Props-tabellene i HTML-fanene ovenfor.

Eksempel: bruk i eigen HTML-struktur

<h1 class="ix-heading" data-size="2xl">Renter og betingelser</h1>
<p class="ix-text ix-text--long" data-size="md">Renten på boliglånet ditt er basert på Nibor pluss et påslag.</p>
<a class="ix-link-text" href="/konto">Se kontooversikt</a>

Relatert

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