Cards

Les cards présentent des informations regroupées dans un bloc visuel autonome.

Description

Les cards sont des conteneurs modulaires qui permettent de regrouper du contenu de manière compacte et structurée. Elles servent à mettre en valeur une unité d’information, une action ou un aperçu de contenu (ex. : produit, profil, article, statistique...).

Chaque card peut contenir du texte, une image, des icônes, des boutons ou d'autres composants, tout en conservant une cohérence visuelle et une hiérarchie claire.

Les cards sont particulièrement utiles dans des vues en grille ou en liste, où plusieurs éléments similaires sont présentés côte à côte.

Plateformes

Anatomie

  1. Image (optionnel) : peut contenir des images, des illustrations ou des icônes
  2. Badges (optionnel)
  3. Titres
  4. Contenu textuel (optionnel)
  5. Prix (optionnel)
  6. Boutons ou liens (optionnel)

Usage

Quand l'utiliser ?

  • Lorsque vous avez besoin de grouper des informations afin de les rendre digestes.

  • Lorsque vous devez proposer un point d'entrée court lié à un contenu plus détaillé ou à une tâche complexe.

  • Utilisez les cartes pour disposer un ou plusieurs ensembles d'informations connexes dans une même zone.

Anatomie

  1. Image (optionnel) : peut contenir des images, des illustrations ou des icônes
  2. Badges (optionnel)
  3. Titres
  4. Contenu textuel (optionnel)
  5. Prix (optionnel)
  6. Boutons ou liens (optionnel)

Usage

Quand l'utiliser ?

  • Lorsque vous avez besoin de grouper des informations afin de les rendre digestes.

  • Lorsque vous devez proposer un point d'entrée court lié à un contenu plus détaillé ou à une tâche complexe.

  • Utilisez les cartes pour disposer un ou plusieurs ensembles d'informations connexes dans une même zone.

Des questions ou un feedback ?

N’hésitez pas à contacter la team Design System par mail.