DSFR v1.13.1

Retour

Lettre d'information et Réseaux Sociaux (follow)

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

Réseaux sociaux seuls

Les icones réseaux sociaux disponibles pour ce composant sont définies dans :

////
/// Logo Setting
/// @group logo
////

$follow-icons: (
  bluesky: bluesky-fill,
  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-4419">
    <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 title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4420" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--facebook fr-btn">Facebook</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4421" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--twitter-x fr-btn">X (anciennement Twitter)</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4422" href="[À MODIFIER - Lien vers le bluesky de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--bluesky fr-btn">Bluesky</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4423" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--linkedin fr-btn">Linkedin</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4424" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--instagram fr-btn">Instagram</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4425" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--youtube fr-btn">Youtube</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Lettre d'info seule

<div class="fr-follow" id="follow-4430">
    <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 title="S‘abonner à notre lettre d’information" type="button" id="newsletter-button-4429" class="fr-btn">S'abonner</button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Lettre d'info seule avec formulaire

<div class="fr-follow" id="follow-4438">
    <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-4439">
                                <label class="fr-label" for="newsletter-email-4436">
                                    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-4436-hint-text newsletter-email-4436-messages" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" id="newsletter-email-4436" type="email">
                                    <button title="S‘abonner à notre lettre d’information" type="button" id="newsletter-button-4437" class="fr-btn">S'abonner</button>
                                </div>
                                <div class="fr-messages-group" id="newsletter-email-4436-messages" aria-live="polite">
                                </div>
                            </div>
                            <p id="newsletter-email-4436-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>

Réseaux sociaux et Lettre d'info mise en avant

<div class="fr-follow" id="follow-4450">
    <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 title="S‘abonner à notre lettre d’information" type="button" id="newsletter-button-4449" class="fr-btn">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 title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4451" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--facebook fr-btn">Facebook</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4452" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--twitter-x fr-btn">X (anciennement Twitter)</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4453" href="[À MODIFIER - Lien vers le bluesky de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--bluesky fr-btn">Bluesky</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4454" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--linkedin fr-btn">Linkedin</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4455" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--instagram fr-btn">Instagram</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4456" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--youtube fr-btn">Youtube</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Réseaux sociaux et Lettre d'info avec formulaire

<div class="fr-follow" id="follow-4470">
    <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-4471">
                                <label class="fr-label" for="newsletter-email-4468">
                                    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-4468-hint-text newsletter-email-4468-messages" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" id="newsletter-email-4468" type="email">
                                    <button title="S‘abonner à notre lettre d’information" type="button" id="newsletter-button-4469" class="fr-btn">S'abonner</button>
                                </div>
                                <div class="fr-messages-group" id="newsletter-email-4468-messages" aria-live="polite">
                                </div>
                            </div>
                            <p id="newsletter-email-4468-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 title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4472" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--facebook fr-btn">Facebook</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4473" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--twitter-x fr-btn">X (anciennement Twitter)</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4474" href="[À MODIFIER - Lien vers le bluesky de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--bluesky fr-btn">Bluesky</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4475" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--linkedin fr-btn">Linkedin</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4476" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--instagram fr-btn">Instagram</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4477" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--youtube fr-btn">Youtube</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Réseaux sociaux et Lettre d'info avec formulaire - succès

<div class="fr-follow" id="follow-4488">
    <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-4487" 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 title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4489" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--facebook fr-btn">Facebook</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4490" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--twitter-x fr-btn">X (anciennement Twitter)</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4491" href="[À MODIFIER - Lien vers le bluesky de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--bluesky fr-btn">Bluesky</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4492" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--linkedin fr-btn">Linkedin</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4493" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--instagram fr-btn">Instagram</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4494" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--youtube fr-btn">Youtube</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Réseaux sociaux et Lettre d'info avec formulaire - erreur

<div class="fr-follow" id="follow-4508">
    <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-4509">
                                <label class="fr-label" for="newsletter-email-4506">
                                    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-4506-hint-text newsletter-email-4506-messages" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" id="newsletter-email-4506" type="email">
                                    <button title="S‘abonner à notre lettre d’information" type="button" id="newsletter-button-4507" class="fr-btn">S'abonner</button>
                                </div>
                                <div class="fr-messages-group" id="newsletter-email-4506-messages" aria-live="polite">
                                    <p class="fr-message fr-message--error" id="newsletter-email-4506-message-error">Le format de l’adresse electronique saisie n’est pas valide. Le format attendu est : nom@domaine.fr</p>
                                </div>
                            </div>
                            <p id="newsletter-email-4506-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 title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4510" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--facebook fr-btn">Facebook</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4511" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--twitter-x fr-btn">X (anciennement Twitter)</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4512" href="[À MODIFIER - Lien vers le bluesky de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--bluesky fr-btn">Bluesky</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4513" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--linkedin fr-btn">Linkedin</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4514" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--instagram fr-btn">Instagram</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="social-button-4515" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank" rel="noopener external" class="fr-btn--youtube fr-btn">Youtube</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Dépréciation

Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes

Réseaux sociaux seuls

<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 title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4522" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank" rel="noopener external" class="fr-link--facebook fr-link">facebook</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4523" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank" rel="noopener external" class="fr-link--twitter-x fr-link">twitter-x</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4524" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank" rel="noopener external" class="fr-link--instagram fr-link">instagram</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4525" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank" rel="noopener external" class="fr-link--linkedin fr-link">linkedin</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4526" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank" rel="noopener external" class="fr-link--youtube fr-link">youtube</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Réseaux sociaux et Lettre d'info mise en avant

<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 title="S‘abonner à notre lettre d’information" type="button" class="fr-btn">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 title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4533" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank" rel="noopener external" class="fr-link--facebook fr-link">facebook</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4534" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank" rel="noopener external" class="fr-link--twitter-x fr-link">twitter-x</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4535" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank" rel="noopener external" class="fr-link--instagram fr-link">instagram</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4536" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank" rel="noopener external" class="fr-link--linkedin fr-link">linkedin</a>
                        </li>
                        <li>
                            <a title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" id="link-4537" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank" rel="noopener external" class="fr-link--youtube fr-link">youtube</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.