Footer

Release dato: 08.05.2023

Sist oppdatert: 09.07.2026

Footer skal være på alle kommunens digitale flater som innbyggere møter. Den plasseres nederst på siden og gir brukeren tilgang til viktige lenker som kontaktinformasjon, personvern og tilgjengelighet. Footeren (sammen med header) bidrar til å synliggjøre Oslo kommune som avsender.

Forhåndsvisningen er dessverre for smal til å vise desktop-versjonen av footer. Vi anbefaler at du åpner forhåndsvisningen i fullskjerm for å teste for stor skjerm.

Relaterte komponenter

Varianter

Variant	Bruk
Primary (global)	Global footer for Oslo kommune som alltid skal ligge nederst på siden
Secondary	Sekundær footer med innhold knyttet til den aktuelle løsningen
Compact secondary	Kompakt sekundær footer med en enkel lenkeliste

Eksampel på normal og kompakt secondary footer.

Retningslinjer for bruk

du lager løsninger der Oslo kommune er avsender (i praksis skal footer alltid brukes i løsninger der Oslo kommune er avsender)
du trenger et fast område for lenker til personvern, tilgjengelighet og kontaktinformasjon
du vil gjøre det tydelig at løsningen tilhører Oslo kommune

I noen få tilfeller, som interne verktøy uten publikum, kan det være mindre behov for global footer. Husk likevel at krav til tilgjengelighet gjelder flere løsninger, og det kan derfor være lurt å ha footer uansett.

Footeren skal alltid plasseres nederst på siden. Den brukes i alle tjenester der Oslo kommune er avsender.

Innholdet i den globale footeren hentes automatisk fra oslo.kommune.no sin CDN.

det er behov for spesifikk informasjon og navigasjon knyttet til løsningen din
du trenger et område for lenker til personvern, tilgjengelighet og kontaktinformasjon spesifikt for løsningen din

Sekundær footer skal alltid brukes sammen med global footer og plasseres direkte over global footer nederst på siden. Sekundær footer skal ha en annen farge enn surface-strong-dark-blue, slik at det er tydelig at det er en egen seksjon.

Eksampel på global og secondary footer sammen.

Strukturen i den sekundære footeren bygger på oslo.kommune.no sin standard, men du kan tilpasse tekst og lenker etter behov.

Husk:

Lenker i footeren skal også være tilgjengelige andre steder på nettstedet.
Unngå å bruke bilder eller ikoner i footeren.
Ikke fyll footeren med for mange lenker.

Du bør bruke den store varianten (normal) hvis du har behov for å vise flere kategoriserte lenker. Den kompakte varianten passer for løsninger som kun trenger å vise en enkel liste med lenker.

Responsivitet

Footeren tilpasser seg automatisk skjermstørrelsen og bygger i høyden på mindre skjermer. På mobil og nettbrett vises innholdet i én kolonne for å sikre god lesbarhet.

Test alltid footeren i løsningen din på ulike skjermstørrelser. Sjekk at alle lenker har god nok plass, og at tekst og navigasjon fortsatt fungerer godt, både i stående og liggende visning.

Hvis du bruker footer med mange lenker, bør du vurdere rekkefølgen på lenkene, slik at de viktigste vises først.

Universell utforming

Footeren må fungere for alle brukere, uansett hvordan de navigerer. Sørg for at alle lenker i footeren kan nås med tastatur og skjermleser.

Lenketekstene skal være tydelige og beskrive hva brukeren kan forvente når de klikker. Bruk eksternlenke-styling på lenker som tar brukeren ut av løsningen, slik at det er tydelig at de åpner en ny side.

Husk at footeren alltid inneholder viktige lenker, som personvern og tilgjengelighet. Disse må være lette å finne og bruke for alle.

Sjekk spesielt:

At alle lenker kan fokuseres med tastatur.
At lenketekstene gir mening også uten kontekst.
At det er tilstrekkelig kontrast mellom tekst og bakgrunn (dette er ivaretatt av fargene i Punkt).

Les mer om universell utforming av lenker (i footer i dette tilfellet):

Anatomi

