Bruk maks tre lenkegrupper, med «Om nettstedet» lengst til høyre.
Navigasjon
Footer samler informasjon og nyttige lenker knyttet til produktet på ett sted.
Bruk Footer når
- Brukerne trenger et fast sted å finne sekundær informasjon, som hjelpesider, dokumentasjon, kontaktinformasjon og vilkår.
- Produktet er et nettsted for reisende, en dokumentasjonsside eller et enklere verktøy som skal vise at det tilhører Entur.
Footer er ikke ment for tunge arbeidsverktøy som brukes gjennom store deler av arbeidsdagen, for eksempel til saksbehandling, planlegging eller drift. Der legger du heller lenker som tilgjengelighetserklæring og personvern i hjelpemenyen eller sidemenyen.
Anatomi
- Produktlogo og beskrivelse (
Footer.Brand): Entur logoen etterfulgt av produktnavnet, med en kort beskrivelse av produktet under. - Lenkegrupper (
Footer.LinkGroup): Lenker til relevant informasjon, funksjoner og ressurser knyttet til produktet, samlet under en overskrift. - Subfooter (innebygd i
Footer): Faste elementer som viser at produktet tilhører Entur. Subfooteren er lik i alle produkter og kan ikke endres.
Retningslinjer
Produktlogo og beskrivelse (Footer.Brand)
Alle produkter laget av Entur skal vise Entur logoen sammen med produktnavnet øverst til venstre i footeren. «ENTUR» skrives med store bokstaver, og produktnavn starter med stor bokstav. Ingen annen tekst skal inngå i logoen.
Under logoen ligger en kort beskrivelse av produktet på én eller to setninger. Har produktet ikke behov for en egen beskrivelse, bruk standardbeskrivelsen for Entur: «Entur gjør det enklere å reise kollektivt i hele Norge.»
Trenger produktet det, kan du legge til kontaktinformasjon som adresse og organisasjonsnummer under beskrivelsen.
Lenkegrupper (Footer.LinkGroup)
Du velger selv hvor mange lenker produktet trenger. Med færre enn tre lenkegrupper beholder kolonnene bredden sin.
De første kolonnene brukes til lenker som hjelper brukeren å navigere i produktet, for eksempel sentrale sider, funksjoner og dokumentasjon.
Lenkegruppen lengst til høyre heter «Om nettstedet» og samler lenker om selve nettstedet, som tilgjengelighetserklæring, personvern og innstillinger for informasjonskapsler. Lenker til kontakt, hjelp og bidrag legges i en egen gruppe foran den.
To footere: én med to lenkegrupper og én med tre. Med to lenkegrupper står den tredje kolonnen tom.
Antall lenkegrupper
Unngå flere enn tre lenkegrupper. Kolonnene blir smale, og lenketekstene brytes over flere linjer.
Innhold i lenkegruppene
Samle lenker av samme type i samme gruppe, slik at alt om kontakt står sammen og alt om nettstedet står sammen. Da finner brukerne det de leter etter på samme sted i alle produkter.
Footer har tre typer lenkegrupper:
- Egne grupper: Lenker til innholdet på nettstedet, som sentrale sider, tjenester, dokumentasjon og ressurser. Gi gruppene navn som gir mening for nettstedet, for eksempel «Tjenester» eller «Ressurser». Bruk én eller to slike grupper.
- Hjelp og kontakt: Lenker der brukeren får hjelp eller når et menneske, som ofte stilte spørsmål, kundesenter, e-post og tilbakemelding. Gruppen heter alltid «Hjelp og kontakt».
- Om nettstedet: Lenker om selve nettstedet, som tilgjengelighetserklæring, personvern, informasjonskapsler og vilkår. Gruppen heter alltid «Om nettstedet», er påkrevd og står alltid sist. Den skal alltid inneholde tilgjengelighetserklæringen.
Regler og unntak
Regler
- Hold lenketekstene korte og beskrivende. Unngå «Les mer» og «Klikk her».
- Vi anbefaler maks åtte lenker per gruppe.
- «Om nettstedet» slås aldri sammen med andre grupper.
- På engelske nettsteder heter gruppene «Help and contact» og «About this site».
Unntak
- Har en gruppe færre enn tre lenker, kan den slås sammen med en annen gruppe. Gi den sammenslåtte gruppen et navn som sier hva den inneholder, for eksempel «Kontakt og ressurser». Unngå vage navn som «Informasjon» eller «Diverse».
Subfooter
Subfooteren er fast og skal være med i alle footere, nøyaktig slik den er vist. Den viser at produktet tilhører Entur, og har samme tekst, lenker og plassering i alle produkter.
Subfooteren inneholder copyright og lenke til entur.no, og kan i tillegg vise ikoner for sosiale medier som lenker til Enturs offisielle kontoer. Innhold og plassering skal ikke endres, og ikonene skal ikke byttes ut med produktets egne kanaler.
Sosiale medier
Vis Enturs sosiale medier med showSocialMedia i tjenester for reisende og andre privatpersoner (B2C).
Ikke vis sosiale medier i B2B-tjenester, med mindre det finnes en god grunn.
Eksempler
Footer finnes i to varianter: kontrast og lys. Velg den varianten som passer best til produktets uttrykk. Struktur, innhold og plassering av elementer er lik i begge variantene.
Ligger Footer inne i en Contrast-wrapper, vises den alltid som kontrast, uavhengig av contrast-prop-en.
Lys og kontrast
Design og layout
Posisjon og padding
Footer plasseres alltid nederst på siden, og bakgrunnen strekker seg over hele bredden av visningsområdet. Innholdet bør følge bredden og sidepaddingen til topbaren, ikke innholdsområdet på siden, slik at topbar og footer flukter med hverandre. Har topbaren sentrert innhold, bør footeren også ha det.
La innholdet i footeren følge bredden og sidepaddingen til topbaren, slik at kantene flukter.
Ikke la footeren følge paddingen til innholdsområdet.
Plassering med sidemeny
Legg Footer etter <main>, i full bredde under både sidemenyen og innholdet.
Ikke legg Footer inne i innholdsområdet ved siden av sidemenyen.
Responsivitet
Layouten følger bredden footeren har, ikke vinduet: én kolonne under 800 px, to kolonner fra 800 px og én rad fra 1200 px. Lenkegruppene ligger i samme rekkefølge som i koden.
Samme footer på desktop, nettbrett og mobil. Eksemplene er 1200, 800 og 375 px brede.
Spacing
Følgende spacing definerer standardoppsettet for footer. Elementer som ikke brukes i produktet fjernes, uten å endre øvrige avstander.
