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
<footer>
<div class="footer">
<div class="container">
<ul class="align-text-left unstyled-list inline-list">
<li class=""><span
class="h5 weight-semibold">Digitaliseringsstyrelsen</span>
</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
<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
<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 ">
<h1 class="h5 mb-4">Webtilgængelighed og
cookies</h1>
<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
<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="">
<h1 class="h5 d-inline-block">Digitaliseringsstyrelsen
</h1>
</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
<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>