Bandeau d’information importante

Documentation du tag

Returns a notice item. Takes a dict as parameter, with the following structure:

data_dict = {
    "title": "Title of the notice item (can include html)",
    "description": "(Optional) Content of the notice item (can include html)",
    "link": "(Optional) Standardized link at the end of the notice.",
    "type": "(Optional) The type of notice. See below for allowed values (default: info)",
    "icon": "(Optional) The icon class for weather-related notices",
    "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)",
}

Possible values for type (list available in constant NOTICE_TYPE_CHOICES):

  • info
  • warning
  • alert
  • weather-orange
  • weather-red
  • weather-purple
  • attack
  • witness
  • cyberattack

All of the keys of the dict can be passed directly as named parameters of the tag.

Tag name: dsfr_notice

Usage: {% dsfr_notice data_dict %}

Exemples

Exemple 1 

{'title': 'Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long\n                            pour être sur deux lignes, et <a href=\'#\'\n                            rel=\'noopener external\'\n                            title="intitulé - Ouvre une nouvelle fenêtre" target=\'_blank\'>\n                            un lien au fil du texte</a>, sans croix de fermeture.', 'is_collapsible': False}

Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long pour être sur deux lignes, et un lien au fil du texte, sans croix de fermeture.

Exemple 2 

{'title': 'Bandeau d’information importante de niveau warning.', 'description': 'Il comprend en description un texte assez long\n                            pour être sur deux lignes, et <a href=\'#\'\n                            rel=\'noopener external\'\n                            title="intitulé - Ouvre une nouvelle fenêtre" target=\'_blank\'>\n                            un lien au fil du texte</a>, avec une croix de fermeture.', 'type': 'warning', 'is_collapsible': True}

Bandeau d’information importante de niveau warning. Il comprend en description un texte assez long pour être sur deux lignes, et un lien au fil du texte, avec une croix de fermeture.

Exemple 3 

{'title': 'Bandeau d’information importante de niveau alert, comprenant un texte assez long\n                            pour être sur deux lignes, et <a href=\'#\'\n                            rel=\'noopener external\'\n                            title="intitulé - Ouvre une nouvelle fenêtre" target=\'_blank\'>\n                            un lien au fil du texte</a>, avec une croix de fermeture.', 'type': 'alert', 'is_collapsible': True}

Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et un lien au fil du texte, avec une croix de fermeture.

Exemple 4 

{'title': 'Vigilance météo orange', 'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation.', 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', 'type': 'weather-orange', 'icon': 'fr-icon-windy-fill', 'is_collapsible': True}

Vigilance météo orange Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. Lien de consultation

Exemple 5 

{'title': 'Vigilance météo rouge', 'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation.', 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', 'type': 'weather-red', 'is_collapsible': True}

Vigilance météo rouge Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. Lien de consultation

Exemple 6 

{'title': 'Vigilance météo violette', 'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation.', 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', 'type': 'weather-purple', 'is_collapsible': True}

Vigilance météo violette Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. Lien de consultation

Exemple 7 

{'title': 'Attentat en cours', 'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation.', 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', 'type': 'attack', 'is_collapsible': True}

Attentat en cours Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. Lien de consultation

Exemple 8 

{'title': 'Appel à témoins', 'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation.', 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', 'type': 'witness', 'is_collapsible': True}

Appel à témoins Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. Lien de consultation

Exemple 9 

{'title': 'Cyber-attaque', 'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation.', 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', 'type': 'cyberattack', 'is_collapsible': True}

Cyber-attaque Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. Lien de consultation