Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Cards
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.
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
Card med tredjedel bredde
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
Header
Understøttende tekst
Dette er et tekstområde, hvor du kan skrive hvad du har lyst til.
Card med halv bredde
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
Samme højde
Lorem ipsum fordeling
Header
In sollicitudin, nulla sit amet facilisis euismod, ex ex hendrerit eros, et egestas purus lectus vitae tortor.
Lorem ipsum fordeling
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum fordeling
Header
Sed tincidunt, risus vitae rutrum accumsan, urna leo fermentum dui, ac suscipit ante nulla sit amet magna.