Bandeau d'information importante - Notice

Le bandeau d’information importante permet aux utilisateurs de voir ou d’accéder à une information importante et temporaire.

Bandeau d’information importante

Ce bandeau répond à la plupart des cas d’usages.

Code

= dsfr_notice(title: "Information", description: "Ceci est une info importante")

Résultat

Information Ceci est une info importante 

<div class="fr-notice fr-notice--info">
  <div class="fr-container">
    <div class="fr-notice__body">
      <p>
        <span class="fr-notice__title ">
          Information
        </span>
        <span class="fr-notice__desc">
          Ceci est une info importante
        </span>
      </p>
    </div>
  </div>
</div>

Bandeau d’un autre type

Il est possible de changer le type de bandeau. Il existe 3 catégories de bandeaux :

  • Les bandeaux génériques : info, waring, alert.
  • Les bandeaux d’alertes : kidnapping, cyberattack, attack, witness.
  • Les bandeaux d’information météorologique : weather-orange, weather-red, weather-purple.

Code

= dsfr_notice(title: "Alerte", description: "Ceci est une alerte importante", type: "alert")

Résultat

Alerte Ceci est une alerte importante 

<div class="fr-notice fr-notice--alert">
  <div class="fr-container">
    <div class="fr-notice__body">
      <p>
        <span class="fr-notice__title ">
          Alerte
        </span>
        <span class="fr-notice__desc">
          Ceci est une alerte importante
        </span>
      </p>
    </div>
  </div>
</div>

Bandeau d’information importante avec un bouton pour masquer

Il est possible d’ajouter un bouton pour proposer à l’utilisateur de masquer le bandeau. L’attribut dismiss_label est facultatif, par défaut « Masquer le message ».

Code

= dsfr_notice(title: "Information", description: "Ceci est une info importante que vous pouvez masquer", dismissible: true, dismiss_label: "Masquer")

Résultat

Information Ceci est une info importante que vous pouvez masquer 

<div class="fr-notice fr-notice--info">
  <div class="fr-container">
    <div class="fr-notice__body">
      <p>
        <span class="fr-notice__title ">
          Information
        </span>
        <span class="fr-notice__desc">
          Ceci est une info importante que vous pouvez masquer
        </span>
      </p>
      <button onclick="const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild(notice)" title="Masquer" type="button" class="fr-btn--close fr-btn">
        Masquer
      </button>
    </div>
  </div>
</div>

Bandeau d’information importante avec un lien externe

Il est possible d’ajouter un lien pour rediriger l’utilisateur vers une page lui apportant des informations complémentaires.

Code

= dsfr_notice(title: "Information", description: "Ceci est une info importante avec un super lien", link_label: "En savoir plus", link_href: "https://example.com", link_title: "En savoir plus - Nouvel onglet")

Résultat

Information Ceci est une info importante avec un super lien En savoir plus 

<div class="fr-notice fr-notice--info">
  <div class="fr-container">
    <div class="fr-notice__body">
      <p>
        <span class="fr-notice__title ">
          Information
        </span>
        <span class="fr-notice__desc">
          Ceci est une info importante avec un super lien
        </span>
        <a title="En savoir plus - Nouvel onglet" target="_blank" href="https://example.com">
          En savoir plus
        </a>
      </p>
    </div>
  </div>
</div>

Bandeau d’information importante avec un lien interne

Code

= dsfr_notice(title: "Information", description: "Ceci est une info importante avec un super lien", link_label: "En savoir plus", link_href: "#", link_blank: false)

Résultat

Information Ceci est une info importante avec un super lien En savoir plus 

<div class="fr-notice fr-notice--info">
  <div class="fr-container">
    <div class="fr-notice__body">
      <p>
        <span class="fr-notice__title ">
          Information
        </span>
        <span class="fr-notice__desc">
          Ceci est une info importante avec un super lien
        </span>
        <a target="_self" href="#">
          En savoir plus
        </a>
      </p>
    </div>
  </div>
</div>

Bandeau d’information importante sans icône

Il est possible de masquer l’icône du bandeau (uniquement pour les bandeaux génériques).

Code

= dsfr_notice(title: "Information", description: "Ceci est une info importante", use_icon: false)

Résultat

Information Ceci est une info importante 

<div class="fr-notice fr-notice--info fr-notice--no-icon">
  <div class="fr-container">
    <div class="fr-notice__body">
      <p>
        <span class="fr-notice__title ">
          Information
        </span>
        <span class="fr-notice__desc">
          Ceci est une info importante
        </span>
      </p>
    </div>
  </div>
</div>

Bandeau d’information importante avec une icône personnalisée

Il est possible de personnaliser l’icône du bandeau uniquement pour les bandeaux génériques.

Pour les bandeaux d’information météorologique, l’icône doit être sélectionnée parmi les icônes météorologiques suivantes : windy-fill, thunderstorms-fill, heavy-showers-fill, flood-fill, temp-cold-fill, sun-fill, avalanches-fill, snowy-fill.

Les icônes d’alertes ne sont pas personnalisables.

Code

= dsfr_notice(title: "Information", description: "Ceci est une info importante", icon_name: "alarm-warning-fill")

Résultat

Information Ceci est une info importante 

<div class="fr-notice fr-notice--info">
  <div class="fr-container">
    <div class="fr-notice__body">
      <p>
        <span class="fr-notice__title fr-icon-alarm-warning-fill">
          Information
        </span>
        <span class="fr-notice__desc">
          Ceci est une info importante
        </span>
      </p>
    </div>
  </div>
</div>

Plus d’informations