Element	Beskrivelse
1. Bakgrunn	Hovedområde med `surface-strong-dark-blue` bakgrunn og `text-body-light` tekst
2. Kolonnetittel 1	Tittel for første kolonne
3. Lenker, kolonne 1	Klikkbare lenker i første kolonne
4. Kolonnetittel 2	Tittel for andre kolonne
5. Lenker, kolonne 2	Klikkbare lenker i andre kolonne
6. Kolonnetittel 3	Tittel for tredje kolonne
7. Lenker, kolonne 3	Klikkbare lenker i tredje kolonne
8. Språklenke	Lenke til annen språklig versjon av nettstedet
9. Sosiale medier-lenker	Lenker til Oslo kommunes kontoer

Sekundær versjon med inntil tre kolonner

Element	Beskrivelse
1. Bakgrunn	Hovedområde med `surface-strong-gray` bakgrunn og `text-body-dark` tekst
2. Kolonnetittel 1	Tittel for første kolonne
3. Tekst	Beskrivende tekst eller forklaring i kolonnen
4. Lenker, kolonne 1	Klikkbare lenker i første kolonne
5. Kolonnetittel 2	Tittel for andre kolonne
6. Lenker, kolonne 2	Klikkbare lenker i andre kolonne
7. Kolonnetittel 3	Tittel for tredje kolonne
8. Lenker, kolonne 3	Klikkbare lenker i tredje kolonne

Kompakt sekundær versjon

Element	Beskrivelse
1. Bakgrunn	Hovedområde med `surface-strong-gray` bakgrunn og `text-body-dark` tekst
2. Lenker	Inntil fem lenker til relevante sider

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-footer");

Hvordan ta komponenten i bruk?

Testing

await window.customElements.whenDefined("pkt-footer-simple");

Footer kan brukes til å legge inn Consent-komponenten i bunnen av siden. Dette kan gjøres ved å sende inn includeConsent-prop’en til PktFooter og PktFooterSimple. Da vil det bli lagt til en lenke i footer som åpner innstillingene for informasjonskapsler.

Se Consent for mer informasjon om hvordan du bruker denne komponenten.

Footer og FooterSimple støtter alle Consent-komponentens attributter.

Content Security Policy / CSP

For å bruke footeren i din applikasjon må du tillate https://cdn.web.oslo.kommune.no (eller https://*.oslo.kommune.no) i din Content Security Policy. Spesifikt må connect-src tillates, og dette kommer av at den globale footeren henter innholdet sitt fra Oslo kommunes CDN — samme endepunkt som den globale headeren:

connect-src 'self' https://punkt-cdn.oslo.kommune.no/ https://cdn.web.oslo.kommune.no/;

Setter du en egen dataUrl, er det den URL-en som må tillates i stedet. Alternativt kan du hente payloaden på serversiden og sende den inn via data-propen – da trenger ikke nettleseren tilgang til endepunktet i det hele tatt. Kan du ikke tillate endepunktet, kan du droppe den globale footeren med skipGlobal.

Bruker du includeConsent, laster Consent-komponenten i tillegg inn script og stilark fra samme CDN, så script-src og style-src må også tillates:

script-src 'self' https://cdn.web.oslo.kommune.no/;
style-src 'self' https://cdn.web.oslo.kommune.no/;

Se ellers den generelle CSP-veiledningen for oppsettet Punkt-komponentene trenger (blant annet ikoner og fonter fra punkt-cdn.oslo.kommune.no).

Spør oss gjerne om du trenger hjelp til å sette opp CSP!

Endringer fra versjon 16 til versjon 17

Versjon 17 gjør om footeren fullstendig: alt standardinnhold flyttes til en ny global footer (blått bånd) som henter innhold fra Oslo kommunes felles header/footer-endepunkt — samme endepunkt som den globale headeren. Custom innhold rendres i et grått «sekundær»-bånd som stables oppå den globale footeren. Uten custom innhold rendres kun den globale.

Nye funksjoner

Prop/Event	Beskrivelse
`columns`	Custom innhold som kolonner (tittel + valgfri tekst + lenker) i sekundær-båndet (PktFooter)
`skipGlobal`	Dropp den globale footeren, f.eks. når CSP hindrer henting fra CDN-endepunktet
`data` / `dataUrl`	Forhåndshentet payload eller egendefinert endepunkt — samme mønster som `PktHeader type="global"`
`locale`	Språknøkkel som velges fra payloaden (standard `nb-NO`)
`onDataError`	Callback/event når henting fra endepunktet feiler (den globale footeren skjules stille)
Web Components	`pkt-footer` og `pkt-footer-simple` finnes nå også i Punkt Elements

