Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Footer
Eksempler og retningslinjer
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.
Varianter
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>