Interface de contrôle des tests
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

<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 fr-mb-3v fr-mb-3v">Suivez-nous
                        <br> sur les réseaux sociaux</p>
                    <ul class="fr-links-group fr-links-group--lg">
                        <li>
                            <a class="fr-link--facebook fr-link" title="[À MODIFIER - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank">youtube</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Lettre d'info seule

<div class="fr-follow">
    <div class="fr-container">
        <div class="fr-grid-row">
            <div class="fr-col-12">
                <div class="fr-follow__newsletter">
                    <div>
                        <h5 class="fr-h5 fr-follow__title">Abonnez-vous à notre lettre d’information</h5>
                        <p class="fr-text--sm fr-follow__desc">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" type="button">
                            S&#39;abonner
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Lettre d'info seule avec formulaire

<div class="fr-follow">
    <div class="fr-container">
        <div class="fr-grid-row">
            <div class="fr-col-12">
                <div class="fr-follow__newsletter">
                    <div>
                        <h5 class="fr-h5 fr-follow__title">Abonnez-vous à notre lettre d’information</h5>
                        <p class="fr-text--sm fr-follow__desc">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="fr-newsletter-hint-text" title="Votre adresse électronique (ex. : nom@domaine.fr)" 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&#39;abonner
                                </button>
                            </div>
                            <p id="fr-newsletter-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">
    <div class="fr-container">
        <div class="fr-grid-row">
            <div class="fr-col-12 fr-col-md-8">
                <div class="fr-follow__newsletter">
                    <div>
                        <h5 class="fr-h5 fr-follow__title">Abonnez-vous à notre lettre d’information</h5>
                        <p class="fr-text--sm fr-follow__desc">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" type="button">
                            S&#39;abonner
                        </button>
                    </div>
                </div>
            </div>
            <div class="fr-col-12 fr-col-md-4">
                <div class="fr-follow__social">
                    <p class="fr-h5 fr-mb-3v fr-mb-3v">Suivez-nous
                        <br> sur les réseaux sociaux</p>
                    <ul class="fr-links-group fr-links-group--lg">
                        <li>
                            <a class="fr-link--facebook fr-link" title="[À MODIFIER - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank">youtube</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Réseaux sociaux et Lettre d'info avec formulaire

<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>
                        <h5 class="fr-h5 fr-follow__title">Abonnez-vous à notre lettre d’information</h5>
                        <p class="fr-text--sm fr-follow__desc">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="fr-newsletter-hint-text" title="Votre adresse électronique (ex. : nom@domaine.fr)" 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&#39;abonner
                                </button>
                            </div>
                            <p id="fr-newsletter-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 fr-mb-3v fr-mb-3v">Suivez-nous
                        <br> sur les réseaux sociaux</p>
                    <ul class="fr-links-group fr-links-group--lg">
                        <li>
                            <a class="fr-link--facebook fr-link" title="[À MODIFIER - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank">youtube</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

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

<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>
                        <h5 class="fr-h5 fr-follow__title">Abonnez-vous à notre lettre d’information</h5>
                        <p class="fr-text--sm fr-follow__desc">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--error fr-input" aria-describedby="fr-newsletter-error-text fr-newsletter-hint-text" title="Votre adresse électronique (ex. : nom@domaine.fr)" 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&#39;abonner
                                </button>
                            </div>
                            <p id="fr-newsletter-error-text" class="fr-error-text">L'adresse email n'est pas valide</p>
                            <p id="fr-newsletter-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 fr-mb-3v fr-mb-3v">Suivez-nous
                        <br> sur les réseaux sociaux</p>
                    <ul class="fr-links-group fr-links-group--lg">
                        <li>
                            <a class="fr-link--facebook fr-link" title="[À MODIFIER - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une 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 - XXXXXXX] - ouvre une nouvelle fenêtre" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank">youtube</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>