Composants
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