Card - Carte

Composant permettant de séparer les informations par sujets au sein d'une interface et d'y ajouter une hiérarchie.

Anatomie

Le composant carte est composé de plusieurs éléments dont certains ne sont visibles qu'en fonction des options de personnalisation choisies.

Card

En-tête

Contenu

Pied

1. Conteneur

2. Titre

3. Bouton icône

4. Image

5. Barre de défilement

6. Zone de contenu

7. Séparateur

8. Bouton d’action primaire

9. Bouton d’action secondaire

10. Bouton d’action tertiaire

Tous les éléments de la carte sont facultatifs. Toutefois il est conseillé de respecter l'emplacement par défaut pour chaque élément s’il est utilisé.

Vous pouvez modifier l’image et créer les composants locales pour les en-têtes et contenu afin d’adapter la vue de la carte au contenu souhaité.


États

Défaut

card - default

 

Au survol

card - hover

 

Actif

card - actif

 


Responsive

Les cartes s'adaptent à l'écran / à la grille dans lequel elles seront affichées.

Nous vous conseillons de tester le comportement de vos cartes selon différentes tailles d'écran pour assurer un ajustement réactif et accessible.

La taille maximale de la carte et le fonctionnement du responsive dépendront des éléments qui l'entourent ainsi que de ce qui compose la carte.