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.
Documentation<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-btns-group">
<li>
<a class="fr-btn--facebook fr-btn" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
facebook
</a>
</li>
<li>
<a class="fr-btn--twitter fr-btn" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
twitter
</a>
</li>
<li>
<a class="fr-btn--instagram fr-btn" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
instagram
</a>
</li>
<li>
<a class="fr-btn--linkedin fr-btn" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
linkedin
</a>
</li>
<li>
<a class="fr-btn--youtube fr-btn" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
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">
<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" title="S‘abonner à notre lettre d’information">
S'abonner
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fr-follow">
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12">
<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>
<form action="">
<label class="fr-label" for="newsletter-email">
Votre adresse électronique (ex. : nom@domaine.fr)
</label>
<div class="fr-input-wrap fr-input-wrap--addon">
<input class="fr-input" aria-describedby="newsletter-email-hint-text" title="Votre adresse électronique (ex. : nom@domaine.fr)" autocomplete="email" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" type="email" id="newsletter-email" name="newsletter-email">
<button class="fr-btn" id="newsletter-button" title="S‘abonner à notre lettre d’information" type="submit">
S'abonner
</button>
</div>
<p id="newsletter-email-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">
<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" 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-btns-group">
<li>
<a class="fr-btn--facebook fr-btn" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
facebook
</a>
</li>
<li>
<a class="fr-btn--twitter fr-btn" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
twitter
</a>
</li>
<li>
<a class="fr-btn--instagram fr-btn" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
instagram
</a>
</li>
<li>
<a class="fr-btn--linkedin fr-btn" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
linkedin
</a>
</li>
<li>
<a class="fr-btn--youtube fr-btn" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
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>
<form action="">
<label class="fr-label" for="newsletter-email">
Votre adresse électronique (ex. : nom@domaine.fr)
</label>
<div class="fr-input-wrap fr-input-wrap--addon">
<input class="fr-input" aria-describedby="newsletter-email-hint-text" title="Votre adresse électronique (ex. : nom@domaine.fr)" autocomplete="email" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" type="email" id="newsletter-email" name="newsletter-email">
<button class="fr-btn" id="newsletter-button" title="S‘abonner à notre lettre d’information" type="submit">
S'abonner
</button>
</div>
<p id="newsletter-email-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">
<p class="fr-h5">Suivez-nous
<br> sur les réseaux sociaux
</p>
<ul class="fr-btns-group">
<li>
<a class="fr-btn--facebook fr-btn" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
facebook
</a>
</li>
<li>
<a class="fr-btn--twitter fr-btn" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
twitter
</a>
</li>
<li>
<a class="fr-btn--instagram fr-btn" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
instagram
</a>
</li>
<li>
<a class="fr-btn--linkedin fr-btn" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
linkedin
</a>
</li>
<li>
<a class="fr-btn--youtube fr-btn" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
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>
<form action="">
<label class="fr-label" for="newsletter-email">
Votre adresse électronique (ex. : nom@domaine.fr)
</label>
<div class="fr-input-wrap fr-input-wrap--addon">
<input class="fr-input fr-input--error" aria-describedby="newsletter-email-desc-error newsletter-email-hint-text" title="Votre adresse électronique (ex. : nom@domaine.fr)" autocomplete="email" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" type="email" id="newsletter-email" name="newsletter-email">
<button class="fr-btn" id="newsletter-button" title="S‘abonner à notre lettre d’information" type="submit">
S'abonner
</button>
</div>
<p id="newsletter-email-desc-error" class="fr-error-text">
Le format de l’adresse electronique saisie n’est pas valide. Le format attendu est : nom@exemple.org
</p>
<p id="newsletter-email-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">
<p class="fr-h5">Suivez-nous
<br> sur les réseaux sociaux
</p>
<ul class="fr-btns-group">
<li>
<a class="fr-btn--facebook fr-btn" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
facebook
</a>
</li>
<li>
<a class="fr-btn--twitter fr-btn" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
twitter
</a>
</li>
<li>
<a class="fr-btn--instagram fr-btn" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
instagram
</a>
</li>
<li>
<a class="fr-btn--linkedin fr-btn" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
linkedin
</a>
</li>
<li>
<a class="fr-btn--youtube fr-btn" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre">
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" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank">
facebook
</a>
</li>
<li>
<a class="fr-link--twitter fr-link" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank">
twitter
</a>
</li>
<li>
<a class="fr-link--instagram fr-link" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank">
instagram
</a>
</li>
<li>
<a class="fr-link--linkedin fr-link" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank">
linkedin
</a>
</li>
<li>
<a class="fr-link--youtube fr-link" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank">
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" 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" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank">
facebook
</a>
</li>
<li>
<a class="fr-link--twitter fr-link" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank">
twitter
</a>
</li>
<li>
<a class="fr-link--instagram fr-link" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank">
instagram
</a>
</li>
<li>
<a class="fr-link--linkedin fr-link" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank">
linkedin
</a>
</li>
<li>
<a class="fr-link--youtube fr-link" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank">
youtube
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>