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.


Komponenter

Cards

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

Retningslinjer

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

Se komponenten i eksempelløsninger

Referencer

Varianter

Card med tredjedel bredde

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

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

Samme højde

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.