Vælg et tema Luk
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Borger.dk tema
Virk tema
Kode
Cards
Eksempel på card komponent
Du kan bruge cards til at gruppere funktionalitet, der adskiller sig fra sidens
øvrige indhold. Cards kan placeres i et grid , således at
de står side om side.
Eksempler og retningslinjer
Installation
HTML Struktur
Kodeeksempel
Kopiér kode
<div class="card">
<div class="card-header">
<h2 class="header-title">Eksempel på card-komponenten</h2>
</div>
<div class="card-text">
<p>Du kan bruge cards til at gruppere funktionalitet, der adskiller sig fra sidens
øvrige indhold. Cards kan placeres i et <a href="/kode/grid/">grid</a>, således at
de står side om side.</p>
</div>
</div>
Cards kan bestå af en header, et tekstområde, et indholdsområde og et aktionsområde, som i øvrigt kan ligge i en footer. Du kan frit sammensætte cards efter dit eget behov, men der er regler for, hvad du kan placere i de forskellige områder.
Sæt card til fuld højde ved at tilføje klassen card-align-height
til elementet med klassen card
.
Områder
Header
Headeren defineres med klassen card-header
, og indeholder en titel og en understøttende tekst.
Husk, at cards er en del af sidestrukturen, hvorfor overskrifter fortsat skal være semantisk korrekt. Hvis overskriften før cards er en h2, så bør header-title
være h3.
header-titel
defineres som en semantisk korrekt overskrift.
subheader
Tekstområde
Tekstområdet defineres med klassen card-text
, og indeholder brødtekst, som er defineret som et <p>
element.
Indholdsområde
Indholdsområdet er defineret med klassen card-content
, og kan indeholde både brødtekst og illustrationer, som har hver deres <div>
med hver deres class.
content-text
indeholder brødtekst.
content
kan indeholde lige det du ønsker - fx illustrationer som billeder eller SVG.
Aktionsområde
Aktionsområdet er defineret med klassen card-action
og kan indeholde knapper og links som har hver deres <div>
med hver deres klasse.
action-buttons
kan indeholde knapper, og vil vise knapperne sidestillet.
action-links
kan indeholde en liste af links.
Footer
Footer bruges gerne i forbindelse med flere cards, som skal have samme højde, og hvor man har knapper eller links, der gerne skal flugte på tværs af cards.
Footer defineres med klassen card-footer
.
Varianter
Samme højde
Kodeeksempel
Kopiér kode
<div class="container pb-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4 mt-6 mt-md-0">
<div class="card card-align-height">
<div class="card-content">
<!-- Alt i denne div er blot et eksempel. Visse klasser er ikke en del af FDS. -->
<div class='align-text-center background-data-green-blue-300 p-6'>
<h3 class='h5 mb-5'>Lorem ipsum fordeling</h3>
<div class='mt-3 row'>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='Billedeksempel, der viser at fordelingen i København er 80%' class='w-percent-30 w-percent-md-70' viewBox='0 0 50 100'><rect width='50' height='100' fill='#eefafa'/><rect y='20' width='50' height='80' fill='#0868AC'/></svg><span
class='small-text mt-2 bold d-block'>København</span>
</div>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='Billedeksempel, der viser at fordelingen i hele landet er 36%' class='w-percent-30 w-percent-md-70' viewBox='0 0 50 100'><rect width='50' height='100' fill='#eefafa'/><rect y='64' width='50' height='36' fill='#0868AC'/></svg><span
class='small-text mt-2 bold d-block'>Hele landet</span>
</div>
</div>
</div>
</div>
<div class="card-header">
<h4 class="header-title">Header</h4>
</div>
<div class="card-text">
<p>In sollicitudin, nulla sit amet facilisis euismod, ex ex hendrerit
eros, et egestas purus lectus vitae tortor.</p>
</div>
<div class="card-footer card-action">
<div class="action-buttons">
<button class="button button-secondary">Sekundærknap</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 mt-6 mt-md-0">
<div class="card card-align-height">
<div class="card-content">
<!-- Alt i denne div er blot et eksempel. Visse klasser er ikke en del af FDS. -->
<div class='align-text-center background-data-green-blue-300 p-6'>
<h3 class='h5 mb-5'>Lorem ipsum fordeling</h3>
<div class='mt-3 row'>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='Billedeksempel, der viser at fordelingen i København er 80%' class='w-percent-30 w-percent-md-70' viewBox='0 0 50 100'><rect width='50' height='100' fill='#eefafa'/><rect y='20' width='50' height='80' fill='#0868AC'/></svg><span
class='small-text mt-2 bold d-block'>København</span>
</div>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='Billedeksempel, der viser at fordelingen i hele landet er 36%' class='w-percent-30 w-percent-md-70' viewBox='0 0 50 100'><rect width='50' height='100' fill='#eefafa'/><rect y='64' width='50' height='36' fill='#0868AC'/></svg><span
class='small-text mt-2 bold d-block'>Hele landet</span>
</div>
</div>
</div>
</div>
<div class="card-header">
<h4 class="header-title">Header</h4>
</div>
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="card-footer card-action">
<div class="action-buttons">
<button class="button button-secondary">Sekundærknap</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 mt-6 mt-md-0">
<div class="card card-align-height">
<div class="card-content">
<!-- Alt i denne div er blot et eksempel. Visse klasser er ikke en del af FDS. -->
<div class='align-text-center background-data-green-blue-300 p-6'>
<h3 class='h5 mb-5'>Lorem ipsum fordeling</h3>
<div class='mt-3 row'>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='Billedeksempel, der viser at fordelingen i København er 80%' class='w-percent-30 w-percent-md-70' viewBox='0 0 50 100'><rect width='50' height='100' fill='#eefafa'/><rect y='20' width='50' height='80' fill='#0868AC'/></svg><span
class='small-text mt-2 bold d-block'>København</span>
</div>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='Billedeksempel, der viser at fordelingen i hele landet er 36%' class='w-percent-30 w-percent-md-70' viewBox='0 0 50 100'><rect width='50' height='100' fill='#eefafa'/><rect y='64' width='50' height='36' fill='#0868AC'/></svg><span
class='small-text mt-2 bold d-block'>Hele landet</span>
</div>
</div>
</div>
</div>
<div class="card-header">
<h4 class="header-title">Header</h4>
</div>
<div class="card-text">
<p>Sed tincidunt, risus vitae rutrum accumsan, urna leo fermentum dui, ac
suscipit ante nulla sit amet magna.</p>
</div>
<div class="card-footer card-action">
<div class="action-buttons">
<button class="button button-secondary">Sekundærknap</button>
</div>
</div>
</div>
</div>
</div>
</div>