Breaking changes

Utseende og innhold

Type endring	Beskrivelse
Grå sekundær footer	Custom innhold får grå bakgrunn (var mørk blå). Farger kan overstyres med `--pkt-footer-bg`/`-fg`. Ved mørk bakgrunn: sett også `--pkt-footer-link-hover` (standard hover-farge er beregnet på lys bakgrunn)
Global footer	Blått bånd med innhold fra CDN rendres automatisk under custom innhold (opt-out med `skipGlobal`)
«Om nettstedet»	Personvern- og tilgjengelighetslenkene kommer nå fra payloaden i den globale footeren
Eksterne lenker	Lenker ut av oslo.kommune.no i den globale footeren merkes automatisk med toppdomene i parentes i stedet for ikon. Custom lenker med `external`-flagget får samme merking (ikke lenger `pkt-link--external`-stil)
Consent	Payloadens `#cb-trigger`-lenke erstattes av Punkts Consent-dialog når `includeConsent` er satt, ellers skjules den
CSS-klasser	Klassestrukturen i `.pkt-footer` og `.pkt-footer-simple` er skrevet om — egne CSS-overstyringer må oppdateres
`data-mode="dark"`	Settes ikke lenger på rot-elementet; den globale footeren håndterer dette selv

Deprecated props (kun React)

Prop	Erstatning
`columnOne` / `columnTwo`	Bruk `columns`. Mappes automatisk inntil videre
`personvernOgInfoLink`	Kommer fra global footer. Rendres kun i sekundær-båndet hvis eksplisitt overstyrt til noe annet enn default
`tilgjengelighetLink`	Kommer fra global footer. Rendres kun i sekundær-båndet hvis eksplisitt overstyrt til noe annet enn default
`socialLinks`	Kommer fra global footer. Rendres i sekundær-båndet hvis satt (PktFooter)

Egenskaper

Props

Prop:: columns?
Type:: array
Beskrivelse:: Kolonner (1–3) som rendres i det grå sekundær-båndet over den globale footeren. Uten kolonner rendres kun den globale footeren.
Prop:: skipGlobal?

skip-global?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Dropper den globale (blå) footeren, f.eks. når CSP hindrer henting fra CDN-endepunktet. Kun det grå sekundær-båndet rendres.
Prop:: data?
Type:: object
Beskrivelse:: Hele API-responsen fra header/footer-endepunktet. Settes hvis du allerede har dataene (f.eks. når header og footer deler én fetch). Når denne er satt, skipper komponenten nettverkskallet.
Prop:: dataUrl?

data-url?
Type:: string
Standardverdi:: "https://cdn.web.oslo.kommune.no/header-footer/header-footer.json"
Beskrivelse:: URL den globale footeren henter innhold fra. Standard er Oslo kommunes felles header/footer-endepunkt (samme som global header).
Prop:: locale?
Type:: "nb-NO" | "en-GB"
Beskrivelse:: Hvilken språknøkkel som skal velges fra payloaden. Faller tilbake til nb-NO hvis valgt språk mangler.
Prop:: openLinksInNewTab?

open-links-in-new-tab?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Åpner alle custom lenker i ny fane. Gjelder kun innholdet i sekundær-båndet.
Prop:: includeConsent?

include-consent?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Erstatter payloadens «Innstillinger for informasjonskapsler»-lenke med Punkts egen Consent-dialog. Uten denne skjules lenken helt.
Prop:: googleAnalyticsId?

google-analytics-id?
Type:: string
Beskrivelse:: Google Analytics-ID for sporing via Consent-komponenten
Prop:: hotjarId?

hotjar-id?
Type:: string
Beskrivelse:: Hotjar-ID for sporing via Consent-komponenten

Events

Event:: onDataError

data-error
Type:: —
Beskrivelse:: Henting fra endepunktet feilet — den globale footeren skjules stille
Event:: onToggleConsent

toggle-consent
Type:: —
Beskrivelse:: Bruker endrer samtykke i Consent-dialogen

Prop:: title
Type:: string
Beskrivelse:: Overskrift for kolonnen
Prop:: text?
Type:: string
Beskrivelse:: Valgfri tekst som vises over lenkene
Prop:: links?
Type:: array
Beskrivelse:: Lenker i kolonnen

Props

