Card

Une card contient du contenu (image et texte) et des actions sur un seul sujet.

# Usage

Une card contient du contenu (image et texte) et des actions sur un seul sujet.

  • Présentation de produits : Pour afficher des informations sur un produit, y compris des images, des descriptions, et des prix.
  • Offres et promotions : Pour mettre en avant des promotions spéciales ou des offres limitées dans le temps.
  • Articles et ressources : Pour regrouper des articles de blog, des tutoriels, ou des guides.
  • Fonctionnalités et services : Pour présenter différentes fonctionnalités ou services offerts.

Quand utiliser

  • Vente : Utilisées pour afficher des informations sur les produits, telles que des images, des descriptions, des prix et des avis des utilisateurs. Par exemple : une carte produit présentant une image, un titre, un prix, et un bouton "Ajouter au panier".
  • Assistance : Employées pour organiser les FAQ, les articles de support ou les témoignages des clients. Par exemple : une carte d'article de support contenant un titre, un résumé et un lien vers l'article complet
  • Application/Espace client : Utilisées pour présenter les informations de compte, les factures, les notifications et les offres personnalisées. Par exemple : une carte de notification avec un message, une date, et un bouton pour en savoir plus.

Quand ne pas utiliser

  • Texte long : Éviter d'utiliser des cartes pour de longs paragraphes de texte qui seraient mieux présentés sous forme d'articles ou de pages séparées.
  • Contenu non lié : Ne pas regrouper des informations non connexes dans une même carte pour éviter la confusion de l'utilisateur.

# Do & Don't

Une carde ne peux pas contenir un hat

Une card ne peut pas contenir un hat, privilégier l’utilisation d’une box si besoin

Ne pas changer le background des card

Une card peut uniquement avoir un fond blanc

Respectez la hiérarchie des boutons.

La hiérarchie des boutons doit être respecter dans les cards, jamais un bouton primaire avec un bouton secondaire.

Les box doivent toujours respecter les grilles

Une box doivent toujours être aligner avec les grilles, cela permet de créer une homogénéité et une cohérence visuel.