Cards

Sådan bruges komponenten

Anvendes til

Brug cards til at gruppere indhold og funktionalitet, der adskiller sig fra sidens øvrige indhold.

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 for at opnå et bestemt visuelt udtryk. Cards skal bruges, når de kommunikerer indholdet bedst muligt.

Brug ikke cards til at gruppere formularelementer. Brug i stedet blot overskrifter eller trinindikator.

Vejledning

Undgå lange tekster i cards - skriv kort og præcist.

Sørg for, at cards fremtræder roligt i sidens layout og ikke bryder brugerens naturlige aflæsning af siden. Brug designsystemets grid til at bestemme bredden på cards. Cards, der står ved siden af hinanden, bør have samme højde.

Brug ikke horisontalt sidestillede cards til lange lister af indhold, som brugeren skal lede efter noget bestemt i (Laubheimer, 2016). Anvend i stedet et layout, hvor indholdet står vertikalt, fx vha. lange cards.

Undgå at blande navigationscards, hvor hele cardet er klikbart, med andre cards i samme liste. Brugeren kan blive forvirret over, hvad der kan klikkes på.

Cards skal altid have en titel og en brødtekst. De kan også indeholde andre komponenter, såsom:

• Subheading
• Links
• Knapper
• Illustration, fx infografik eller billede. Husk at tilføje en sigende alt-tekst til illustrationer, der har en betydning for sidens indhold. Rent dekorative billeder skal have et tomt alt tag, dvs. alt=””, da de således springes over af skærmlæsere.

Sådan (do)

Sådan: Indholdet i hvert card skal kun omhandle ét enkelt emne (Coyle, 2020).

