Lettre d’information et réseaux sociaux (Follow)

Utilisez le bloc follow pour proposer l’inscription à une lettre d’information et des liens sociaux.

attention

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

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:follow

Usage

• Les liens sociaux doivent avoir un libellé clair.
• Utilisez une URL de soumission adaptée à votre formulaire.

Modes d'utilisation

Exemple principal

Lettre d’information et réseaux sociaux · exemple principal

<twig:dsfr:follow
  title="Abonnez-vous à la lettre d’information"
  newsletterHref="/newsletter"
  :socialLinks="[
    {label: 'LinkedIn', href: 'https://www.linkedin.com', icon: 'fr-icon-linkedin-box-fill'}
  ]"
/>

Données

La prop socialLinks accepte un tableau PHP/Twig. En Twig, préfixez la prop par : pour transmettre une vraie structure de données.

Syntaxe typée Twig Component

{# Le préfixe : garde le type tableau/booléen/numérique. #}
<twig:dsfr:follow :socialLinks="socialLinks" />

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:follow
  id="lettre-information-reseaux-sociaux-example"
  class="fr-mt-2w"
  data-controller="lettre-information-reseaux-sociaux"
/>

API publique

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

Configuration

Option	Type	Défaut / requis	Valeurs et usage
title	string	Requis ou défaut selon composant	Titre visible du composant.
description	string|null	null	Texte d’introduction.
newsletterHref	string|null	null	URL d’inscription.
newsletterLabel / emailLabel	string	Défauts DSFR	Libellés de la newsletter.
socialTitle	string	Suivez-nous sur les réseaux sociaux	Titre des réseaux.
socialLinks	array|string	[]	Liens { label, href, icon }.

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:follow.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Lettre d’information et réseaux sociaux : données typées via socialLinks

Variantes de lettre d’information et réseaux sociaux

• lettre d’information et réseaux sociaux avec attributs HTML pass-through pour id, class, data-* et aria-* quand le template le permet.

Points de contrôle propres à ce composant

• Les liens sociaux doivent avoir un libellé clair.
• Utilisez une URL de soumission adaptée à votre formulaire.
• Vérifiez un cas vide, un cas avec plusieurs entrées et un cas avec données dynamiques pour socialLinks.

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:follow

• Passez socialLinks avec la syntaxe : pour conserver le type tableau : :socialLinks="socialLinks".
• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:follow 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 données socialLinks ne sont pas prises en compte	Ajoutez : devant la prop Twig : :socialLinks.
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.