{"id":319,"date":"2024-06-19T17:37:37","date_gmt":"2024-06-19T15:37:37","guid":{"rendered":"https:\/\/wp-dsfr.fr\/demo\/?page_id=319"},"modified":"2024-09-12T17:04:55","modified_gmt":"2024-09-12T15:04:55","slug":"tuiles","status":"publish","type":"page","link":"https:\/\/wp-dsfr.fr\/demo\/liste-des-blocs-wordpress-du-dsfr\/tuiles\/","title":{"rendered":"Tuiles"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Tuiles<\/h1>\n\n\n\n<p class=\"has-xl-font-size\">La tuile est un raccourci ou point d\u2019entr\u00e9e qui redirige les utilisateurs vers des pages de contenu. Elle fait g\u00e9n\u00e9ralement partie d&rsquo;une collection ou liste de tuiles similaires. La tuile n\u2019est jamais pr\u00e9sent\u00e9e de mani\u00e8re isol\u00e9e.<\/p>\n\n\n\n<p>Elle se compose des \u00e9l\u00e9ments suivants :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Un pictogramme<\/strong> optionnel<\/li>\n\n\n\n<li><strong>Un titre<\/strong>&nbsp;reprenant celui de l\u2019objet vis\u00e9 (page de destination, action, site), obligatoire<\/li>\n\n\n\n<li><strong>Une description<\/strong>, optionnelle<\/li>\n\n\n\n<li><strong>Un texte de d\u00e9tail<\/strong>, optionnelle&nbsp;<\/li>\n\n\n\n<li><strong>Une ic\u00f4ne fl\u00e8che<\/strong>, optionnelle<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-media-text alignfull is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/pictogrammes-liste-2-1024x576.jpg\" alt=\"\" class=\"wp-image-311 size-full\" srcset=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/pictogrammes-liste-2-1024x576.jpg 1024w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/pictogrammes-liste-2-300x169.jpg 300w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/pictogrammes-liste-2-768x432.jpg 768w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/pictogrammes-liste-2-1536x864.jpg 1536w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/pictogrammes-liste-2-2048x1152.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<h2 class=\"wp-block-heading\">B\u00e9n\u00e9ficiez de la biblioth\u00e8que de pictogramme et d&rsquo;ic\u00f4nes du DSFR<\/h2>\n\n\n\n<p>Un pictogramme aide l\u2019utilisateur \u00e0 s\u2019orienter et \u00e0 comprendre les interfaces gr\u00e2ce \u00e0 une reconnaissance visuelle et imm\u00e9diate. Les pictogrammes du DSFR sont : Explicites, Coh\u00e9rents et Rassurants<\/p>\n\n\n\n<div class=\"wp-block-buttons is-vertical is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-link\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.figma.com\/community\/file\/1098654384051611363\/dsfr-pictogrammes-v1-12-0\">Voir le document de design<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--80)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Exemples de tuiles<\/h2>\n\n\n\n<div class=\"fr-tiles-group\" style=\"--tiles-by-line:1;--tiles-by-line-sm:2;--tiles-by-line-md:3\">\n<div class=\"fr-tile fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Tuile verticale<\/a><\/h3><p class=\"fr-tile__desc\">Ceci est la description<\/p><p class=\"fr-tile__detail\">Voici un texte de pr\u00e9cisions<\/p><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/innovation-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n\n\n\n<div class=\"fr-tile fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Tuile verticale<\/a><\/h3><p class=\"fr-tile__desc\">Ceci est la description<\/p><p class=\"fr-tile__detail\">Voici un texte de pr\u00e9cisions<\/p><div class=\"fr-tile__start\"><p class=\"fr-tag\">Avec un tag<\/p><\/div><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/map-pin-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n\n\n\n<div class=\"fr-tile fr-tile--no-icon fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Tuile sans fl\u00e8che<\/a><\/h3><p class=\"fr-tile__desc\">Ceci est la description<\/p><p class=\"fr-tile__detail\"><\/p><div class=\"fr-tile__start\"><p class=\"fr-badge fr-badge--purple-glycine\">Avec un badge<\/p><\/div><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/compass-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n<\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--80)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"fr-tiles-group\" style=\"--tiles-by-line:1;--tiles-by-line-sm:1;--tiles-by-line-md:2\">\n<div class=\"fr-tile fr-tile--horizontal fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Tuile horizontale<\/a><\/h3><p class=\"fr-tile__desc\">Ceci est la description<\/p><p class=\"fr-tile__detail\">Voici un texte de pr\u00e9cisions<\/p><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/innovation-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n\n\n\n<div class=\"fr-tile fr-tile--horizontal fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Tuile horizontale<\/a><\/h3><p class=\"fr-tile__desc\"><\/p><p class=\"fr-tile__detail\"><\/p><div class=\"fr-tile__start\"><p class=\"fr-tag\">Avec un tag<\/p><\/div><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/map-pin-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n\n\n\n<div class=\"fr-tile fr-tile--horizontal fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Tuile horizontale<\/a><\/h3><p class=\"fr-tile__desc\">Ceci est la description<\/p><p class=\"fr-tile__detail\"><\/p><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/compass-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n\n\n\n<div class=\"fr-tile fr-tile--horizontal fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"\" rel=\"noopener\">Tuile horizontale<\/a><\/h3><p class=\"fr-tile__desc\"><\/p><p class=\"fr-tile__detail\"><\/p><div class=\"fr-tile__start\"><p class=\"fr-badge fr-badge--green-emeraude\">Avec un badge<\/p><\/div><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/mail-send-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n<\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--80)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Exemples d&rsquo;utilisations<\/h2>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<h2 class=\"wp-block-heading\">Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\n<div class=\"fr-tiles-group\" style=\"--tiles-by-line:1;--tiles-by-line-sm:2;--tiles-by-line-md:3\">\n<div class=\"fr-tile fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Lorem ipsum<\/a><\/h3><p class=\"fr-tile__desc\"><\/p><p class=\"fr-tile__detail\"><\/p><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/success-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n\n\n\n<div class=\"fr-tile fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Lorem ipsum<\/a><\/h3><p class=\"fr-tile__desc\"><\/p><p class=\"fr-tile__detail\"><\/p><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/success-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n\n\n\n<div class=\"fr-tile fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Lorem ipsum<\/a><\/h3><p class=\"fr-tile__desc\"><\/p><p class=\"fr-tile__detail\"><\/p><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/success-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--80)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading alignwide\">Lorem ipsum dolor sit amet<\/h2>\n\n\n\n<div class=\"fr-tiles-group alignwide\" style=\"--tiles-by-line:1;--tiles-by-line-sm:2;--tiles-by-line-md:3\">\n<div class=\"fr-tile fr-tile--horizontal fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Lorem ipsum<\/a><\/h3><p class=\"fr-tile__desc\"><\/p><p class=\"fr-tile__detail\"><\/p><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/success-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n\n\n\n<div class=\"fr-tile fr-tile--horizontal fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Lorem ipsum<\/a><\/h3><p class=\"fr-tile__desc\"><\/p><p class=\"fr-tile__detail\"><\/p><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/success-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n\n\n\n<div class=\"fr-tile fr-tile--horizontal fr-enlarge-link\"><div class=\"fr-tile__body\"><div class=\"fr-tile__content\"><h3 class=\"fr-tile__title\"><a href=\"#\" target=\"_self\" rel=\"noopener\">Lorem ipsum<\/a><\/h3><p class=\"fr-tile__desc\"><\/p><p class=\"fr-tile__detail\"><\/p><\/div><\/div><div class=\"fr-tile__header\"><div class=\"fr-tile__pictogram\"><img decoding=\"async\" class=\"fr-ratio-1x1\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/success-2-150x150.png\" alt=\"\"\/><\/div><\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tuiles La tuile est un raccourci ou point d\u2019entr\u00e9e qui redirige les utilisateurs vers des pages de contenu. Elle fait g\u00e9n\u00e9ralement partie d&rsquo;une collection ou liste de tuiles similaires. La tuile n\u2019est jamais pr\u00e9sent\u00e9e de mani\u00e8re isol\u00e9e. Elle se compose des \u00e9l\u00e9ments suivants : Exemples de tuiles Exemples d&rsquo;utilisations Lorem ipsum dolor sit amet, consectetur [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":30,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/empty-page.php","meta":{"footnotes":""},"class_list":["post-319","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/comments?post=319"}],"version-history":[{"count":4,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/319\/revisions"}],"predecessor-version":[{"id":552,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/319\/revisions\/552"}],"up":[{"embeddable":true,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/30"}],"wp:attachment":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/media?parent=319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}