Card Content - Carte Édito

Composant destiné à présenter du contenu éditorial ou informatif avec mise en forme enrichie.

Anatomie

Media personnalisé (slot media): en haut, à gauche ou à droite selon la disposition choisie

Autre média personnalisé (slot par défaut) : autre contenu personnalisé, inséré au même endroit que le texte

Chevron positionné en bas dans la disposition verticale ou à droite dans les dispositions horizontales (s’affiche uniquement si le footer est vide)

Horizontal : le contenu du slot media peut être à gauche ou à droite. Utiliser le chevron (en laissant le footer vide) est préférable s’il est nécessaire d’optimiser la hauteur de la carte.

Version "Large" : Cette version permet d’optimiser la lisibilité grâce à des marges plus généreuses autour du contenu. Elle est idéale pour les cartes présentant des informations plus détaillées ou volumineuses, comme des articles longs ou des rapports. Les marges élargies aident à aérer le contenu et à améliorer la clarté visuelle, tout en offrant une présentation plus élégante et structurée, en particulier dans des contextes où le confort de lecture est essentiel.

Version "Small" : Utilisée pour ajouter des cartes dans une colonne sur le côté ou pour des informations secondaires, comme des actualités. C’est une bonne option pour hiérarchiser l’information entre des cartes mises en avant large et small. Elle est également adaptée pour optimiser les marges en version mobile.

Version par défaut "Outline" : Cette variante est le style de carte de base. Elle présente une bordure fine autour de la carte, sans fond coloré, ce qui lui confère un aspect épuré et discret. Cette version permet une lisibilité optimale grâce à des marges bien définies, la bordure permettant de regrouper visuellement les informations entre elles.

Version "Filled" : Ce variant permet de différencier deux types de cartes, ou utilisé pour contraster des cartes sur fond blanc.

Card avec une seule action : Si la carte n’a qu’une seule action (par exemple, si elle sert de bouton ou de lien), elle peut être entièrement cliquable. Dans ce cas, il est recommandé d'opter pour l’affichage du chevron pour indiquer clairement que l'élément est interactif. L’effet de survol renforce par ailleurs cette indication.

Card avec plusieurs actions : Lorsqu'une carte contient plusieurs actions, comme des tags cliquables ou plusieurs boutons, elle ne doit pas être cliquable dans son ensemble (attribut href non défini. Seuls les éléments interactifs (boutons et/ou tags) doivent être cliquables. Il est important que les actions soient clairement visibles, avec une hiérarchie bien définie pour éviter toute confusion dans la navigation. Pour ce faire, utiliser différentes variantes différentes est une bonne pratique.