Hjelpeklasser

Oversikt over våre hjelpeklasser:

Type	Klassenavn	Modifier / Helper	Beskrivelse
Container	.pkt-container	--full, {--maksbredde}, {--alignment}
Synlighet	.pkt-show, .pkt-hide	-{synlighet}-{breakpoint}-up
Tekstjustering	.pkt-txt-start, .pkt-txt-center, .pkt-txt-end
Screenreader only	.pkt-sr-only		Innholdet blir skjult visuelt, men kan leses av skjermleser
Avkortning	.pkt-truncate-text		Krever display: inline-block eller display: block

Container

Vår pkt-container er en CSS-klasse som brukes til å definere en innkapslet boks eller beholder for innholdet på nettsider. Den er spesielt nyttig for responsivt design, da den hjelper til med å justere og begrense innholdet til bestemte skjermstørrelser og gi riktig luft rundt innholdet. Dette bidrar til å opprettholde et ryddig layout og kan begrense innholdet til en bestemt bredde.

For å bruke container klassen, legger du til klassenavnet pkt-container på HTML-elementet du vil ha som container for innholdet.

For eksempel:

<div class="pkt-container">
  <!-- Innholdet ditt her -->
</div>

En container med full bredde:

<div class="pkt-container pkt-container--full">
  <!-- Innholdet ditt her -->
</div>

En container med justering til venstre, høyre eller sentrert:

<div class="pkt-container pkt-container--left">
  <!-- Innholdet ditt her -->
</div>

<div class="pkt-container pkt-container--center">
  <!-- Innholdet ditt her -->
</div>

<div class="pkt-container pkt-container--right">
  <!-- Innholdet ditt her -->
</div>

En responsiv container med forskjellige bredder. Modifikatoren setter en max-width, den er ikke knyttet til et breakpoint. Derfor finnes --phablet og --desktop fortsatt, selv om breakpointene med de navnene ble fjernet i Punkt 19:

<div class="pkt-container pkt-container--phablet">
  <!-- Innholdet ditt her -->
</div>

<div class="pkt-container pkt-container--tablet">
  <!-- Innholdet ditt her -->
</div>

<div class="pkt-container pkt-container--laptop">
  <!-- Innholdet ditt her -->
</div>

Se våre breakpoints her.

Synlighet

Bruk pkt-hide for å skjule eller pkt-showfor å gjøre elementer synlig. Disse kan brukes i kombinasjon med breakpoints. -{synlighet}-{breakpoint}-up indikerer at synligheten av elementet vil endre seg basert på skjermstørrelsen. For eksempel, .pkt-hide-laptop-up betyr at elementet vil være skjult på laptopskjermer og større.

<!-- Skjul innholdet fra tablet og opp -->
<p class="pkt-hide-tablet-up">...</p>

<!-- Vis innholdet fra tablet og opp -->
<p class="pkt-hide pkt-show-tablet-up">...</p>

Se våre breakpoints her.

Tekstjustering

Juster teksten, eksempel:

<p class="pkt-txt-start">Venstrejustert tekst.</p>
<p class="pkt-txt-center">Senterjustert tekst.</p>
<p class="pkt-txt-end">Høyrejustert tekst.</p>

Vis kun for skjermlesere

pkt-sr-only skjuler innholdet visuelt, men gjør det tilgjengelig for skjermlesere. Dette er nyttig for å gi tilgjengelighet til innhold som ikke skal vises på skjermen, men som er viktig for personer med nedsatt syn eller som bruker skjermlesere.

<h2 class="pkt-sr-only">Tittel for skjermlesere</div>

Hopp til hovedinnhold (skip-link)

pkt-skiplink er en klasse som brukes for å lage en “hopp til hovedinnhold” lenke, som er spesielt nyttig for tilgjengelighet. Denne lenken lar brukere, spesielt de som bruker tastatur eller skjermlesere, hoppe direkte til hovedinnholdet på en nettside, og dermed unngå å måtte navigere gjennom sidens header og navigasjon.

<a href="#main-content" class="pkt-skiplink">Hopp til hovedinnhold</a>

Denne kan legges til før headeren på siden, og vil være synlig når den får fokus (for eksempel ved å trykke på Tab-tasten).

Farger

Vi har hjelpeklasser for bakgrunn, tekstfarge og border for alle våre farger. Les mer om fargenes hjelpeklasser her.

Avkorting

Avkorter teksten som overskrider breddeområdet til elementet. Krever display: inline-block eller display: block for å fungere som forventet.

<div class="pkt-row">
  <div class="pkt-col-4 pkt-truncate-text">
    Digitaliseringsetaten i Oslo kommune ble opprettet 1. januar 2026.
  </div>
</div>