[(#REM) Carte - Card @author Jonathan OCHEJ @license MIT - https://github.com/GouvernementFR/dsfr/blob/main/LICENSE.md @see https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte @see https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/telechargement-de-fichier @param id - optionnel Identifiant unique utilisé pour l'attribut HTML `id` du composant. @param class - optionnel Ajoute les classes spécifiées à l'attribut HTML `class` du composant. @param titre - obligatoire Un titre reprenant celui de l'objet visé (page de destination, action, site). @param balise_titre (h2|h3|h4|h5|h6) Le titre, matérialisé par la classe fr-card__title est par défaut une balise `h3`. Vous pouvez choisir le niveau de titre convenant à l'arborescence de votre page (de `h2` à `h6`). @param desactive (oui|non) L'état désactivé indique que l'utilisateur ne peut pas interagir avec la carte. @param image Chemin de l'image. @param image_texte_alternatif Uniquement si l'image apporte une information essentielle à la compréhension du contenu, renseigner le texte alternatif avec l'information nécessaire. @param type (grise|sans_bordure|sans_fond|avec_ombre_portee) Type de carte @param taille (petite|moyenne|grande) Par défaut le composant est proposé en taille `moyenne`. @param disposition (horizontale|horizontale_avec_largeur_image_33%|horizontale_avec_largeur_image_50%|verticale_avec_ratio_image_{largeur}:{hauteur}) Par défaut la disposition d'une carte est `verticale`. Avec une disposition horizontale, vous pouvez préciser la taille de la largeur de l'image (`40%` par défaut). Avec une disposition verticale, vous pouvez préciser le ratio de la taille de l'image (`16:9` par défaut). Les ratios suivants sont disponibles : `32:9`, `16:9`, `3:2`, `4:3`, `1:1`, `3:4`, `2:3`. Exemple pour le ratio `32:9` précisez en paramètre `disposition=verticale_avec_ratio_image_32:9` @param lien - url du lien @param lien_etendu (oui|non) Par défaut, le lien est étendu à toute la carte. @param lien_telechargement (oui|non) Par défaut, les détails du téléchargement sont remplis automatiquement. Vous pouvez cependant forcer les détails du téléchargement avec le paramètre `detail_du_bas`. @param lien_cible (_blank|_self|_parent|_top) Le lien externe `_blank` doit être utilisé pour les liens pointant vers un autre site et ouvrant un nouvel onglet/une nouvelle page. @param lien_titre Si le texte du lien (titre de la carte) n'est pas explicite et que aucune alternative n'est possible vous pouvez préciser un titre qui sera ajouté à l'attribut `title` @param lien_texte_ouvre_une_nouvelle_fenetre Si la cible du lien est externe, vous pouvez préciser le texte affiché au survole du lien @param lien_langue (fr|en|...) Si la langue du lien/fichier à télécharger est différente de la langue de la page courante il est nécessaire de le préciser. Cela permet d'ajouter l'attribut `hreflang` (remplis automatiquement les détails du téléchargement). @param lien_afficher_icone (oui|non) Pour une carte avec un lien, une icône est affichée par défaut. Si besoin, vous pouvez préciser de ne pas afficher cette icône. @param texte Un texte de description. @param detail_du_haut Un texte très court affiché dans la première zone de détail. @param detail_du_haut_icone Nom de l'icône DSFR à utiliser pour `detail_du_haut` (ex: warning-fill, thumb-up-line, lightbulb-fill, error-line, etc...) @param detail_du_bas Un texte très court affiché dans la deuxième zone de détail. @param detail_du_bas_icone Nom de l'icône DSFR à utiliser pour `detail_du_bas` (ex: warning-fill, thumb-up-line, lightbulb-fill, error-line, etc...) @param badge @param groupe_de_badges Affiché dans la première zone de détail ou par-dessus de l'image (jusqu'à 4 éléments). `badge` est transformé automatiquement en `groupe_de_badges` pour la compatibilité de la carte. `groupe_de_badges` est prioritaire sur le paramètre `badge`. @param badges_par_dessus_image (oui|non) Si besoin, les badges peuvent être affichés par-dessus l'image (`non` par défaut). Attention, avec des badges et des tags en même temps, les badges sont automatiquement affichés par-dessus l'image. Ce paramètre est pris en compte uniquement si la carte contient une image. @param tag @param groupe_de_tags Affiché dans la première zone de détail (jusqu'à 4 éléments). Attention, les tags doivent être sans interaction. `tag` est transformé automatiquement en `groupe_de_tags` pour la compatibilité de la carte. `groupe_de_tags` est prioritaire sur le paramètre `tag`. @param action_bouton @param action_groupe_de_boutons Affiché dans la zone d'action. Désactive automatiquement `lien_etendu` et `detail_du_bas`. N'est pas pris en compte si la carte est un lien de téléchargement `lien_telechargement=oui` `action_bouton` est transformé automatiquement en `groupe_de_boutons` pour la compatibilité de la carte. `action_groupe_de_boutons` est prioritaire sur le paramètre `action_bouton`. @param action_lien @param action_groupe_de_liens Affiché dans la zone d'action. Désactive automatiquement `lien_etendu` et `detail_du_bas`. N'est pas pris en compte si la carte est un lien de téléchargement `lien_telechargement=oui` `action_lien` est transformé automatiquement en `groupe_de_liens` pour la compatibilité de la carte. `action_groupe_de_liens` est prioritaire sur le paramètre `action_lien`. ] #SET{titre,#ENV*{titre}|textebrut} [(#GET{titre}|oui) #SET{balise_titre,#LISTE{h2,h3,h4,h5,h6}|find{#ENV{balise_titre}}|oui|?{#ENV{balise_titre},h3}} #SET{texte,#ENV*{texte}|dsfr_texte_paragraphe} #SET{class,#ARRAY} #SET{attributs,#ARRAY} #SET{class,#GET{class}|dsfr_class_ajouter{fr-card}} #SET{attributs,#GET{attributs}|dsfr_attribut_definir{id,#ENV**{id}|dsfr_id}} [(#ENV{type}|=={grise}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-card--grey}}] [(#ENV{type}|=={sans_bordure}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-card--no-border}}] [(#ENV{type}|=={sans_fond}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-card--no-background}}] [(#ENV{type}|=={avec_ombre_portee}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-card--shadow}}] [(#ENV{taille}|=={petite}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-card--sm}}] [(#ENV{taille}|=={grande}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-card--lg}}] [(#ENV{disposition}|=={horizontale}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-card--horizontal}}] [(#ENV{disposition}|=={horizontale_avec_largeur_image_33%}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{#ENV{image}|?{fr-card--horizontal-tier,fr-card--horizontal}}}] [(#ENV{disposition}|=={horizontale_avec_largeur_image_50%}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{#ENV{image}|?{fr-card--horizontal-half,fr-card--horizontal}}}] #SET{lien,#ENV{lien}|calculer_url} [(#GET{lien}|oui) [(#ENV{lien_etendu}|!={non}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-enlarge-link}}] [(#ENV{lien_afficher_icone}|=={non}|oui) #SET{class,#GET{class}|dsfr_class_ajouter{fr-card--no-icon}}] #SET{attributs_lien,#ARRAY} #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_definir{href,#GET{lien}}} #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_definir{title,#ENV{lien_titre}}} [(#REM)] [(#ENV{lien_cible}|non|et{#GET{lien}|lien_is_url_externe}|oui) [(#VAL{_blank}|setenv{lien_cible})] ] #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_definir{target,#ENV{lien_cible}}} [(#ENV{lien_cible}|=={_blank}|oui) #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_definir{title,#GET{attributs_lien/title,#GET{titre}}|concat{' - ',#ENV{lien_texte_ouvre_une_nouvelle_fenetre}|?{#ENV{lien_texte_ouvre_une_nouvelle_fenetre},#VAL{dsfr_composants:ouvre_une_nouvelle_fenetre}|_T}}}} ] [(#REM)] [(#GET{lien}|lien_is_url_externe|oui) #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_definir{rel,noopener external}} ] [(#ENV{lien_telechargement}|=={oui}|oui) #SET{telechargement,oui} #SET{fin,oui} #SET{class,#GET{class}|dsfr_class_ajouter{fr-card--download}} #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_definir{download,booleen}} #SET{details_du_telechargement,#ENV{detail_du_bas}} [(#GET{details_du_telechargement}|non) #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_definir{data-fr-assess-file,booleen}} ] ] #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_definir{hreflang,#ENV*{lien_langue}|textebrut}} ] #SET{detail_du_haut,#ENV*{detail_du_haut}|textebrut} [(#GET{detail_du_haut}|oui) #SET{debut,oui} [(#ENV{detail_du_haut_icone}|et{#DSFR_ICONES|table_valeur{#ENV{detail_du_haut_icone}}}|oui)#SET{detail_du_haut_icone,#ENV*{detail_du_haut_icone}|attribut_html}] ] #SET{detail_du_bas,#ENV*{detail_du_bas}|textebrut} [(#GET{detail_du_bas}|oui) #SET{fin,oui} [(#ENV{detail_du_bas_icone}|et{#DSFR_ICONES|table_valeur{#ENV{detail_du_bas_icone}}}|oui)#SET{detail_du_bas_icone,#ENV*{detail_du_bas_icone}|attribut_html}] ] #SET{groupe_de_badges,#ENV*{groupe_de_badges}} [(#GET{groupe_de_badges}|non) [(#ENV{badge}|oui) #SET{groupe_de_badges,#INCLURE{fond=dsfr_composants/groupe_de_badges,badges=#LISTE{#ENV*{badge}}}} ] ] #SET{groupe_de_tags,#ENV*{groupe_de_tags}} [(#GET{groupe_de_tags}|non) [(#ENV{tag}|oui) #SET{groupe_de_tags,#INCLURE{fond=dsfr_composants/groupe_de_tags,tags=#LISTE{#ENV*{tag}}}} ] ] [(#GET{groupe_de_badges}|oui) [(#ENV{image}|et{#GET{telechargement}|non}|oui) [(#ENV{badges_par_dessus_image}|=={oui}|oui) #SET{badges_par_dessus_image,oui} ] [(#GET{groupe_de_tags}|oui) #SET{badges_par_dessus_image,oui} ] ] [(#GET{badges_par_dessus_image}|non) #SET{debut,oui} ] ] [(#GET{groupe_de_tags}|oui) #SET{debut,oui} ] [(#GET{telechargement}|non) #SET{action_groupe_de_boutons,#ENV*{action_groupe_de_boutons}} [(#GET{action_groupe_de_boutons}|non) [(#ENV{action_bouton}|oui) #SET{action_groupe_de_boutons,#INCLURE{fond=dsfr_composants/groupe_de_boutons,disposition=horizontale,boutons=#LISTE{#ENV*{action_bouton}}}} ] ] [(#GET{action_groupe_de_boutons}|oui) #SET{action,oui} #SET{fin,''} #SET{class,#GET{class}|dsfr_class_supprimer{fr-enlarge-link}} ] #SET{action_groupe_de_liens,#ENV*{action_groupe_de_liens}} [(#GET{action_groupe_de_liens}|non) [(#ENV{action_lien}|oui) #SET{action_groupe_de_liens,#INCLURE{fond=dsfr_composants/groupe_de_liens,disposition=horizontale,liens=#LISTE{#ENV*{action_lien}}}} ] ] [(#GET{action_groupe_de_liens}|oui) #SET{action,oui} #SET{fin,''} #SET{class,#GET{class}|dsfr_class_supprimer{fr-enlarge-link}} ] ] [(#ENV{desactive}|=={oui}|oui) [(#GET{lien}|oui) #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_supprimer{href}} #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_supprimer{target}} #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_supprimer{title}} #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_supprimer{rel}} #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_supprimer{hreflang}} #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_definir{aria-disabled,true}} #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_definir{role,link}} [(#ENV{lien_telechargement}|=={oui}|oui) #SET{telechargement,''} #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_supprimer{download}} #SET{attributs_lien,#GET{attributs_lien}|dsfr_attribut_supprimer{data-fr-assess-file}} ] ] ] [(#ENV{image}|oui) #SET{class_image,#ARRAY} #SET{attributs_image,#ARRAY} #SET{class_image,#GET{class_image}|dsfr_class_ajouter{fr-responsive-img}} [(#ENV{disposition}|match{verticale_avec_ratio_image_}|oui) #SET{ratio,#ENV{disposition}|replace{verticale_avec_ratio_image_,''}} [(#LISTE{32:9,3:2,4:3,1:1,3:4,2:3}|find{#GET{ratio}}|oui) #SET{class_image,#GET{class_image}|dsfr_class_ajouter{fr-ratio-#GET{ratio}|replace{:,x}}} ] ] #SET{attributs_image,#GET{attributs_image}|dsfr_attribut_definir{src,#ENV{image}}} #SET{attributs_image,#GET{attributs_image}|dsfr_attribut_definir{alt,#ENV{image_texte_alternatif}}} ]
#GET{texte}
] [(#GET{debut}|oui)