Gå til sidens indhold
Det Fælles Designsystem

Kode

Cards

Åbn dette eksempel i et nyt vindue

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.

Gå til komponent

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

Vis dette eksempel i et nyt vindue 
<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>