Gå til sidens indhold

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

Cards

Eksempel på card komponent

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

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.

Varianter

Samme højde

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>