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
Une description succincte
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
Une autre description succincte
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.
Pictogrammes DSFR disponibles
accessibility
accessibility/accessibility
accessibility/ear-off
accessibility/eye-off
accessibility/mental-disabilities
accessibility/wheelchair
buildings
buildings/base
buildings/city-hall
buildings/companie
buildings/factory
buildings/house
buildings/nuclear-plant
buildings/school
digital
digital/application
digital/avatar
digital/calendar
digital/coding
digital/data-visualization
digital/ecosystem
digital/in-progress
digital/innovation
digital/internet
digital/mail-send
digital/search
digital/self-training
digital/smartphone
document
document/archive
document/binders
document/conclusion
document/contract
document/document-add
document/document-download
document/document-search
document/document-signature
document/document
document/driving-licence
document/driving-license-new
document/international-driving-license-new
document/international-driving-license
document/national-identity-card-passport
document/national-identity-card
document/passport
document/presse-card
document/sign-document
document/tax-stamp
document/vehicle-registration
environment
environment/environment
environment/food
environment/grocery
environment/human-cooperation
environment/leaf
environment/moon
environment/mountain
environment/sun
environment/tree
health
health/doctor
health/health
health/hospital
health/medical-research
health/vaccine
health/virus
institutions
institutions/army-tank
institutions/astronaut
institutions/firefighter
institutions/gendarmerie
institutions/justice
institutions/money
institutions/navy-anchor
institutions/navy-bachi
institutions/police
leisure
leisure/art
leisure/audio
leisure/book
leisure/catalog
leisure/community
leisure/culture
leisure/digital-art
leisure/paint
leisure/pictures
leisure/podcast
leisure/video-games
leisure/video
map
map/airport
map/backpack
map/compass
map/location-france
map/location-overseas-france
map/luggage
map/map-pin
map/map
map/travel-back
system
system/connection-lost
system/error
system/flow-list
system/flow-settings
system/information
system/language
system/notification
system/padlock
system/success
system/system
system/technical-error
system/warning