Prop:: links?
Type:: array
Beskrivelse:: Lenker som rendres som en kompakt, sentrert rad med pil-ikoner i det grå sekundær-båndet over den globale footeren. Uten lenker rendres kun den globale footeren.
Prop:: skipGlobal?

skip-global?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Dropper den globale (blå) footeren, f.eks. når CSP hindrer henting fra CDN-endepunktet. Kun det grå sekundær-båndet rendres.
Prop:: data?
Type:: object
Beskrivelse:: Hele API-responsen fra header/footer-endepunktet. Settes hvis du allerede har dataene (f.eks. når header og footer deler én fetch). Når denne er satt, skipper komponenten nettverkskallet.
Prop:: dataUrl?

data-url?
Type:: string
Standardverdi:: "https://cdn.web.oslo.kommune.no/header-footer/header-footer.json"
Beskrivelse:: URL den globale footeren henter innhold fra. Standard er Oslo kommunes felles header/footer-endepunkt (samme som global header).
Prop:: locale?
Type:: "nb-NO" | "en-GB"
Beskrivelse:: Hvilken språknøkkel som skal velges fra payloaden. Faller tilbake til nb-NO hvis valgt språk mangler.
Prop:: openLinksInNewTab?

open-links-in-new-tab?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Åpner alle custom lenker i ny fane. Gjelder kun innholdet i sekundær-båndet.
Prop:: includeConsent?

include-consent?
Type:: boolean
Standardverdi:: false
Beskrivelse:: Erstatter payloadens «Innstillinger for informasjonskapsler»-lenke med Punkts egen Consent-dialog. Uten denne skjules lenken helt.
Prop:: googleAnalyticsId?

google-analytics-id?
Type:: string
Beskrivelse:: Google Analytics-ID for sporing via Consent-komponenten
Prop:: hotjarId?

hotjar-id?
Type:: string
Beskrivelse:: Hotjar-ID for sporing via Consent-komponenten

Events

Event:: onDataError

data-error
Type:: —
Beskrivelse:: Henting fra endepunktet feilet — den globale footeren skjules stille
Event:: onToggleConsent

toggle-consent
Type:: —
Beskrivelse:: Bruker endrer samtykke i Consent-dialogen

Prop:: href
Type:: string
Beskrivelse:: URL for lenken
Prop:: text
Type:: string
Beskrivelse:: Tekst for lenken
Prop:: external?
Type:: boolean
Beskrivelse:: Merker lenken som ekstern: toppdomenet vises i parentes bak lenketeksten
Prop:: openInNewTab?
Type:: boolean
Beskrivelse:: Åpner lenken i ny fane

Footer

Footer Simple

Relaterte komponenter

Varianter

Retningslinjer for bruk

Global footer

Bruk global footer når

Plassering av global footer

Innhold i global footer

Sekundær footer

Bruk sekundær footer i tillegg til global footer når

Plassering av sekundær footer

Innhold i footer

Når skal du bruke vanlig sekundær footer og når skal man bruke den kompakte varianten?

Responsivitet

Universell utforming

Anatomi

Global versjon (standard footer med tre kolonner)

Sekundær versjon med inntil tre kolonner

Kompakt sekundær versjon

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Hvordan ta komponenten i bruk?

Testing

Content Security Policy / CSP

Endringer fra versjon 16 til versjon 17

Nye funksjoner

Breaking changes

Egenskaper

PktFooter

Props

Events

IPktFooterColumn

PktFooterSimple

Props

Events

IPktFooterLink

Footer

Test komponenten

Footer Simple

Relaterte komponenter

Varianter

Retningslinjer for bruk

Global footer

Bruk global footer når

Plassering av global footer

Innhold i global footer

Sekundær footer

Bruk sekundær footer i tillegg til global footer når

Plassering av sekundær footer

Innhold i footer

Når skal du bruke vanlig sekundær footer og når skal man bruke den kompakte varianten?

Responsivitet

Universell utforming

Anatomi

Global versjon (standard footer med tre kolonner)

Sekundær versjon med inntil tre kolonner

Kompakt sekundær versjon

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Hvordan ta komponenten i bruk?

Testing

Innstillinger for informasjonskapsler / Consent

Content Security Policy / CSP

Endringer fra versjon 16 til versjon 17

Nye funksjoner

Breaking changes

Egenskaper

PktFooter

Props

Events

IPktFooterColumn

PktFooterSimple

Props

Events

IPktFooterLink