Gå til sidens indhold
Det Fælles Designsystem

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

Cards

Cards anvendes som en visuel afgrænsning af indhold eller interaktionselementer, der omhandler samme emne.

Åbn dette eksempel i et nyt vindue: cards-full-width
Eksempel på card

Header

Understøttende tekst

Dette er et tekstområde, hvor du kan skrive hvad du har lyst til.

Aliquam aliquet niboh faucibus varius

Aenean euismod vestibulum lacinia. Pellentesque nec nisi diam. Pellentesque nec urna vel ante ultrices facilisis sed in dolor. Curabitur eu leo semper, gravida justo at, euismod ex.

Billedeksempel med graf, der viser udviklingen fra 2015 til 2019

Sådan bruges komponenten

Anvendes til

Du kan bruge cards til at gruppere funktionalitet, der adskiller sig fra sidens øvrige indhold. Det kan fx være en afledt, men ikke direkte koblet ekstra funktion ift. sidens sammenhæng.

Anvendes ikke til

Brug ikke cards til det primære indhold på en løsning, men derimod til indhold, der kan stå og forstås alene og fortsat være del af den samlede løsning.

Brug ikke cards udelukkende af visuelle hensyn, som placeholders for ornamental grafik eller indhold uden interaktion.

Cards er ikke en statusbesked.

Vejledning

Cards skal tilbyde en enkel og fokuseret funktion.

Cards er velegnede til interaktion med brugeren, men brug dem kun, når der tilbydes en ekstra funktionalitet af grupperet indhold.

Cards er velegnede til responsive løsninger.

Du kan godt indsætte flere cards på en side, men sørg for at de fremtræder roligt i sidens layout og ikke bryder brugerens naturlige aflæsning af siden.

Undgå lange tekster i cards.

Skriv kort og præcist i hvert card.

Cards do's and don'ts

Sådan (do)

Eksempel på, hvordan cards kan se ud

Sådan: Brug cards (kort) til at gruppere elementer, der adskiller sig fra sidens øvrige indhold. Et card er en gruppering og indramning af nogle få, korte og relaterede oplysninger. Det har ofte form og størrelse som et spillekort (Laubheimer, 2016).

