` avec la classe `fr-consent-placeholder` pour le conteneur du placeholder. - Un titre "[Nom du service] est désactivé" contenu dans un élément ``, en fonction du contexte, avec la classe `.fr-h6`. Vous pouvez utiliser une classe utilitaire pour ajouter une marge en bas en fonction du besoin, ex : `.fr-mb-2v`. - Un bloc de texte `

` décrivant pourquoi le contenu est masqué. Vous pouvez utiliser une classe utilitaire pour ajouter une marge en bas en fonction du besoin, ex : `.fr-mb-6v`. - Un bouton primaire pour autoriser le dépôt de cookies et accéder au contenu. **Exemple de structure HTML de placeholder** ```HTML

``` --- ### CSS #### Installation du CSS Pour fonctionner correctement le style CSS du composant et de ses dépendances doivent être importés. L'import doit se faire avant le contenu de la page dans la partie ``, et de préférence avec les fichiers minifiés, car plus légers. Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la [documentation dédiée](path:/getting-started/developer/get-started#les-css). :::fr-table[Dépendances CSS]{valign=top scroll=false} | Dépendance | Obligatoire | |------------|-------------| | Core | Oui | | Link | Oui | | Button | Oui | | Form | Oui | | Radio | Oui | | Modal | Oui | | Consent | Oui | ::: **Exemple d'imports CSS** ```HTML ``` #### Style du composant Aucune variation de style n'est possible pour le composant Gestionnaire de consentement. --- ### JavaScript Le composant Gestionnaire de consentement utilise le JavaScript du composant [Modale](../../../../modal/_part/doc/code/index.md), et du core pour le collapse des sous finalités dans la modale de gestion des cookies. #### Installation du JavaScript Pour fonctionner, la modale de gestion des cookies nécessite l'utilisation de JavaScript. Il est donc nécessaire d'importer ces fichiers à la fin de la page (avant ``) : ```HTML ``` NB: Il est aussi possible d'importer le Js global du DSFR `dsfr.module.min.js` Pour fonctionner sur Internet Explorer 11, un fichier legacy, en version nomodule ES5, peut aussi être importé : ```HTML ``` Une fois le JavaScript chargé, le composant fonctionne automatiquement. #### API Le composant Gestionnaire de consentement est proposé de manière **statique**. Il convient d'utiliser l'API de la plateforme de gestion du consentement (CMP) de votre choix pour l'intégrer au sein de la structure du composant DSFR. #### Événements Le Système de Design fournit des événements personnalisés pour les actions uniques de la part de certains composants réactifs listés sur la page de l'[API Javascript](path:/getting-started/developer/javascript). Sur la modale de gestion des cookies, les événements suivants sont disponibles : :::fr-table[événements]{valign=top multiline=true caption=false} | Événement | Action | Élément | Attribut | |------|------|------|------| | `dsfr.conceal` | Fermeture de la modale | Modal | `data-fr-js-modal` | | `dsfr.disclose` | Ouverture de la modale | Modal | `data-fr-js-modal` | | `dsfr.click` | Click sur le bouton d'ouverture | ModalButton | `data-fr-js-modal-button` | ::: --- ### Thème DSFR pour Tarteaucitron Il existe un thème DSFR pour le gestionnaire de consentement Tarteaucitron. Il s'agit d'une surcouche CSS pour adapter le gestionnaire de consentement de Tarteaucitron au design du DSFR. Vous pouvez trouvez ce projet sur le dépôt GIT [GouvernementFR/dsfr-theme-tarteaucitron](https://github.com/GouvernementFR/dsfr-theme-tarteaucitron) > [!NOTE] > Il n’y a aucune dépendance au DSFR - le thème propose sa propre CSS pour simuler le design du composant DSFR. Le code HTML et JS sont ceux de tarteaucitron. Le thème a été testé sur les versions 1.9.1, 1.8.4 et 1.8.3 de tarteaucitron, avec les libellés de boutons présent dans le bandeaux de consentement ci-dessus ('Personnaliser', ‘Tout refuser’, ‘Tout accepter’). Il est toutefois recommandé, dans la mesure du possible, d'**utiliser la structure HTML du composant DSFR** telle quelle, plutôt que thématiser une CMP, un pour garantir une meilleure intégration et une bonne maintenabilité. --- ### Note de version [Voir les évolutions sur github](https://github.com/GouvernementFR/dsfr/pulls?q=is%3Apr+is%3Aclosed+is%3Amerged+consent+) ::dsfr-doc-changelog

À propos des cookies sur nomdusite.gouv.fr

**Nom du service** est désactivé

Nom du service est désactivé