Footer

Release dato: 08.05.2023

Sist oppdatert: 05.05.2025

Footer er en del av standardsidemalen og plasseres nederst pÄ siden. Den gir brukeren tilgang til viktige lenker som kontaktinformasjon, personvern og tilgjengelighet. Footeren (sammen med header) bidrar til Ä synliggjÞre Oslo kommune som avsender.

Test komponenten

Relaterte komponenter

Varianter

VariantBruk
NormalStandard footer med tre kolonner, passer for alle lĂžsninger som er tett koblet til oslo.kommune.no eller har behov for flere lenker
Simple (enkel)Enkel footer med fĂŠrre lenker, passer til mindre, selvstendige lĂžsninger med begrenset behov for navigasjon

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 footer. Husk likevel at krav til tilgjengelighet gjelder flere lÞsninger, og det kan derfor vÊre lurt Ä ha footer uansett.

Bruk et ikon som matcher alvorlighetsgraden og budskapetFooteren skal alltid plasseres nederst pÄ siden. Den brukes i alle tjenester der Oslo kommune er avsender.

Footeren bygger pÄ oslo.kommune.no sin standard, men du kan tilpasse tekst og lenker etter behov.

Husk:

  • Footeren mĂ„ alltid inneholde lenker til personvern og tilgjengelighet.
  • Andre 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.
  • Fjern sprĂ„klenker hvis det kun finnes Ă©n sprĂ„kversjon.
  • Lenker til sosiale medier bĂžr kun brukes hvis de er relevante for lĂžsningen.

NÄr skal du bruke den vanlige footeren og nÄr skal man bruke den enkle varianten?

Du bĂžr bruke den standard varianten (normal) hvis lĂžsningen din er en del av oslo.kommune.no, eller hvis du har behov for Ă„ vise flere lenker. Den enkle varianten (simple) passer kun for lĂžsninger som er mer selvstendige, og som ikke trenger like mye navigasjon.

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

ElementBeskrivelse
1. BakgrunnHovedomrÄde med $brand-blue bakgrunn og hvit tekst
2. Kolonnetittel 1Tittel for fĂžrste kolonne (valgfritt)
3. Tekst (valgfritt)Beskrivende tekst eller forklaring i kolonnen (valgfritt)
4. Lenker, kolonne 1Klikkbare lenker i fĂžrste kolonne
5. Kolonnetittel 2Tittel for andre kolonne (valgfritt)
6. Lenker, kolonne 2Klikkbare lenker i andre kolonne
7. Kolonnetittel 3Tittel for tredje kolonne (valgfritt, men anbefalt)
8. Lenker, kolonne 3Klikkbare lenker i tredje kolonne
9. SprÄklenkeLenke til annen sprÄklig versjon av nettstedet (valgfritt)
10. Sosiale medier-lenkerLenker til Oslo kommunes kontoer (valgfritt)
ElementBeskrivelse
1. BakgrunnHovedomrÄde med $brand-blue bakgrunn og hvit tekst
2. LenkerInntil fem lenker til relevante sider

Implementasjon i kode

Hvordan ta komponenten i bruk?

Hvordan ta komponenten i bruk?

Innstillinger for informasjonskapsler / Consent

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 Content-komponentens attributter.

Props og tokens

PropTypeBeskrivelse
personvernOgInfoLinkstringLink to personvern og info page
tilgjengelighetLinkstringLink to tilgjengelighet page
openLinksInNewTabbooleanWhether to open links in new tab
includeConsentbooleanWhether to include Consent component in the footer
googleAnalyticsIdstringGoogle Analytics ID for tracking when using Consent component
hotjarIdstringHotjar ID for tracking when using Consent component
columnOneobjectContent for the first column of the footer
columnTwoobjectContent for the second column of the footer
socialLinksarrayArray of social links for the footer
PropTypeBeskrivelse
personvernOgInfoLinkstringLink to personvern og info page
tilgjengelighetLinkstringLink to tilgjengelighet page
includeConsentbooleanWhether to include Consent component in the footer
googleAnalyticsIdstringGoogle Analytics ID for tracking when using Consent component
hotjarIdstringHotjar ID for tracking when using Consent component
linksarrayArray of links for the footer