Alertes

• 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

Documentation du tag

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

data_dict = {
    "title": "(Optional if small) Title of the alert item",
    "type": "Possible values : info, success, error",
    "content": "(Optional if median) Content of the accordion item (can include html)",
    "heading_tag": "(Optional) Heading tag for the alert title (default: p)",
    "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the alert (default: false)",
    "id": "Unique id of the alert item (Optional, mandatory if collapsible)",
    "extra_classes": "(Optional) string with names of extra classes."
}

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

Relevant extra_classes:

• fr-alert--sm : small alert

On normal (median) alerts, the title is mandatory, the content is optional. On small alerts, the title is optional, the content is mandatory.

Tag name: dsfr_alert

Usage: {% dsfr_alert data_dict %}

Exemples

Données

{'content': 'Cliquer sur la croix pour fermer l’alerte.',
 'heading_tag': 'h3',
 'id': 'alert-success-tag',
 'is_collapsible': True,
 'title': 'Alerte refermable de type succès',
 'type': 'success'}

Résultat

Données

{'content': 'Cliquer sur la croix pour fermer l’alerte.',
 'heading_tag': 'h3',
 'is_collapsible': True,
 'title': 'Alerte refermable de type erreur',
 'type': 'error'}

Résultat

Données

{'content': 'Cette alerte n’a pas de croix de fermeture.',
 'heading_tag': 'h3',
 'title': 'Alerte non-refermable de type info',
 'type': 'info'}

Résultat

Données

{'heading_tag': 'h3', 'title': 'Alerte medium sans contenu', 'type': 'warning'}

Résultat

Données

{'content': 'Petite alerte sans titre.',
 'extra_classes': 'fr-alert--sm',
 'type': 'warning'}

Résultat