Ikke sådan (don't)

Ikke sådan: Det samme card skal ikke samle indhold om forskellige emner (Coyle, 2020).

Sådan (do)

Sådan: Teksten i cards skal være kort og præcis, og mængden af interaktionselementer skal begrænses (Laubheimer, 2016). Brødteksten bør maksimalt være et par korte sætninger, og der skal kun være få links eller knapper (Coyle, 2020).

Ikke sådan (don't)

Ikke sådan: Cards skal ikke indeholde lange tekster eller mange interaktionselementer (Coyle, 2020).

Varianter

Cardbredder

Cards kan have forskellige bredder afhængigt at indholdet og sidens generelle opbygning.

Anvend et responsivt grid til at definere bredden på cards. Således kan fx 2, 3 eller 4 cards stå ved siden af hinanden på større skærme, mens de skalerer og fx står under hinanden på mindre skærme. Brugen af grid er med til at skabe en visuel ro i, hvordan cards struktureres på siden.

Card med billede

Husk at angive en alt-tekst til billeder, der ikke er rent dekorative - dvs. når billedernes indhold har en betydning for, hvordan brugerne forstår siden.

For rent dekorative billeder indsættes en tom alt-tekst.

Åbn dette eksempel i et nyt vindue: cards-with-images

Eksempel på cards med billeder

Subheading

Titel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sekundær knapTertiær knap

Subheading

Titel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

• Link
• Eksternt link

Gå til eksemplets kode: cards-with-images

Card uden billede

Navigationscard

Navigationscard leder brugeren videre til en anden side. Hele cardet er klikbart og markeres med understreget titel og pileikon i nederste højre hjørne.

Hvis navigationscardet linker til en ekstern side, der åbner i en ny fane, vises ekternt link-ikon nederst i højre hjørne i stedet for pilen.

Navigationscards kan både være med og uden billede.

Langt card

I lange cards placeres evt. billede, tekst og pil-ikon i et horisontalt layout. Disse cards egner sig som hovedregel til cards med korte tekster og/eller cards, der på desktop har en bredde over seks kolonner (se grid) eller 500px. På mobil har lange cards samme vertikale layout som almindelige cards.

Både almindelige cards og navigationscards kan være lange cards.

Se komponenten i eksempelløsninger

• Sagsoversigt: Find sag
• Dashboard

Referencer

• Andrew Coyle (2020): 8 rules to help you design a better card user interface
• Page Laubheimer (2016): UI Component Definition

Installation

HTML Struktur

<div class="row card-row">
    <div class="col-12 col-sm-8 col-md-6">
        <section class="card">
            <div class="card-image"><img alt="" src="/assets/img/cards/card-placeholder.svg" width="267" height="150">
            </div>
            <div class="card-content"><span class="card-subheading">Subheading</span>
                <h2 class="card-heading">Titel</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.</p>
                <ul class="nobullet-list card-actions">
                    <li><a href="#">Link</a></li>
                    <li><a href="#" class="icon-link" target="_blank">Eksternt
                            link<svg class="icon-svg" aria-label="(åbner i nyt vindue)" focusable="false"><use href="#open-in-new"></use></svg></a>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</div>

Da cards kan bruges i flere kontekster, er der ikke en fast regel om, hvilket HTML-element der skal bruges til et card for at sikre den bedste tilgængelighed. Fx kan både <a> og <section> være korrekte muligheder, men det er op til udvikleren i hvert tilfælde at vurdere, hvad der er semantisk korrekt.

Indholdet i et card skal følge denne rækkefølge fra top til bund (og fra venstre mod højre):

1. Billede
2. Subheading
3. Titel
4. Tekst / paragraffer
5. Links / knapper / link-ikon

Ikke alle elementer er nødvendige at inkludere i et card, men der kan ikke byttes rundt på rækkefølgen.

Brug klassen card-actions på linklisten eller knapgruppen i bunden af et card for korrekt margin til det øvrige indhold. For link-ikoner på navigationscards skal klassen card-icon tilføjes til ikonet.

Cardbredder

Hvis der anvendes mere end ét card, bør de placeres i et grid for at sikre korrekt skalering af højde og bredde.

Hvis et card placeres uden for et grid, kan det være nødvendigt at tilpasse dets udseende med hjælpeklasser (utilities). I nogle tilfælde kan det være nødvendigt at anvende klassen collapsed-height sammen med klassen card, hvis højden er blevet strukket.

Card med billede

Overvej grundigt dimensionerne på dit billede og hvordan det skalerer på forskellige skærmstørrelser. Høje billeder kan nemt komme til at fylde meget på især mindre skærme.

<div class="row card-row">
    <div class="col-12 col-sm-6">
        <section class="card">
            <div class="card-image"><img alt="" src="/assets/img/cards/card-placeholder.svg" width="267" height="150">
            </div>
            <div class="card-content"><span class="card-subheading">Subheading</span>
                <h2 class="card-heading">Titel</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.</p>
                <div class="button-group card-actions"><button
                        class="button button-secondary">Sekundær knap</button><button
                        class="button button-tertiary">Tertiær knap</button></div>
            </div>
        </section>
    </div>
    <div class="col-12 col-sm-6">
        <section class="card">
            <div class="card-image"><img alt="" src="/assets/img/cards/card-placeholder.svg" width="267" height="150">
            </div>
            <div class="card-content"><span class="card-subheading">Subheading</span>
                <h2 class="card-heading">Titel</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.</p>
                <ul class="nobullet-list card-actions">
                    <li><a href="#">Link</a></li>
                    <li><a href="#" class="icon-link" target="_blank">Eksternt
                            link<svg class="icon-svg" aria-label="(åbner i nyt vindue)" focusable="false"><use href="#open-in-new"></use></svg></a>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</div>

Card uden billede

<div class="row card-row">
    <div class="col-12 col-sm-6">
        <section class="card">
            <div class="card-content">
                <h2 class="card-heading">Titel</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.</p>
                <div class="button-group card-actions"><button
                        class="button button-primary">Lorem ipsum</button><button
                        class="button button-secondary">Dolor</button></div>
            </div>
        </section>
    </div>
    <div class="col-12 col-sm-6">
        <section class="card">
            <div class="card-content">
                <h2 class="card-heading">En anden titel</h2>
                <p>Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua.</p>
                <ul class="nobullet-list card-actions">
                    <li><a href="#">Link</a></li>
                    <li><a href="#" class="icon-link" target="_blank">Eksternt
                            link<svg class="icon-svg" aria-label="(åbner i nyt vindue)" focusable="false"><use href="#open-in-new"></use></svg></a>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</div>

Navigationscard

<ul class="row card-row">
    <li class="col-12 col-sm-6 col-md-4">
        <a class="card" href="#">
            <div class="card-image"><img alt="" src="/assets/img/cards/card-placeholder.svg" width="267" height="150">
            </div>
            <div class="card-content">
                <h2 class="card-heading">Lorem</h2>
                <p>Dette card linker til en anden side.</p>
            </div>
            <svg class="icon-svg card-icon" focusable="false" aria-hidden="true"><use href="#arrow-forward"></use></svg>
        </a>
    </li>
    <li class="col-12 col-sm-6 col-md-4">
        <a class="card" href="#" target="_blank">
            <div class="card-image"><img alt="" src="/assets/img/cards/card-placeholder.svg" width="267" height="150">
            </div>
            <div class="card-content">
                <h2 class="card-heading">Sit amet</h2>
                <p>Dette card linker til en side, der åbner i en ny fane.</p>
            </div>
            <svg class="icon-svg card-icon" aria-label="(åbner i nyt vindue)" focusable="false"><use href="#open-in-new"></use></svg>
        </a>
    </li>
    <li class="col-12 col-sm-6 col-md-4">
        <a class="card" href="#">
            <div class="card-content">
                <h2 class="card-heading">Ipsum dolor</h2>
                <p>Dette card linker til en anden side.</p>
                <p>Der er ikke noget billede på dette eksempelcard. Normalt vil enten alle
                    eller ingen cards i samme liste have billede.</p>
            </div>
            <svg class="icon-svg card-icon" focusable="false" aria-hidden="true"><use href="#arrow-forward"></use></svg>
        </a>
    </li>
</ul>

Langt card

Ved brug af billeder i lange cards skal du være opmærksom på, hvordan billedet og teksten skalerer på forskellige skærmbredder. Sørg for at vælge et billede med passende højde til teksten, så der er færrest mulige tilfælde, hvor billedet bliver beskåret.

<ul class="row card-row">
    <li class="col-12">
        <a class="card long" href="#">
            <div class="card-image"><img alt="" src="/assets/img/cards/card-placeholder.svg" width="267" height="150">
            </div>
            <div class="card-content"><span class="card-subheading">Subheading</span>
                <h2 class="card-heading">Langt navigationscard med billede</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <svg class="icon-svg card-icon" focusable="false" aria-hidden="true"><use href="#arrow-forward"></use></svg>
        </a>
    </li>
    <li class="col-12">
        <a class="card long" href="#">
            <div class="card-content">
                <h2 class="card-heading">Langt navigationscard uden billede</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <svg class="icon-svg card-icon" focusable="false" aria-hidden="true"><use href="#arrow-forward"></use></svg>
        </a>
    </li>
    <li class="col-12">
        <div class="card long">
            <div class="card-image"><img alt="" src="/assets/img/cards/card-placeholder.svg" width="267" height="150">
            </div>
            <div class="card-content"><span class="card-subheading">Subheading</span>
                <h2 class="card-heading">Titel</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.</p>
                <ul class="nobullet-list card-actions">
                    <li><a href="#">Link</a></li>
                    <li><a href="#" class="icon-link" target="_blank">Eksternt
                            link<svg class="icon-svg" aria-label="(åbner i nyt vindue)" focusable="false"><use href="#open-in-new"></use></svg></a>
                    </li>
                </ul>
            </div>
        </div>
    </li>
</ul>