Vælg et tema
LukVælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Cards
Eksempel på card-komponenten
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
<div class="card">
<div class="card-header">
<h3 class="header-title">Eksempel på card-komponenten</h3>
</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="/design/grid/">grid</a>, således at de står side om
side.</p>
</div>
<div class="card-footer card-action">
<div class="action-links">
<a href="/komponenter/cards/">Gå til komponent</a>
</div>
</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
<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">
<div class="content">
<div class="row justify-content-center">
<div class="col-12">
<!-- Alt i denne div er blot et eksempel. Visse klasser er ikke en del af FDS. -->
<div class='bg-turquoise p-6'>
<h2 class='h5 mb-5'>Lorem ipsum
fordeling</h2>
<div class='mt-3 row'>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='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='#56d4d6'/></svg>
<p class='small-text mt-2'>
<strong>København</strong>
</p>
</div>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='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='#56d4d6'/></svg>
<p class='small-text mt-2'>
<strong>Hele landet</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-header">
<h2 class="h5 header-title">Header</h2>
</div>
<div class="card-text">
<p class="text">In sollicitudin, nulla sit amet
facilisis euismod, ex ex hendrerit eros, et egestas
purus lectus vitae tortor.</p>
</div>
<div class="card-footer">
<div class="card-action">
<div class="action-buttons">
<button
class="button button-secondary">Sekundærknap</button>
</div>
</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">
<div class="content">
<div class="row justify-content-center">
<div class="col-12">
<!-- Alt i denne div er blot et eksempel. Visse klasser er ikke en del af FDS. -->
<div class='bg-turquoise p-6'>
<h2 class='h5 mb-5'>Lorem ipsum
fordeling</h2>
<div class='mt-3 row'>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='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='#56d4d6'/></svg>
<p class='small-text mt-2'>
<strong>København</strong>
</p>
</div>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='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='#56d4d6'/></svg>
<p class='small-text mt-2'>
<strong>Hele landet</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-header">
<h2 class="h5 header-title">Header</h2>
</div>
<div class="card-text">
<p class="text">Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
</div>
<div class="card-footer">
<div class="card-action">
<div class="action-buttons">
<button
class="button button-secondary">Sekundærknap</button>
</div>
</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">
<div class="content">
<div class="row justify-content-center">
<div class="col-12">
<!-- Alt i denne div er blot et eksempel. Visse klasser er ikke en del af FDS. -->
<div class='bg-turquoise p-6'>
<h2 class='h5 mb-5'>Lorem ipsum
fordeling</h2>
<div class='mt-3 row'>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='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='#56d4d6'/></svg>
<p class='small-text mt-2'>
<strong>København</strong>
</p>
</div>
<div class='col-6'>
<svg xmlns='http://www.w3.org/2000/svg' aria-label='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='#56d4d6'/></svg>
<p class='small-text mt-2'>
<strong>Hele landet</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-header">
<h2 class="h5 header-title">Header</h2>
</div>
<div class="card-text">
<p class="text">Sed tincidunt, risus vitae rutrum
accumsan, urna leo fermentum dui, ac suscipit ante
nulla sit amet magna.</p>
</div>
<div class="card-footer">
<div class="card-action">
<div class="action-buttons">
<button
class="button button-secondary">Sekundærknap</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>