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

Ne pas changer le background des card

Respectez la hiérarchie des boutons.

Les box doivent toujours respecter les grilles