{"id":133,"date":"2024-05-28T18:09:00","date_gmt":"2024-05-28T16:09:00","guid":{"rendered":"https:\/\/wp-dsfr.fr\/demo\/?page_id=133"},"modified":"2025-03-24T09:55:19","modified_gmt":"2025-03-24T08:55:19","slug":"mise-en-avant","status":"publish","type":"page","link":"https:\/\/wp-dsfr.fr\/demo\/liste-des-blocs-wordpress-du-dsfr\/mise-en-avant\/","title":{"rendered":"Mise en avant"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Mise en avant<\/h1>\n\n\n\n<p class=\"has-xl-font-size\">La mise en avant permet \u00e0 l\u2019utilisateur de distinguer rapidement une information qui vient compl\u00e9ter le contenu consult\u00e9. C&rsquo;est une proposition de mise en page du contenu \u00e9ditorial pour mettre en \u00e9vidence une information compl\u00e9mentaire.<\/p>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading fr-callout__title\">Ceci est une mise en avant<\/h2>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description de l&rsquo;information \u00e0 mettre en avant dans un contenu \u00e9ditorial.<\/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\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wp-dsfr.fr\/demo\/\">Cliquez-moi<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Variations<\/h2>\n\n\n\n<p>L&rsquo;ic\u00f4ne et le bouton aussi sont optionnels.<\/p>\n\n\n\n<div class=\"wp-block-group fr-callout\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">Ceci est une mise en avant sans ic\u00f4ne<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description de l&rsquo;information \u00e0 mettre en avant dans un contenu \u00e9ditorial.<\/p>\n<\/div><\/div>\n\n\n\n<p>L&rsquo;ic\u00f4ne est aussi modifiable, elle aide \u00e0 la compr\u00e9hension du message.<\/p>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-search-line\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">L&rsquo;ic\u00f4ne de cette mise en avant est diff\u00e9rente<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description de l&rsquo;information \u00e0 mettre en avant dans un contenu \u00e9ditorial.<\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Styles avec palette de couleur<\/h2>\n\n\n\n<p>Les \u00e9l\u00e9ments fond et bordure peuvent utiliser les couleurs illustratives.<\/p>\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-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group fr-callout fr-icon-information-line\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">default-blue-france<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--green-tilleul-verveine\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">green-tilleul-verveine<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--green-bourgeon\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\"><code>green-bourgeon<\/code><\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--green-emeraude\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\"><code>green-emeraude<\/code><\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--green-menthe\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\"><code>green-menth<\/code>e<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--green-archipel\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\"><code>green-archipel<\/code><\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--blue-ecume\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">blue-ecume<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--blue-cumulus\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">blue-cumulus<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--purple-glycine\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">purple-glycine<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--pink-macaron\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">pink-macaron<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--pink-tuile\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">pink-tuile<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--yellow-tournesol\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">yellow-tournesol<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--yellow-moutarde\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">yellow-moutarde<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--orange-terre-battue\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">orange-terre-battue<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--brown-cafe-creme\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">brown-cafe-creme<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--brown-caramel\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">brown-caramel<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--brown-opera\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">brown-opera<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group fr-callout fr-icon-information-line fr-callout--beige-gris-galet\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading fr-callout__title\">beige-gris-galet<\/h3>\n\n\n\n<p class=\"has-lg-font-size\">Avec un paragraphe de description.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Mise en avant La mise en avant permet \u00e0 l\u2019utilisateur de distinguer rapidement une information qui vient compl\u00e9ter le contenu consult\u00e9. C&rsquo;est une proposition de mise en page du contenu \u00e9ditorial pour mettre en \u00e9vidence une information compl\u00e9mentaire. Ceci est une mise en avant Avec un paragraphe de description de l&rsquo;information \u00e0 mettre en avant [&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-133","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/133","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=133"}],"version-history":[{"count":2,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/133\/revisions"}],"predecessor-version":[{"id":578,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/133\/revisions\/578"}],"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=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}