Ikke sådan (don't)

Eksempel på, hvordan cards ikke bør se ud

Ikke sådan: Brug ikke cards til at gruppere forskellige dele af en formular. Cards hjælper med at fokusere brugernes opmærksomhed på én gruppe af informationer (såkaldte subregioner), men betyder også, at det er lettere at ignorere eller overse sidens øvrige indhold (Kitajima et al., 2000).

Varianter

Card med tredjedel bredde

Åbn dette eksempel i et nyt vindue: cards-third-width
Eksempel på cards i tre kolonner

Header

Understøttende tekst

Dette er et tekstområde, hvor du kan skrive hvad du har lyst til.

Header

Understøttende tekst

Lorem ipsum fordeling

København
Hele landet

Header

Understøttende tekst

Dette er et tekstområde, hvor du kan skrive hvad du har lyst til.

Card med halv bredde

Åbn dette eksempel i et nyt vindue: cards-half-width
Eksempel på cards i to kolonner

Header

Understøttende tekst

2018

Billedeksempel, der viser at fordelingen var 22% i 2018

Lorem ipsum dolor sit amet

2019

Billedeksempel, der viser at fordelingen var 41% i 2019

Etiam aliquet at felis vel

Dette er et tekstområde, hvor du kan skrive hvad du har lyst til.

3 ofte stillede spørgsmål

  • In viverra faucibus lorem?
  • Phasellus posuere neque?
  • Nullam quis nunc dui?

Header

Understøttende tekst

Cards med samme højde

Åbn dette eksempel i et nyt vindue: cards-same-height
Eksempel på cards med samme højde

Lorem ipsum fordeling

København
Hele landet

Header

In sollicitudin, nulla sit amet facilisis euismod, ex ex hendrerit eros, et egestas purus lectus vitae tortor.

Lorem ipsum fordeling

København
Hele landet

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum fordeling

København
Hele landet

Header

Sed tincidunt, risus vitae rutrum accumsan, urna leo fermentum dui, ac suscipit ante nulla sit amet magna.

Se komponenten i eksempelløsninger

Referencer

Installation

HTML Struktur

Kodeeksempel
<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.

Card med tredjedel bredde

Vis dette eksempel i et nyt vindue: cards-third-width
Kodeeksempel
<div class="container pb-5">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4">

            <div class="card">
                <div class="card-header">
                    <h3 class="header-title">Header</h3>
                    <p class="sub-header">Understøttende tekst</p>
                </div>

                <div class="card-text">
                    <p>Dette er et <em>tekstområde</em>, hvor du kan skrive hvad du har lyst
                        til.</p>
                </div>

                <div class="card-footer card-action">

                    <div class="action-buttons">
                        <button class="button button-secondary">Sekundærknap</button><button
                            class="button button-tertiary">Tertiærknap</button>
                    </div>
                    <div class="action-links">
                        <ul class="nobullet-list">
                            <li><a href="javascript:void(0);" class="default link state">Et
                                    link til et sted i løsningen</a></li>
                            <li><a href="javascript:void(0);" class="icon-link">Et link til et
                                    sted uden for
                                    løsningen<svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#open-in-new"></use></svg></a>
                            </li>
                        </ul>
                    </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">
                <div class="card-header">
                    <h3 class="header-title">Header</h3>
                    <p class="sub-header">Understøttende tekst</p>
                </div>

                <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'>
                        <h4 class='h5 mb-5'>Lorem ipsum fordeling</h4>
                        <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>

        </div>
        <div class="col-12 col-sm-12 col-md-4 col-lg-4 mt-6 mt-md-0">

            <div class="card">
                <div class="card-header">
                    <h3 class="header-title">Header</h3>
                    <p class="sub-header">Understøttende tekst</p>
                </div>

                <div class="card-text">
                    <p>Dette er et <em>tekstområde</em>, hvor du kan skrive hvad du har lyst
                        til.</p>
                </div>

            </div>

        </div>
    </div>
</div>

Card med halv bredde

Vis dette eksempel i et nyt vindue: cards-half-width
Kodeeksempel
<div class="container pb-5">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg-6">

            <div class="card">
                <div class="card-header">
                    <h3 class="header-title">Header</h3>
                    <p class="sub-header">Understøttende tekst</p>
                </div>
                <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 row background-data-pink-violet-300 p-6">
                        <div class="col-12 col-sm-6 mb-6 mb-sm-0">
                            <h4 class="h5">2018</h4><img src="/assets/img/cards/card-illustration-22procent.svg" alt="Billedeksempel, der viser at fordelingen var 22% i 2018" class="w-percent-60 w-percent-sm-40 w-percent-md-60" />
                            <p class="mt-0">Lorem ipsum dolor sit amet</p>
                        </div>
                        <div class="col-12 col-sm-6">
                            <h4 class="h5">2019</h4><img src="/assets/img/cards/card-illustration-41procent.svg" alt="Billedeksempel, der viser at fordelingen var 41% i 2019" class="w-percent-60 w-percent-sm-40 w-percent-md-60" />
                            <p class="mt-0">Etiam aliquet at felis vel</p>
                        </div>
                    </div>
                </div>

                <div class="card-text">
                    <p>Dette er et <em>tekstområde</em>, hvor du kan skrive hvad du har lyst
                        til.</p>
                </div>

            </div>

        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 mt-6 mt-md-0">

            <div class="card">

                <div class="card-content">
                    <!-- Alt i denne div er blot et eksempel. Visse klasser er ikke en del af FDS. -->
                    <div class="row background-data-violet-300 p-6">
                        <div class="col-12 align-text-left">
                            <h3 class="h3 mb-0">3 ofte stillede spørgsmål</h3>
                            <ul class="mt-0 noindent-list">
                                <li>In viverra faucibus lorem?</li>
                                <li>Phasellus posuere neque?</li>
                                <li>Nullam quis nunc dui?</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-header">
                    <h4 class="header-title">Header</h4>
                    <p class="sub-header">Understøttende tekst</p>
                </div>

                <div class="card-footer card-action">

                    <div class="action-buttons">
                        <button class="button button-secondary">Sekundærknap</button><button
                            class="button button-tertiary">Tertiærknap</button>
                    </div>
                    <div class="action-links">
                        <ul class="nobullet-list">
                            <li><a href="javascript:void(0);" class="default link state">Et
                                    link til et sted i løsningen</a></li>
                            <li><a href="javascript:void(0);" class="icon-link">Et link til et
                                    sted uden for
                                    løsningen<svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#open-in-new"></use></svg></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

Cards med samme højde

Vis dette eksempel i et nyt vindue: cards-same-height
Kodeeksempel
<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>