Lettre d’information et Réseaux Sociaux

Le bandeau de Lettre d’information et Réseaux Sociaux est géré grâce à une balise include à insérer dans le bloc follow_newsletter_social_media dans le fichier base.html.

<!-- <votre_app>/templates/<votre_app>/base.html -->
{% extends "dsfr/base.html" %}

<!-- [...] -->
{% block follow_newsletter_social_media %}
  {% include "dsfr/follow.html" %}
{% endblock follow_newsletter_social_media %}

Il est alors possible de personnaliser la description de la lettre d’information, l’URL d’inscription ainsi que les réseaux sociaux via la configuration du site dans l’administration de Django. - Voir la page de documentation du composant sur le Système de Design de l’État Ouvre une nouvelle fenêtre - Voir la page d’exemple du Système de Design de l’État Ouvre une nouvelle fenêtre

Classes pour les boutons des réseaux sociaux

Personnaliser

Il est possible de le remplacer par votre propre bloc pour étendre ses capacités (par exemple pour n’afficher qu’un des deux blocs ou pour inclure le champ d’adhésion directement dans le bandeau.)

<!-- <votre_app>/templates/<votre_app>/base.html -->
{% extends "dsfr/base.html" %}

<!-- [...] -->
{% block follow_newsletter_social_media %}
  {% include "<votre_app>/blocks/follow.html" %}
{% endblock follow_newsletter_social_media %}

<!-- <votre_app>/templates/<votre_app>/blocks/follow.html -->
{% extends "dsfr/follow.html" %}
{% block follow_newsletter %}
  <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">
                      <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" title="Votre adresse électronique (ex. : nom@domaine.fr)" autocomplete="email" attributes="[object Object]" aria-describedby="newsletter-email-hint-text newsletter-email-messages" placeholder="Votre adresse électronique (ex. : nom@domaine.fr)" id="newsletter-email" type="email">
                          <button class="fr-btn" id="newsletter-button" title="S’abonner à notre lettre d’information" type="submit">
                              S’abonner
                          </button>
                      </div>
                      <div class="fr-messages-group" id="newsletter-email-messages" aria-live="assertive">
                      </div>
                  </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>
{% endblock follow_newsletter %}

{% block follow_social %}
{% endblock follow_social %}