{"id":338,"date":"2024-06-20T11:41:45","date_gmt":"2024-06-20T09:41:45","guid":{"rendered":"https:\/\/wp-dsfr.fr\/demo\/?page_id=338"},"modified":"2024-09-02T13:09:54","modified_gmt":"2024-09-02T11:09:54","slug":"hero-accueil","status":"publish","type":"page","link":"https:\/\/wp-dsfr.fr\/demo\/liste-des-blocs-wordpress-du-dsfr\/hero-accueil\/","title":{"rendered":"Hero Accueil"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Hero Accueil<\/h1>\n\n\n\n<p class=\"has-xl-font-size\">Ce hero est utile pour pr\u00e9senter votre site web ou votre landing page, avec un grand titre, un court texte d&rsquo;introduction, des boutons pour les actions principales de votre site ainsi qu&rsquo;un visuel.<\/p>\n\n\n\n<header class=\"wp-block-group alignfull wp-block-group--hero\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\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-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h2 class=\"wp-block-heading is-style-flag-fr has-display-sm-font-size\">Hero d&rsquo;accueil<\/h2>\n\n\n\n<p class=\"has-xl-font-size\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button fr-btn--lg\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Action primaire<\/a><\/div>\n\n\n\n<div class=\"wp-block-button fr-btn--lg is-style-secondary\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Action secondaire<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"626\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/delacroix_liberte-2-1024x626.jpeg\" alt=\"\" class=\"wp-image-372\" srcset=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/delacroix_liberte-2-1024x626.jpeg 1024w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/delacroix_liberte-2-300x184.jpeg 300w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/delacroix_liberte-2-768x470.jpeg 768w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/delacroix_liberte-2.jpeg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div><\/header>\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\">Exemple d&rsquo;utilisation<\/h2>\n\n\n\n<header class=\"wp-block-group alignfull wp-block-group--hero\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h2 class=\"wp-block-heading is-style-default has-h-1-font-size\">Hero avec un titre de site l\u00e9g\u00e8rement plus long<\/h2>\n\n\n\n<p class=\"has-xl-font-size\">Faites varier la taille du titre selon sa longueur et son importance sur votre site web. De plus, le liserait bleu blanc rouge peut-\u00eatre retir\u00e9 dans les styles de titre.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button fr-btn--lg\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Action primaire<\/a><\/div>\n\n\n\n<div class=\"wp-block-button fr-btn--lg is-style-secondary\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Action secondaire<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/elysee-parvis-2-1024x683.jpeg\" alt=\"\" class=\"wp-image-8\" srcset=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/elysee-parvis-2-1024x683.jpeg 1024w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/elysee-parvis-2-300x200.jpeg 300w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/elysee-parvis-2-768x512.jpeg 768w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/elysee-parvis-2-1536x1024.jpeg 1536w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/05\/elysee-parvis-2-2048x1366.jpeg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div><\/header>\n\n\n\n<header class=\"wp-block-group alignfull wp-block-group--hero has-background-alt-blue-france-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h2 class=\"wp-block-heading is-style-flag-fr has-display-sm-font-size\">Hero sur fond bleu<\/h2>\n\n\n\n<p class=\"has-xl-font-size\">Une variation existe avec un fond bleu pour appuyer davantage l&rsquo;importance de ce hero<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"626\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/delacroix_liberte-2-1024x626.jpeg\" alt=\"\" class=\"wp-image-372\" srcset=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/delacroix_liberte-2-1024x626.jpeg 1024w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/delacroix_liberte-2-300x184.jpeg 300w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/delacroix_liberte-2-768x470.jpeg 768w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/delacroix_liberte-2.jpeg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div><\/header>\n","protected":false},"excerpt":{"rendered":"<p>Hero Accueil Ce hero est utile pour pr\u00e9senter votre site web ou votre landing page, avec un grand titre, un court texte d&rsquo;introduction, des boutons pour les actions principales de votre site ainsi qu&rsquo;un visuel. Hero d&rsquo;accueil Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna [&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-338","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/338","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=338"}],"version-history":[{"count":4,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/338\/revisions"}],"predecessor-version":[{"id":478,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/338\/revisions\/478"}],"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=338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}