Gå til sidens indhold

Komponenter

Cards

Retningslinjer

Tilgængelighed

Cards skal overholde html outline, så browser og eventuelle skærmlæsere kan afkode det korrekt. Dvs. overskriften på dit cards skal være en heading 4, hvis det foregående afsnit er en heading 3.

Brugervenlighed

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.

Alle cards har en card class.

Sæt card til fuld højde ved at tilføje klassen card-align-height.

Cards kan bestå af en header, et tekstområde, et indholdsområde og et aktionsområde. Du kan frit sammensætte rækkefølge og størrelser af alle områder efter dit eget behov, men der er regler for, hvad du kan placere i de forskellige områder.

Hvert område er beskrevet nedenfor.

Header

Headeren har en .card-header class, og indeholder en titel og en understøttende tekst, som alle er p-tags med hver deres class.

  • .header-titel
  • .subheader

Tekstområde

Tekstområdet har en .card-text class, og indeholder brødtekst, som har en class.

  • .text

Indholdsområde

Indholdsområdet har en card-content class, og kan indeholde brødtekst og andet, såsom displaytekst og grafer, der har hver deres div med hver deres class. .card-content har en stribet baggrundsfarve. Denne baggrundsfarve er midlertidig og bliver kun vist for at indikere indholdsområdet. Du kan se, hvilke andre baggrundsfarver der kan bruges, under "Baggrundsfarver" og "Hjælpefunktioner" i sidenavigationen. Det er også muligt at tilføje andre farver.

  • .content-text
  • .content

Aktionsområde

Aktionsområdet har en card-action class og kan indeholde brødtekst, knapper, links og funktionelle link, som alle har hver deres div med hver deres class.

  • .action-content
  • .action-buttons
  • .action-links

Card med fuld bredde

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card ">

                <div class="card-header">
                    <p class="h5 header-title" title="Card header"
                        aria-label="Card header">Header</p>
                    <p class="sub-header">Understøttende tekst</p>
                </div>

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

                <div class="card-content">
                    <div class="content-text">
                        <p></p>
                    </div>
                    <div class="content">
                        <div class="row justify-content-center">
                            <div class="col-12">
                                <img src="/img/cards/Card_med_fuld_bredde_2_EKSEMPEL.svg" alt="" class="w-percent-100">
              </div>
                            </div>
                        </div>
                    </div>

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

                        </div>
                        <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>

Card med halv bredde

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
            <div class="card ">

                <div class="card-header">
                    <p class="h5 header-title" title="Card header"
                        aria-label="Card header">Header</p>
                    <p class="sub-header">Understøttende tekst</p>
                </div>

                <div class="card-content">
                    <div class="content-text">
                        <p></p>
                    </div>
                    <div class="content">
                        <div class="row justify-content-center">
                            <div class="col-12">
                                <img src="/img/cards/Card_med_halv_bredde_1_EKSEMPEL.svg" alt="" class="w-percent-100">
              </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-text">
                        <p class="text">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">
                        <div class="content-text">
                            <p></p>
                        </div>
                        <div class="content">
                            <div class="row justify-content-center">
                                <div class="col-12">
                                    <img src="/img/cards/Card_med_halv_bredde_2_EKSEMPEL.svg" alt="" class="w-percent-100">
              </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-header">
                            <p class="h5 header-title" title="Card header"
                                aria-label="Card header">Header</p>
                            <p class="sub-header">Understøttende tekst</p>
                        </div>

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

                            </div>
                            <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>

Card med tredjedel bredde

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="card ">

                <div class="card-header">
                    <p class="h5 header-title" title="Card header"
                        aria-label="Card header">Header</p>
                    <p class="sub-header">Understøttende tekst</p>
                </div>

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

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

                    </div>
                    <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">
                    <p class="h5 header-title" title="Card header"
                        aria-label="Card header">Header</p>
                    <p class="sub-header">Understøttende tekst</p>
                </div>

                <div class="card-content">
                    <div class="content-text">
                        <p></p>
                    </div>
                    <div class="content">
                        <div class="row justify-content-center">
                            <div class="col-12">
                                <img src="/img/cards/Card_Tredjedel_2_EKSEMPEL.svg" class="d-block w-percent-100" alt="" />
              </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">
                        <p class="h5 header-title" title="Card header"
                            aria-label="Card header">Header</p>
                        <p class="sub-header">Understøttende tekst</p>
                    </div>

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

                </div>

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

Cards med samme højde

<div class="container">
    <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-header">
                    <p class="h5 header-title" title="Card header"
                        aria-label="Card header">Header</p>
                    <p class="sub-header">Understøttende tekst</p>
                </div>

                <div class="card-text">
                    <p class="text">Dette er et <em>tekstområde</em>, hvor
                        du kan skrive hvad du har lyst til.</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">
                                <img src="/img/cards/Card_Tredjedel_2_EKSEMPEL.svg" class="d-block w-percent-100" alt="" />
                  </div>
                            </div>
                        </div>

                    </div>

                    <div class="card-header">
                        <p class="h5 header-title" title="Card header"
                            aria-label="Card header">Header</p>
                        <p class="sub-header">Understøttende tekst</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-header">
                        <p class="h5 header-title" title="Card header"
                            aria-label="Card header">Header</p>
                        <p class="sub-header">Understøttende tekst</p>
                    </div>

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