Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Komponenter
Footer
Footeren markerer enden på siden og indeholder informationer, som guider brugeren videre.
Sådan bruges komponenten
Vejledning
Footeren fungerer som sidens afslutning og indeholder altid ansvarlig myndighed, herunder support- og kontaktinformationer, samt tilgængelighedserklæring og cookieoplysninger. Footeren kan også anvendes til at sende brugere videre ved at linke ud af selvbetjeningsløsningen.
Footers do's and don'ts
Sådan (do)
Sådan: Brug footers til indhold, som brugerne forventer at finde dér. Det er fx kontaktoplysninger, webstedets privatlivspolitik og links til sociale medier (Fessenden, 2019). Footeren kan også med fordel anvendes til et mini-sitemap (Esser, 2018).
Ikke sådan (don't)
Ikke sådan: Brug ikke footers til indhold, som brugerne ikke vil lede efter dér. Brugerne vil fx nok ikke opdage nyheder eller hjælpetekster, hvis de er placeret helt i bunden af en webside.
Varianter
Tre kolonner
Fire kolonner
Kompleks
Logo
Se komponenten i eksempelløsninger
Se hvordan komponenten bruges i de forskellige eksempler på selvbetjeningsløsninger.
Referencer
Installation
HTML Struktur
Kodeeksempel
<footer>
<div class="footer">
<div class="container">
<ul class="align-text-left unstyled-list inline-list">
<li class=""><strong class="weight-semibold">Digitaliseringsstyrelsen</strong>
</li>
<li class=""><a href="mailto:support@myndighed.dk" class="function-link"
title="Skriv til Digitaliseringsstyrelsen">support@myndighed.dk</a>
</li>
<li class=""><a href="tel:+4512345678" class="function-link"
title="Ring til Digitaliseringsstyrelsen">(+45) 12 34 56 78</a></li>
<li class="d-print-none"><a href="#"
class="function-link icon-link">Tilgængelighedserklæring<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#open-in-new"></use></svg></a>
</li>
<li class="d-print-none"><a href="#" class="function-link">Privatlivspolitik
(cookies)</a></li>
</ul>
</div>
</div>
</footer>Ovenstående indsættes i bunden af siden, under <main>.
Opsætning
Én række
Man kan indsætte en vandret liste, der er defineret med klasserne unstyled-list inline-list.
Kolonner
Man kan indsætte et grid med 4 kolonner. Man behøver ikke indsætte indhold i alle kolonner.
Se eksempler på forskellige sammensætninger.
Links
Links i footer defineres med klassen function-link på <a>.
Hvis man ved tryk på et link i footeren forlader selvbetjeningsløsningen bør dette indikeres ved brug af et eksternt link.
Yderligere bør brugeren oplyses om, at de nu forlader løsningen, og at eventuelt indtastet data kan blive tabt. Evt. ved brug af en almindelig JavaScript alert.
Tre kolonner
Kodeeksempel
<footer>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-3 footer-col ">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Ansvarlig myndighed</h2>
<ul class=" unstyled-list">
<li class="">
<p>Digitaliseringsstyrelsen<br>Landgreven 4<br>1413 København K
</p>
</li>
</ul>
</div>
</section>
</div>
<div class="col-12 col-sm-12 col-md-3 footer-col ">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Webtilgængelighed og cookies</h2>
<ul class=" mt-0 nobullet-list mb-0">
<li class=""><a href="#"
class="function-link">Privatlivspolitik og cookies</a>
</li>
<li class=""><a href="#"
class="function-link icon-link">Tilgængelighedserklæring<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#open-in-new"></use></svg></a>
</li>
</ul>
</div>
</section>
</div>
<div class="col-12 col-sm-12 col-md-6 footer-col d-print-none">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Links</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse mattis, felis quis vestibulum aliquet, elit ex
rhoncus.</p>
<ul class=" mt-0 nobullet-list mb-0">
<li class=""><a href="#" class="function-link">Læs lidt om
dit</a></li>
<li class=""><a href="#" class="function-link">Her er også
lidt om dat</a></li>
</ul>
</div>
</section>
</div>
</div>
</div>
</div>
</footer>Fire kolonner
Kodeeksempel
<footer>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-3 footer-col ">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Ansvarlig myndighed</h2>
<ul class=" unstyled-list">
<li class="">
<p>Digitaliseringsstyrelsen</p>
</li>
<li class="">
<p>Landgreven 4</p>
</li>
<li class="">
<p>1413 København K</p>
</li>
</ul>
</div>
</section>
</div>
<div class="col-12 col-sm-12 col-md-3 footer-col ">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Kontakt</h2>
<ul class=" mt-0 nobullet-list">
<li class=""><a class="function-link"
href="mailto:support@myndighed.dk">support@myndighed.dk</a>
</li>
<li class=""><a class="function-link"
href="tel:004512345678">(+45) 12 34 56 78</a></li>
</ul>
</div>
</section>
</div>
<div class="col-12 col-sm-12 col-md-3 footer-col d-print-none">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Links</h2>
<ul class=" mt-0 nobullet-list">
<li class=""><a class="function-link" href="#">Læs lidt om
dit</a></li>
<li class=""><a class="function-link" href="#">Her er også
lidt om dat</a></li>
<li class=""><a class="function-link" href="#">Eller måske er
du interesseret i noget helt andet, som tager mange
linjer at forklare</a></li>
</ul>
</div>
</section>
</div>
<div class="col-12 col-sm-12 col-md-3 footer-col d-print-none">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Webtilgængelighed og cookies</h2>
<ul class=" mt-0 nobullet-list">
<li class=""><a href="#"
class="function-link icon-link">Tilgængelighedserklæring<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#open-in-new"></use></svg></a>
</li>
<li class=""><a class="function-link"
href="#">Privatlivspolitik (cookies)</a></li>
</ul>
</div>
</section>
</div>
</div>
</div>
</div>
</footer>Kompleks
Kodeeksempel
<footer>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-3 footer-col d-print-none">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Links</h2>
<ul class=" mt-0 mb-0 nobullet-list">
<li class=""><a class="function-link" href="#">Læs lidt om
dit</a></li>
<li class=""><a class="function-link" href="#">Her er også
lidt om dat</a></li>
<li class=""><a class="function-link" href="#">Eller måske er
du interesseret i noget helt andet, som tager mange
linjer at forklare</a></li>
</ul>
</div>
</section>
</div>
<div class="col-12 col-sm-12 col-md-3 footer-col d-print-none">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Links</h2>
<ul class=" mt-0 mb-0 nobullet-list">
<li class=""><a class="function-link" href="#">Læs lidt om
dit</a></li>
<li class=""><a class="function-link" href="#">Her er også
lidt om dat</a></li>
<li class=""><a class="function-link" href="#">Eller måske er
du interesseret i noget helt andet, som tager mange
linjer at forklare</a></li>
</ul>
</div>
</section>
</div>
<div class="col-12 col-sm-12 col-md-3 footer-col d-print-none">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Links</h2>
<ul class=" mt-0 mb-0 nobullet-list">
<li class=""><a class="function-link" href="#">Læs lidt om
dit</a></li>
<li class=""><a class="function-link" href="#">Her er også
lidt om dat</a></li>
<li class=""><a class="function-link" href="#">Eller måske er
du interesseret i noget helt andet, som tager mange
linjer at forklare</a></li>
</ul>
</div>
</section>
</div>
<div class="col-12 col-sm-12 col-md-3 footer-col d-print-none">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Links</h2>
<ul class=" mt-0 mb-0 nobullet-list">
<li class=""><a class="function-link" href="#">Læs lidt om
dit</a></li>
<li class=""><a class="function-link" href="#">Her er også
lidt om dat</a></li>
<li class=""><a class="function-link" href="#">Eller måske er
du interesseret i noget helt andet, som tager mange
linjer at forklare</a></li>
</ul>
</div>
</section>
</div>
</div>
<ul class="mt-4 align-text-left unstyled-list inline-list">
<li class=""><strong class="weight-semibold">Digitaliseringsstyrelsen</strong>
</li>
<li class=""><a href="mailto:support@myndighed.dk" class="function-link"
title="Skriv til Digitaliseringsstyrelsen">support@myndighed.dk</a>
</li>
<li class=""><a href="tel:+4512345678" class="function-link"
title="Ring til Digitaliseringsstyrelsen">(+45) 12 34 56 78</a></li>
<li class="d-print-none"><a href="#"
class="function-link icon-link">Tilgængelighedserklæring<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#open-in-new"></use></svg></a>
</li>
<li class="d-print-none"><a href="#" class="function-link">Privatlivspolitik
(cookies)</a></li>
</ul>
</div>
</div>
</footer>Logo
Kodeeksempel
<footer>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-3 footer-col ">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Ansvarlig myndighed</h2>
<ul class=" unstyled-list">
<li class=""><img src="/assets/img/logo-placeholder.png" class="logo" alt="Logostyrelsen" />
</li>
</ul>
</div>
</section>
</div>
<div class="col-12 col-sm-12 col-md-3 footer-col ">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Kontakt</h2>
<ul class=" mt-0 nobullet-list">
<li class=""><a class="function-link"
href="mailto:support@myndighed.dk">support@myndighed.dk</a>
</li>
<li class=""><a class="function-link"
href="tel:004512345678">(+45) 12 34 56 78</a></li>
</ul>
</div>
</section>
</div>
<div class="col-12 col-sm-12 col-md-3 footer-col d-print-none">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Links</h2>
<ul class=" mt-0 nobullet-list">
<li class=""><a class="function-link" href="#">Læs lidt om
dit</a></li>
<li class=""><a class="function-link" href="#">Her er også
lidt om dat</a></li>
<li class=""><a class="function-link icon-link" href="#">Eller
måske er du interesseret i noget helt andet, som tager
mange linjer at
forklare<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#open-in-new"></use></svg></a>
</li>
</ul>
</div>
</section>
</div>
<div class="col-12 col-sm-12 col-md-3 footer-col d-print-none">
<section>
<div class=" align-text-left ">
<h2 class="h5 mb-4">Webtilgængelighed og cookies</h2>
<ul class=" mt-0 nobullet-list">
<li class=""><a href="#"
class="function-link icon-link">Tilgængelighedserklæring<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#open-in-new"></use></svg></a>
</li>
<li class=""><a class="function-link"
href="#">Privatlivspolitik (cookies)</a></li>
</ul>
</div>
</section>
</div>
</div>
</div>
</div>
</footer>