Cards

• Card med halv bredde
• Card med tredjedel bredde
• Samme højde

Åbn dette eksempel i et nyt vindue: cards-full-width

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.

SekundærknapTertiærknap

• Et link til et sted i løsningen
• Et link til et sted uden for løsningen

Gå til kodeafsnit: cards-full-width

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.

Sådan (do)

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)

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

Referencer

• Page Laubheimer: Cards: UI-Component Definition (2016)
• Muneo Kitajima, Marilyn H Blackmon & Peter G Polson: A Comprehension-based Model of Web Navigation and Its Application to Web Usability Analysis (2000)

Se komponenten i eksempelløsninger

• Sagsoversigt: Find sag
• Dashboard

Card med halv bredde

Åbn dette eksempel i et nyt vindue: cards-half-width

Header

Understøttende tekst

2018

Lorem ipsum dolor sit amet

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

SekundærknapTertiærknap

• Et link til et sted i løsningen
• Et link til et sted uden for løsningen