DSFR v1.12.1
Le gestionnaire de consentement permet à l'utilisateur de définir ses préférences sur l'utilisation de ses données personnelles.
Documentation<div class="fr-consent-banner">
<h2 class="fr-h6">À propos des cookies sur nomdusite.fr</h2>
<div class="fr-consent-banner__content">
<p class="fr-text--sm">Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les services disponibles sur ce site. Pour en savoir plus, visitez la page <a href="">Données personnelles et cookies</a>. Vous pouvez, à tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.</p>
</div>
<ul class="fr-consent-banner__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">
<li>
<button id="button-4560" title="Autoriser tous les cookies" class="fr-btn">Tout accepter</button>
</li>
<li>
<button id="button-4561" title="Refuser tous les cookies" class="fr-btn">Tout refuser</button>
</li>
<li>
<button data-fr-opened="false" aria-controls="fr-consent-modal" id="button-4562" title="Personnaliser les cookies" class="fr-btn fr-btn--secondary">Personnaliser</button>
</li>
</ul>
</div>
<dialog id="fr-consent-modal" class="fr-modal" aria-labelledby="fr-consent-modal-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button aria-controls="fr-consent-modal" id="button-4567" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-consent-modal-title" class="fr-modal__title">
Panneau de gestion des cookies
</h1>
<div class="fr-consent-manager">
<!-- Finalités -->
<div class="fr-consent-service fr-consent-manager__header">
<fieldset class="fr-fieldset">
<legend id="finality-legend" class="fr-consent-service__title">Préférences pour tous les services. <a href="">Données personnelles et cookies</a>
</legend>
<div class="fr-consent-service__radios">
<div class="fr-radio-group">
<input type="radio" id="consent-all-accept" name="consent-all">
<label class="fr-label" for="consent-all-accept">
Tout accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-all-refuse" name="consent-all">
<label class="fr-label" for="consent-all-refuse">
Tout refuser
</label>
</div>
</div>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset aria-labelledby="finality-0-legend finality-0-desc" role="group" class="fr-fieldset">
<legend id="finality-0-legend" class="fr-consent-service__title">Cookies obligatoires</legend>
<div class="fr-consent-service__radios">
<div class="fr-radio-group">
<input checked type="radio" id="consent-finality-0-accept" name="consent-finality-0">
<label class="fr-label" for="consent-finality-0-accept">
Accepter
</label>
</div>
<div class="fr-radio-group">
<input disabled type="radio" id="consent-finality-0-refuse" name="consent-finality-0">
<label class="fr-label" for="consent-finality-0-refuse">
Refuser
</label>
</div>
</div>
<p id="finality-0-desc" class="fr-consent-service__desc">Ce site utilise des cookies nécessaires à son bon fonctionnement qui ne peuvent pas être désactivés.</p>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset aria-labelledby="finality-1-legend finality-1-desc" role="group" class="fr-fieldset">
<legend id="finality-1-legend" class="fr-consent-service__title">Nom de la finalité</legend>
<div class="fr-consent-service__radios">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-accept" name="consent-finality-1">
<label class="fr-label" for="consent-finality-1-accept">
Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-refuse" name="consent-finality-1">
<label class="fr-label" for="consent-finality-1-refuse">
Refuser
</label>
</div>
</div>
<p id="finality-1-desc" class="fr-consent-service__desc">Description optionnelle de la finalité, lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in suscipit nulla, et pulvinar velit.</p>
<div class="fr-consent-service__collapse">
<button class="fr-consent-service__collapse-btn" aria-expanded="false" aria-describedby="finality-1-legend" aria-controls="finality-1-collapse"> Voir plus de détails</button>
</div>
<div class="fr-consent-services fr-collapse" id="finality-1-collapse">
<!-- Sous finalités -->
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend id="finality-1-service-1-legend" class="fr-consent-service__title">Sous finalité 1</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-1-accept" name="consent-finality-1-service-1">
<label class="fr-label" for="consent-finality-1-service-1-accept">
Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-1-refuse" name="consent-finality-1-service-1">
<label class="fr-label" for="consent-finality-1-service-1-refuse">
Refuser
</label>
</div>
</div>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset aria-labelledby="finality-1-service-2-legend finality-1-service-2-desc" role="group" class="fr-fieldset fr-fieldset--inline">
<legend id="finality-1-service-2-legend" class="fr-consent-service__title" aria-describedby="finality-1-service-2-desc">Sous finalité 2</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-2-accept" name="consent-finality-1-service-2">
<label class="fr-label" for="consent-finality-1-service-2-accept">
Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-2-refuse" name="consent-finality-1-service-2">
<label class="fr-label" for="consent-finality-1-service-2-refuse">
Refuser
</label>
</div>
</div>
<p id="finality-1-service-2-desc" class="fr-consent-service__desc">Ce service utilise 3 cookies.</p>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend id="finality-1-service-3-legend" class="fr-consent-service__title">Sous finalité 3</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-3-accept" name="consent-finality-1-service-3">
<label class="fr-label" for="consent-finality-1-service-3-accept">
Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-3-refuse" name="consent-finality-1-service-3">
<label class="fr-label" for="consent-finality-1-service-3-refuse">
Refuser
</label>
</div>
</div>
</fieldset>
</div>
</div>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset aria-labelledby="finality-2-legend finality-2-desc" role="group" class="fr-fieldset">
<legend id="finality-2-legend" class="fr-consent-service__title">Nom de la finalité</legend>
<div class="fr-consent-service__radios">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-accept" name="consent-finality-2">
<label class="fr-label" for="consent-finality-2-accept">
Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-refuse" name="consent-finality-2">
<label class="fr-label" for="consent-finality-2-refuse">
Refuser
</label>
</div>
</div>
<p id="finality-2-desc" class="fr-consent-service__desc">Description optionnelle de la finalité, lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in suscipit nulla, et pulvinar velit.</p>
<div class="fr-consent-service__collapse">
<button class="fr-consent-service__collapse-btn" aria-expanded="false" aria-describedby="finality-2-legend" aria-controls="finality-2-collapse"> Voir plus de détails</button>
</div>
<div class="fr-consent-services fr-collapse" id="finality-2-collapse">
<!-- Sous finalités -->
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend id="finality-2-service-1-legend" class="fr-consent-service__title">Sous finalité 1</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-1-accept" name="consent-finality-2-service-1">
<label class="fr-label" for="consent-finality-2-service-1-accept">
Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-1-refuse" name="consent-finality-2-service-1">
<label class="fr-label" for="consent-finality-2-service-1-refuse">
Refuser
</label>
</div>
</div>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset aria-labelledby="finality-2-service-2-legend finality-2-service-2-desc" role="group" class="fr-fieldset fr-fieldset--inline">
<legend id="finality-2-service-2-legend" class="fr-consent-service__title" aria-describedby="finality-2-service-2-desc">Sous finalité 2</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-2-accept" name="consent-finality-2-service-2">
<label class="fr-label" for="consent-finality-2-service-2-accept">
Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-2-refuse" name="consent-finality-2-service-2">
<label class="fr-label" for="consent-finality-2-service-2-refuse">
Refuser
</label>
</div>
</div>
<p id="finality-2-service-2-desc" class="fr-consent-service__desc">Ce service utilise 3 cookies.</p>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend id="finality-2-service-3-legend" class="fr-consent-service__title">Sous finalité 3</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-3-accept" name="consent-finality-2-service-3">
<label class="fr-label" for="consent-finality-2-service-3-accept">
Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-3-refuse" name="consent-finality-2-service-3">
<label class="fr-label" for="consent-finality-2-service-3-refuse">
Refuser
</label>
</div>
</div>
</fieldset>
</div>
</div>
</fieldset>
</div>
<!-- Bouton de confirmation/fermeture -->
<ul class="fr-consent-manager__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-sm">
<li>
<button id="button-4566" class="fr-btn">Confirmer mes choix</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
<div class="fr-consent-placeholder">
<h4 class="fr-h6">**Nom du service** est désactivé</h4>
<p>Autorisez le dépôt de cookies pour accéder à cette fonctionnalité.</p>
<button id="button-4570" title="Autorisez le dépôt de cookies pour accéder au service **Nom du service**" class="fr-btn">Autoriser</button>
</div>
<figure role="group" class="fr-content-media fr-content-media--lg" id="media-4580">
<div class="fr-responsive-vid">
<div class="fr-consent-placeholder">
<h4 class="fr-h6">**Nom du service** est désactivé</h4>
<p>Autorisez le dépôt de cookies pour accèder à cette fonctionnalité.</p>
<button id="button-4582" class="fr-btn">Autoriser</button>
</div>
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a id="link-4583" href="[url - à modifier]" class="fr-link">Libellé lien</a>
</figcaption>
</figure>
<div class="fr-transcription" id="transcription-4581">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-4581">Transcription</button>
<div class="fr-collapse" id="fr-transcription-collapse-transcription-4581">
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button aria-controls="fr-transcription-modal-transcription-4581" aria-label="Agrandir la transcription" data-fr-opened="false" id="button-4585" class="fr-btn--fullscreen fr-btn">Agrandir</button>
</div>
</div>
<div id="fr-transcription-modal-transcription-4581" class="fr-modal" aria-labelledby="fr-transcription-modal-transcription-4581-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button aria-controls="fr-transcription-modal-transcription-4581" id="button-4586" title="Fermer" class="fr-btn--close fr-btn">Fermer</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription-modal-transcription-4581-title" class="fr-modal__title">
Titre de la transcription
</h1>
<!-- données de test -->
<div>
<ul>
<li>list item</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>