Een card groepeert informatie die gerelateerd is aan elkaar. Over het algemeen is het mogelijk om via de card door te klikken naar meer informatie over het onderwerp.

Wanneer gebruik je een card?

Je gebruikt een card wanneer je meerdere blokken met informatie moet tonen die gegroepeerd moeten worden. Denk bijvoorbeeld aan een overzicht van nieuwsberichten waarbij elk bericht een blok van gegroepeerde informatie is in een card.

Gebruik geen cards wanneer een lijst volstaat. Cards zijn slechter te scannen en gebruikers kunnen minder goed informatie vergelijken dan wanneer het in een lijst staat.

Anatomie van het component

Het component bestaat minimaal uit:

• Een titel
• Een samenvatting

Mogelijke andere elementen binnen de card zijn:

• Een afbeelding
• Een button
• Aanduiding van het type
• Aanduiding van de datum

Richtlijnen

• Een card bevat tussen 3 en 6 verschillende elementen
• Binnen een card staat het belangrijkste element bovenaan
• Als er als eerste een afbeelding getoond wordt moet het een duidelijke relatie hebben met de achterliggende content

Rijkshuisstijl

Vanuit de Rijkshuisstijl zijn er geen richtlijnen wat betreft het card component.

Bronnen

• Cards: UI-Component Definition
• How to design better cards - Kai Wong