Bloc marque (Logo)

Utilisez le bloc marque pour afficher la Marianne ou l’identité institutionnelle dans un en-tête ou un pied de page.

attention

Ce composant nécessite une licence Pro valide en production.

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:logo

Usage

• Le texte officiel est rendu par le composant.
• Utilisez une taille adaptée au contexte de mise en page.

Modes d'utilisation

Exemple principal

Bloc marque · exemple principal

<twig:dsfr:logo label="République<br>Française" size="lg" />

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:logo
  id="bloc-marque-example"
  class="fr-mt-2w"
  data-controller="bloc-marque"
/>

API publique

Composant	Rôle
dsfr:logo	Composant principal de cette page.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
label	string	Requis	Libellé du bloc marque, peut contenir <br>.
size	enum	md	md, sm, lg
href	string|null	Selon composant	URL de destination. Les URL sont normalisées.
title	string|null	null	Titre du lien si le logo est cliquable.

Guide d'intégration

Question	Réponse
Famille DSFR	Mise en page
Quand l'utiliser	Quand vous composez une page, une zone transverse ou un bloc structurel réutilisable.
Quand éviter	Pour corriger un espacement local : utilisez d’abord les props et classes utilitaires DSFR prévues.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:logo.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Bloc marque : options, accessibilité et rendu DSFR

Variantes de bloc marque

• tailles disponibles via size quand le DSFR expose une variante compacte ou large.

Points de contrôle propres à ce composant

• Le texte officiel est rendu par le composant.
• Utilisez une taille adaptée au contexte de mise en page.
• Contrôlez le rendu lien/action selon la présence de href et le libellé annoncé au clavier.

Accessibilité mise en page

• Le composant ne remplace pas les landmarks de votre page : gardez main, nav, aside, section côté application.
• Les zones transverses doivent rester identifiables et cohérentes entre les pages.
• Vérifiez les ruptures responsive sur mobile, tablette et desktop.

Intégration Symfony/Twig pour dsfr:logo

• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:logo quand ils concernent son nœud racine.

Checklist de recette

• rendu mobile sans débordement
• landmarks présents dans la page
• comportement thème clair/sombre si concerné
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.
Le composant rend en local mais pas en production	Vérifiez la licence avec php bin/console dsfr:license:validate.