Bandeau d'information importante

Seul le bandeau de type information est disponible pour le moment.
Le titre est défini par la classe "fr-notice__title", la balise <p> peut être remplacée par un niveau de titre hx suivant le contexte.
Le bandeau doit être placé au début du contenu de la page, pour être le premier élément au clique sur le lien d'évitement "aller au contenu".

Bandeau d'information importante simple

Titre du bandeau d'information

<div class="fr-notice fr-notice--info">
    <div class="fr-container">
        <div class="fr-notice__body">
            <p class="fr-notice__title">Titre du bandeau d'information</p>
        </div>
    </div>
</div>

Bandeau d'information importante avec bouton fermer

Titre du bandeau

<div class="fr-notice fr-notice--info">
    <div class="fr-container">
        <div class="fr-notice__body">
            <p class="fr-notice__title">Titre du bandeau</p>
            <button class="fr-btn--close fr-btn" title="Masquer le message" onclick="const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild(notice)" id="button-721">
                Masquer le message
            </button>
        </div>
    </div>
</div>

Bandeau d'information importante avec lien

Titre du bandeau, lien au fil du texte

<div class="fr-notice fr-notice--info">
    <div class="fr-container">
        <div class="fr-notice__body">
            <p class="fr-notice__title">Titre du bandeau, <a href='#' rel='noopener' target='_blank'>lien au fil du texte</a>
            </p>
            <button class="fr-btn--close fr-btn" title="Masquer le message" onclick="const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild(notice)" id="button-724">
                Masquer le message
            </button>
        </div>
    </div>
</div>

Bandeau d'information importante avec titre long

Titre de bandeau très long, pour tester le comportement du composant avec un texte très long, et un lien au fil du texte lorem ipsum dolor sit lorem ipsum dolor sit.

<div class="fr-notice fr-notice--info">
    <div class="fr-container">
        <div class="fr-notice__body">
            <p class="fr-notice__title">Titre de bandeau très long, pour tester le comportement du composant avec un texte très long, et un <a href='#' rel='noopener' target='_blank'>lien au fil du texte</a> lorem ipsum dolor sit lorem ipsum dolor sit.</p>
            <button class="fr-btn--close fr-btn" title="Masquer le message" onclick="const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild(notice)" id="button-727">
                Masquer le message
            </button>
        </div>
    </div>
</div>

Bandeau d'information importante (notice)