Card - Carte

Composant permettant de séparer les informations par sujets au sein d'une interface et d'y ajouter une hiérarchie.

 

card - Bandeau

Le composant card peut être utilisé pour les cas suivants :

Les cartes doivent être faciles à identifier et structurées avec un titre ou une image pour faciliter la compréhension.

Une carte est autodescriptive. Elle n'a pas nécessairement besoin d'un contexte autour d'elle pour expliquer l'information qu'elle donne ou l'action à laquelle elle conduit.

Plusieurs cartes peuvent être utilisées dans une interface, comme dans le cas d'un tableau de bord, mais il est important qu'elles incluent une action.

Les cartes contiennent du contenu et des actions sur un seul sujet.

 

🚫 Usage incorrect :

  • Ne pas utiliser une carte pour afficher une longue liste de données. Privilégier un tableau ou l’affichage directement depuis la page.
  • Ne pas surcharger la carte avec trop de contenu visuel. Privilégier un affichage directement depuis la page.

Comportement général

Si une carte ne permet que de l'ouvrir ou de la visualiser plus en détail, n'incluez pas les boutons d’actions. Il serait mieux de privilégier la possibilité de cliquer n'importe où sur la carte pour effectuer cette action.

card - image hover

 

S'il y a deux ou plusieurs actions possibles, utilisez les boutons d’actions situées en pied de la carte, au lieu de cliquer sur la carte.

card Avec pied