{"id":153,"date":"2024-05-30T11:19:36","date_gmt":"2024-05-30T09:19:36","guid":{"rendered":"https:\/\/wp-dsfr.fr\/demo\/?page_id=153"},"modified":"2024-09-02T13:43:04","modified_gmt":"2024-09-02T11:43:04","slug":"badges","status":"publish","type":"page","link":"https:\/\/wp-dsfr.fr\/demo\/liste-des-blocs-wordpress-du-dsfr\/badges\/","title":{"rendered":"Badges"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Badge<\/h1>\n\n\n\n<p class=\"has-xl-font-size\">La composition badge permet de mettre en avant une information de type \u201cstatut\u201d ou \u201c\u00e9tat\u201d sur un \u00e9l\u00e9ment du site. Le badge n\u2019est pas un composant \u2018cliquable\u2019. Il doit \u00eatre associ\u00e9 \u00e0 une information donn\u00e9e sur une page pour pr\u00e9ciser le statut ou l&rsquo;\u00e9tat associ\u00e9e \u00e0 cette information.<\/p>\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=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Badges simple<\/h2>\n\n\n\n<p class=\"fr-badge\">Badge simple<\/p>\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\">Liste de badges<\/h2>\n\n\n\n<ul class=\"fr-badges-group wp-block-list\">\n<li class=\"fr-badge\">Badge simple<\/li>\n\n\n\n<li class=\"fr-badge\">Badge simple <\/li>\n\n\n\n<li class=\"fr-badge\">badge simple<\/li>\n\n\n\n<li class=\"fr-badge\">Badge simple<\/li>\n<\/ul>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--80)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Badge syst\u00e8me (avec ic\u00f4ne optionnelle)<\/h3>\n\n\n\n<p>Cette variante peut \u00eatre utilis\u00e9e pour pr\u00e9ciser l\u2019information donn\u00e9e par le texte du badge. Elle doit \u00eatre obligatoirement et uniquement utilis\u00e9e quand les couleurs \u2018fonctionnelles\u2019 sont utilis\u00e9es. L\u2019ic\u00f4ne syst\u00e8me est optionnelle.<\/p>\n\n\n\n<ul class=\"fr-badges-group wp-block-list\">\n<li class=\"fr-badge fr-badge--success\">Badge succ\u00e8s<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--error\">Badge erreur<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--info\">badge informations<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--warning\">Badge avertissement<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--new\">badge nouveaut\u00e9<\/li>\n<\/ul>\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\">Personnalisation<\/h2>\n\n\n\n<p>Il est possible d\u2019utiliser les couleurs illustratives sur les badges \u2018standard\u2019 uniquement<\/p>\n\n\n\n<ul class=\"fr-badges-group wp-block-list\">\n<li class=\"fr-badge fr-badge--green-tilleul-verveine\">Tilleul verveine<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--green-bourgeon\">bourgeon<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--green-emeraude\">\u00c9meraude<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--green-menthe\">Menthe<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--green-archipel\">Archipel<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--blue-ecume\">\u00c9cume<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--blue-cumulus\">Cumulus<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--purple-glycine\">Glycine<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--pink-macaron\">Macaron<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--pink-tuile\">Tuile<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--yellow-tournesol\">Tournesol<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--yellow-moutarde\">Moutarde<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--orange-terre-battue\">Terre battue<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--brown-cafe-creme\">Caf\u00e9 cr\u00e8me<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--brown-caramel\">Caramel<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--brown-opera\">Op\u00e9ra<\/li>\n\n\n\n<li class=\"fr-badge fr-badge--beige-gris-galet\">Gris galet<\/li>\n<\/ul>\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\">Exemple d&rsquo;utilisation<\/h2>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-center\"><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<ul class=\"fr-badges-group wp-block-list\">\n<li class=\"fr-badge fr-badge--new\">nouveau<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Les pictogrammes du DSFR<\/h2>\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:\/\/www.figma.com\/community\/file\/1098654384051611363\/dsfr-pictogrammes-v1-12-0\">D\u00e9couvrir les pictogrammes<\/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","protected":false},"excerpt":{"rendered":"<p>Badge La composition badge permet de mettre en avant une information de type \u201cstatut\u201d ou \u201c\u00e9tat\u201d sur un \u00e9l\u00e9ment du site. Le badge n\u2019est pas un composant \u2018cliquable\u2019. Il doit \u00eatre associ\u00e9 \u00e0 une information donn\u00e9e sur une page pour pr\u00e9ciser le statut ou l&rsquo;\u00e9tat associ\u00e9e \u00e0 cette information. Badges simple Badge simple Liste de [&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-153","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/153","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=153"}],"version-history":[{"count":1,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/153\/revisions"}],"predecessor-version":[{"id":502,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/153\/revisions\/502"}],"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=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}