Composant Tuile
Ce composant permet de créer une tuile DSFR.
Avertissement
Ce composant doit être encapsulé dans une grille DSFR (avec row et col) pour être affiché correctement.
Tuiles sur deux colonnes
Composant
Exemple de tuile
Une description succincte
Exemple de tuile 2
Une autre description succincte
Extrait de code
/// row | fr-grid-row--gutters
/// col
/// tile | Exemple de tuile
picto: digital/application
target: https://www.example.com/
Une description succincte
///
///
/// col
/// tile | Exemple de tuile 2
picto: environment/food
target: https://www.example.com/
Une autre description succincte
///
///
///
Options de la tuile
| Option | Valeur par défaut | Description |
|---|---|---|
| description | Description de la tuile. | |
| markup | h5 | Type de balise pour le titre. Valeurs possibles : "p", "h1", "h2", "h3", "h4", "h5", "h6" |
| badge | Badge associé la tuile. 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 tuile. 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 tuile |
| target | Lien de la tuile. | |
| target_new | False | Si true, ouvre le lien dans un nouvel onglet. |
| picto | Identifiant la picto DSFR. Les pictogrammes se trouvent dans le dossier artwork du paquetage DSFR. Renseigner le chemin sous la forme thematique/picto (sans l'extension .svg) | |
| download | False | Si true, passe la tuile 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 tuile en mode horizontal. |
| vertical_breakpoint | Point de rupture pour passer en mode vertical. Par défaut, aucun. Valeurs possibles : md ou lg | |
| variations | "" | Variations de la tuile. Valeurs possibles : grey, no-border, no-background, shadow. Si rien, pas de variation. |
Autres exemples de tuiles
Composant
Mode horizontal 50%
Une autre description succincte
etc.
Extrait de code
/// row | fr-grid-row--gutters
/// col
/// tile | Avec Description
description: Description / sous-titre
picto: digital/internet
target: https://www.example.com/
Une description succincte
///
///
/// col
/// tile | Juste le titre cliquable
picto: health/health
target: https://www.example.com/
enlarge: false
Une autre description succincte
///
///
/// col
/// tile | Avec badge
picto: institutions/firefighter
target: https://www.example.com/
badge: Favori | green-menthe
Une autre description succincte
///
///
///
/// row | fr-grid-row--gutters
/// col
/// tile | Mode download avec infos PJ
picto: environment/leaf
target: /assets/placeholder.16x9.png
download: true
assess: true
///
///
/// col
/// tile | Mode horizontal 50%
picto: system/success
target: https://www.example.com/
horizontal: true
Une autre description succincte
///
///
///
etc.