Composant Carte
Ce composant permet de créer une carte DSFR.
Avertissement
Ce composant doit être encapsulé dans une grille DSFR (avec row et col) pour être affiché correctement.
Cartes sur deux colonnes
Composant
Exemple de carte
Une description succincte
Exemple de carte 2
Une autre description succincte
Extrait de code
/// row
/// col
/// card | Exemple de carte
image: ../assets/placeholder.16x9.png
target: https://www.example.com/
Une description succincte
///
///
/// col
/// card | Exemple de carte 2
image: ../assets/placeholder.16x9.png
target: https://www.example.com/
Une autre description succincte
///
///
///
Options de la carte
| Option | Valeur par défaut | Description |
|---|---|---|
| description | Description de la carte. | |
| markup | h5 | Type de balise pour le titre. Valeurs possibles : "p", "h1", "h2", "h3", "h4", "h5", "h6" |
| badge | Badge associé la carte. Nécessite un titre et éventuellement un code couleur sous la forme titre | code_couleur. Les valeurs success, error, info, warning, new peuvent aussi être utilisées à la place de la couleur. |
|
| tag | Tag associé à la carte. Incompatible avec l'option badge. Nécessite un titre et éventuellement un code couleur sous la forme titre | code_couleur. Les valeurs success, error, info, warning, new peuvent aussi être utilisées à la place de la couleur. |
|
| enlarge | True | Si true, agrandit la zone de clic à toute la carte |
| target | Lien de la carte. | |
| target_new | False | Si true, ouvre le lien dans un nouvel onglet. |
| image | Lien de l'image de la carte. | |
| image_alt | Texte alternatif de l'image de la carte. | |
| download | False | Si true, passe la carte en mode téléchargement |
| lang | Ajoute l'attribut hreflang au lien, pour définir la langue du document lié (Ex: 'fr') | |
| assess | False | Si true, évaluation automatique des détails du fichier à télécharger (poids, format, etc.). |
| horizontal | False | Si true, passe la carte en mode horizontal. |
| horizontal_pos | "" | Position de l'image dans la carte horizontale. Valeurs possibles : tier ou half. Si rien, rapport 40/60 |
| variations | "" | Variations de la carte. Valeurs possibles : grey, no-border, no-background, shadow. Si rien, pas de variation. |
Autres exemples de cartes
Composant
Sans image
Une autre description succincte
etc.
Extrait de code
/// row | fr-grid-row--gutters
/// col
/// card | Avec Description
description: Description / sous-titre
image: ../assets/placeholder.16x9.png
target: https://www.example.com/
Une description succincte
///
///
/// col
/// card | Juste le titre cliquable
image: ../assets/placeholder.16x9.png
target: https://www.example.com/
enlarge: false
Une autre description succincte
///
///
/// col
/// card | Avec badge
image: ../assets/placeholder.16x9.png
target: https://www.example.com/
badge: Favori | green-menthe
Une autre description succincte
///
///
///
/// row | fr-grid-row--gutters
/// col
/// card | Mode download avec infos PJ
image: ../assets/placeholder.16x9.png
target: /assets/placeholder.16x9.png
download: true
assess: true
///
///
/// col
/// card | Sans image
target: https://www.example.com/
horizontal: true
horizontal_pos: half
Une autre description succincte
///
///
///
etc.