Carte - Card

La carte est un lien vers une page éditoriale dont elle donne un aperçu. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

 

Carte

La carte est un composant modulaire, elle est constituée dans sa version minimale d’un titre et d’une description. Elle ne contient qu’un seul lien et l'ensemble de la carte est cliquable, ce lien peut-être signalé par la présence d’une flèche.

La carte existe en affichage verticale ou horizontale.

Struture

Elle se compose des éléments suivants :

  • un titre, reprenant celui de la page de destination - obligatoire.

  • un lien, sur le titre de la carte et dont la zone de click peut s'étendre à toute la carte en ajoutant la classe .fr-enlarge-link - optionnel.

  • une image (16:9), issue ou en lien avec la page de destination - optionnelle.

  • une description, correspondant au chapô ou au premières lignes du contenu de la page de destination - optionnelle.

  • une zone détail, permettant de donner des informations sur la page (date de publication, auteur…) - optionnelle.

  • une icône MD “ arrow-right-line” , suggérant qu’il s’agit d'un élément cliquable (purement illustrative). - optionnelle.


Cartes verticales

1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="fr-card fr-enlarge-link"> <div class="fr-card__body"> <p class="fr-card__detail">Détail</p> <h4 class="fr-card__title"> <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a> </h4> <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p> </div> <div class="fr-card__img"> <img src="../img/placeholder.16x9.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div>

 

Cartes horizontales

 

1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="fr-card fr-card--horizontal fr-enlarge-link"> <div class="fr-card__body"> <p class="fr-card__detail">Détail</p> <h4 class="fr-card__title"> <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a> </h4> <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p> </div> <div class="fr-card__img"> <img src="../img/image.jpg" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div>

 

Responsive

En mobile :

  • les cartes verticales ont le même comportement.

  • les cartes horizontale deviennent automatiquement des cartes verticales

 



Règles d’utilisation

Usages

La hauteur de la carte s’adapte à son contenu. La largeur est elle définie selon la grille .

Au sein d’une liste, il faut veiller à harmoniser la hauteur des cartes par ligne (prendre la hauteur la plus importante comme référence).

Au sein d’une même liste ou collection, une carte doit :

  • avoir le même type d’affichage (horizontale ou verticale)

  • avoir le même nombre d’éléments d’une carte à l’autre

  • Être alignée avec les autres (en hauteur et en largeur)

1 2 3 4 <!-- Cartes placées au sein de la grille --> <div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col-12 fr-col-md-3"> <div class="fr-card fr-enlarge-link">

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 <div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col-12 fr-col-md-3"> <div class="fr-card fr-enlarge-link"> <div class="fr-card__body"> <p class="fr-card__detail">Détail</p> <h4 class="fr-card__title"> <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a> </h4> <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p> </div> <div class="fr-card__img"> <img src="../img/image.jpg" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> <div class="fr-col-12 fr-col-md-3"> <div class="fr-card fr-enlarge-link"> <div class="fr-card__body"> <p class="fr-card__detail">Détail</p> <h4 class="fr-card__title"> <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a> </h4> <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p> </div> <div class="fr-card__img"> <img src="../img/image.jpg" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> <div class="fr-col-12 fr-col-md-3"> <div class="fr-card fr-enlarge-link"> <div class="fr-card__body"> <p class="fr-card__detail">Détail</p> <h4 class="fr-card__title"> <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a> </h4> <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p> </div> <div class="fr-card__img"> <img src="../img/image.jpg" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> <div class="fr-col-12 fr-col-md-3"> <div class="fr-card fr-enlarge-link"> <div class="fr-card__body"> <p class="fr-card__detail">Détail</p> <h4 class="fr-card__title"> <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a> </h4> <p class="fr-card__desc">La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.</p> </div> <div class="fr-card__img"> <img src="../img/image.jpg" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> </div>

Accessibilité

La carte possède un seul lien dont l’intitulé est explicite : la balise <a> est placée sur le titre de la carte (balise Hx). La zone de clic pourra être étendue à toute la carte en css avec la class fr-enlarge-link

Contenus

Dans la mesure où les cartes sont présentés dans des listes/collection, il est nécessaire d'éviter les redondance et d’avoir un contenu distinct pour chaque carte. Ainsi, il faut éviter de réutiliser plusieurs fois la même image.

Personnalisation

Le style de ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels - voir la structure du composant.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :