Le bloc "Lettre d'information et Réseaux Sociaux" est composé d'un bloc permettant à l’utilisateur de s’inscrire à la newsletter de l’organisation et/ou d'un bloc de liens permettant d’accéder aux réseaux sociaux de l’organisation depuis le pied de page.
DocumentationLes icones réseaux sociaux disponibles pour ce composant sont définies dans :
////
/// Logo Setting
/// @group logo
////
$follow-icons: (
dailymotion: dailymotion-fill,
facebook: facebook-circle-fill,
github: github-fill,
instagram: instagram-fill,
linkedin: linkedin-box-fill,
mastodon: mastodon-fill,
snapchat: snapchat-fill,
telegram: telegram-fill,
threads: threads-fill,
tiktok: tiktok-fill,
twitch: twitch-fill,
twitter: twitter-fill,
twitter-x: twitter-x-fill,
vimeo: vimeo-fill,
youtube: youtube-fill,
);
Il est aussi possible d'appliquer une classe utilitaire sur un bouton pour utiliser une icone du dsfr (ex: "fr-icon-rss-line")
<div class="fr-follow" id="follow-4209">
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12">
<div class="fr-follow__social">
<h2 class="fr-h5">Suivez-nous
<br> sur les réseaux sociaux
</h2>
<ul class="fr-btns-group">
<li>
<a class="fr-btn--facebook fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4210" href="[À MODIFIER - Lien vers le facebook de l'organisation]">
Facebook
</a>
</li>
<li>
<a class="fr-btn--twitter-x fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4211" href="[À MODIFIER - Lien vers le twitter de l'organisation]">
X (anciennement Twitter)
</a>
</li>
<li>
<a class="fr-btn--linkedin fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4212" href="[À MODIFIER - Lien vers le linkedin de l'organisation]">
Linkedin
</a>
</li>
<li>
<a class="fr-btn--instagram fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4213" href="[À MODIFIER - Lien vers l'instagram de l'organisation]">
Instagram
</a>
</li>
<li>
<a class="fr-btn--youtube fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4214" href="[À MODIFIER - Lien vers le youtube de l'organisation]">
Youtube
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-follow" id="follow-4219">
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12">
<div class="fr-follow__newsletter">
<div>
<h2 class="fr-h5">Abonnez-vous à notre lettre d’information</h2>
<p class="fr-text--sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
</div>
<div>
<ul class="fr-btns-group fr-btns-group--inline-md">
<li>
<button class="fr-btn" id="newsletter-button-4218" title="S‘abonner à notre lettre d’information">
S'abonner
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-follow" id="follow-4227">
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12">
<div class="fr-follow__newsletter">
<div>
<h2 class="fr-h5">Abonnez-vous à notre lettre d’information</h2>
<p class="fr-text--sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
</div>
<div>
<form action="">
<div class="fr-input-group" id="input-group-4228">
<label class="fr-label" for="newsletter-email-4225">
Votre adresse électronique (ex. : nom@domaine.fr)
</label>
<div class="fr-input-wrap fr-input-wrap--addon">
<input class="fr-input" title="Votre adresse électronique (ex. : nom@domaine.fr)" autocomplete="email" attributes="[object Object]" aria-describedby="newsletter-email-4225-hint-text newsletter-email-4225-messages" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" id="newsletter-email-4225" type="email">
<button class="fr-btn" id="newsletter-button-4226" title="S‘abonner à notre lettre d’information" type="button">
S'abonner
</button>
</div>
<div class="fr-messages-group" id="newsletter-email-4225-messages" aria-live="polite">
</div>
</div>
<p id="newsletter-email-4225-hint-text" class="fr-hint-text">En renseignant votre adresse électronique, vous acceptez de recevoir nos actualités par courriel. Vous pouvez vous désinscrire à tout moment à l’aide des liens de désinscription ou en nous contactant.</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-follow" id="follow-4238">
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-8">
<div class="fr-follow__newsletter">
<div>
<h2 class="fr-h5">Abonnez-vous à notre lettre d’information</h2>
<p class="fr-text--sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
</div>
<div>
<ul class="fr-btns-group fr-btns-group--inline-md">
<li>
<button class="fr-btn" id="newsletter-button-4237" title="S‘abonner à notre lettre d’information">
S'abonner
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-follow__social">
<h2 class="fr-h5">Suivez-nous
<br> sur les réseaux sociaux
</h2>
<ul class="fr-btns-group">
<li>
<a class="fr-btn--facebook fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4239" href="[À MODIFIER - Lien vers le facebook de l'organisation]">
Facebook
</a>
</li>
<li>
<a class="fr-btn--twitter-x fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4240" href="[À MODIFIER - Lien vers le twitter de l'organisation]">
X (anciennement Twitter)
</a>
</li>
<li>
<a class="fr-btn--linkedin fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4241" href="[À MODIFIER - Lien vers le linkedin de l'organisation]">
Linkedin
</a>
</li>
<li>
<a class="fr-btn--instagram fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4242" href="[À MODIFIER - Lien vers l'instagram de l'organisation]">
Instagram
</a>
</li>
<li>
<a class="fr-btn--youtube fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4243" href="[À MODIFIER - Lien vers le youtube de l'organisation]">
Youtube
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-follow" id="follow-4256">
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-8">
<div class="fr-follow__newsletter">
<div>
<h2 class="fr-h5">Abonnez-vous à notre lettre d’information</h2>
<p class="fr-text--sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
</div>
<div>
<form action="">
<div class="fr-input-group" id="input-group-4257">
<label class="fr-label" for="newsletter-email-4254">
Votre adresse électronique (ex. : nom@domaine.fr)
</label>
<div class="fr-input-wrap fr-input-wrap--addon">
<input class="fr-input" title="Votre adresse électronique (ex. : nom@domaine.fr)" autocomplete="email" aria-describedby="newsletter-email-4254-hint-text newsletter-email-4254-messages" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" id="newsletter-email-4254" type="email">
<button class="fr-btn" id="newsletter-button-4255" title="S‘abonner à notre lettre d’information" type="button">
S'abonner
</button>
</div>
<div class="fr-messages-group" id="newsletter-email-4254-messages" aria-live="polite">
</div>
</div>
<p id="newsletter-email-4254-hint-text" class="fr-hint-text">En renseignant votre adresse électronique, vous acceptez de recevoir nos actualités par courriel. Vous pouvez vous désinscrire à tout moment à l’aide des liens de désinscription ou en nous contactant.</p>
</form>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-follow__social">
<h2 class="fr-h5">Suivez-nous
<br> sur les réseaux sociaux
</h2>
<ul class="fr-btns-group">
<li>
<a class="fr-btn--facebook fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4258" href="[À MODIFIER - Lien vers le facebook de l'organisation]">
Facebook
</a>
</li>
<li>
<a class="fr-btn--twitter-x fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4259" href="[À MODIFIER - Lien vers le twitter de l'organisation]">
X (anciennement Twitter)
</a>
</li>
<li>
<a class="fr-btn--linkedin fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4260" href="[À MODIFIER - Lien vers le linkedin de l'organisation]">
Linkedin
</a>
</li>
<li>
<a class="fr-btn--instagram fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4261" href="[À MODIFIER - Lien vers l'instagram de l'organisation]">
Instagram
</a>
</li>
<li>
<a class="fr-btn--youtube fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4262" href="[À MODIFIER - Lien vers le youtube de l'organisation]">
Youtube
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-follow" id="follow-4272">
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-8">
<div class="fr-follow__newsletter">
<div>
<h2 class="fr-h5">Abonnez-vous à notre lettre d’information</h2>
<p class="fr-text--sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
</div>
<div>
<div id="newsletter-alert-4271" class="fr-alert fr-alert--success">
<p>Votre inscription a bien été prise en compte.</p>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-follow__social">
<h2 class="fr-h5">Suivez-nous
<br> sur les réseaux sociaux
</h2>
<ul class="fr-btns-group">
<li>
<a class="fr-btn--facebook fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4273" href="[À MODIFIER - Lien vers le facebook de l'organisation]">
Facebook
</a>
</li>
<li>
<a class="fr-btn--twitter-x fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4274" href="[À MODIFIER - Lien vers le twitter de l'organisation]">
X (anciennement Twitter)
</a>
</li>
<li>
<a class="fr-btn--linkedin fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4275" href="[À MODIFIER - Lien vers le linkedin de l'organisation]">
Linkedin
</a>
</li>
<li>
<a class="fr-btn--instagram fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4276" href="[À MODIFIER - Lien vers l'instagram de l'organisation]">
Instagram
</a>
</li>
<li>
<a class="fr-btn--youtube fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4277" href="[À MODIFIER - Lien vers le youtube de l'organisation]">
Youtube
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-follow" id="follow-4290">
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-8">
<div class="fr-follow__newsletter">
<div>
<h2 class="fr-h5">Abonnez-vous à notre lettre d’information</h2>
<p class="fr-text--sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
</div>
<div>
<form action="">
<div class="fr-input-group fr-input-group--error" id="input-group-4291">
<label class="fr-label" for="newsletter-email-4288">
Votre adresse électronique (ex. : nom@domaine.fr)
</label>
<div class="fr-input-wrap fr-input-wrap--addon">
<input class="fr-input" title="Votre adresse électronique (ex. : nom@domaine.fr)" autocomplete="email" aria-describedby="newsletter-email-4288-hint-text newsletter-email-4288-messages" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" id="newsletter-email-4288" type="email">
<button class="fr-btn" id="newsletter-button-4289" title="S‘abonner à notre lettre d’information" type="button">
S'abonner
</button>
</div>
<div class="fr-messages-group" id="newsletter-email-4288-messages" aria-live="polite">
<p class="fr-message fr-message--error" id="newsletter-email-4288-message-error">Le format de l’adresse electronique saisie n’est pas valide. Le format attendu est : nom@exemple.org</p>
</div>
</div>
<p id="newsletter-email-4288-hint-text" class="fr-hint-text">En renseignant votre adresse électronique, vous acceptez de recevoir nos actualités par courriel. Vous pouvez vous désinscrire à tout moment à l’aide des liens de désinscription ou en nous contactant.</p>
</form>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-follow__social">
<h2 class="fr-h5">Suivez-nous
<br> sur les réseaux sociaux
</h2>
<ul class="fr-btns-group">
<li>
<a class="fr-btn--facebook fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4292" href="[À MODIFIER - Lien vers le facebook de l'organisation]">
Facebook
</a>
</li>
<li>
<a class="fr-btn--twitter-x fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4293" href="[À MODIFIER - Lien vers le twitter de l'organisation]">
X (anciennement Twitter)
</a>
</li>
<li>
<a class="fr-btn--linkedin fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4294" href="[À MODIFIER - Lien vers le linkedin de l'organisation]">
Linkedin
</a>
</li>
<li>
<a class="fr-btn--instagram fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4295" href="[À MODIFIER - Lien vers l'instagram de l'organisation]">
Instagram
</a>
</li>
<li>
<a class="fr-btn--youtube fr-btn" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4296" href="[À MODIFIER - Lien vers le youtube de l'organisation]">
Youtube
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
<div class="fr-follow">
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12">
<div class="fr-follow__social">
<p class="fr-h5">Suivez-nous
<br> sur les réseaux sociaux
</p>
<ul class="fr-links-group">
<li>
<a class="fr-link--facebook fr-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4303" href="[À MODIFIER - Lien vers le facebook de l'organisation]">facebook</a>
</li>
<li>
<a class="fr-link--twitter fr-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4304" href="[À MODIFIER - Lien vers le twitter de l'organisation]">twitter</a>
</li>
<li>
<a class="fr-link--instagram fr-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4305" href="[À MODIFIER - Lien vers l'instagram de l'organisation]">instagram</a>
</li>
<li>
<a class="fr-link--linkedin fr-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4306" href="[À MODIFIER - Lien vers le linkedin de l'organisation]">linkedin</a>
</li>
<li>
<a class="fr-link--youtube fr-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4307" href="[À MODIFIER - Lien vers le youtube de l'organisation]">youtube</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="fr-follow">
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12 fr-col-md-8">
<div class="fr-follow__newsletter">
<div>
<p class="fr-h5">Abonnez-vous à notre lettre d’information</p>
<p class="fr-text--sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</p>
</div>
<div>
<button class="fr-btn" id="button-4315" title="S‘abonner à notre lettre d’information">
S'abonner
</button>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-follow__social">
<p class="fr-h5">Suivez-nous
<br> sur les réseaux sociaux
</p>
<ul class="fr-links-group">
<li>
<a class="fr-link--facebook fr-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4316" href="[À MODIFIER - Lien vers le facebook de l'organisation]">facebook</a>
</li>
<li>
<a class="fr-link--twitter fr-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4317" href="[À MODIFIER - Lien vers le twitter de l'organisation]">twitter</a>
</li>
<li>
<a class="fr-link--instagram fr-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4318" href="[À MODIFIER - Lien vers l'instagram de l'organisation]">instagram</a>
</li>
<li>
<a class="fr-link--linkedin fr-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4319" href="[À MODIFIER - Lien vers le linkedin de l'organisation]">linkedin</a>
</li>
<li>
<a class="fr-link--youtube fr-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4320" href="[À MODIFIER - Lien vers le youtube de l'organisation]">youtube</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>