Mise en avant

Documentation du tag

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

data_dict = {
    "text": "Text of the callout item",
    "title": "(Optional) Title of the callout item",
    "heading_tag": "(Optional) Heading tag for the alert title (default: p)",
    "icon_class": " (Optional) Name of the icon class",
    "extra_classes": "(Optional) string with names of extra classes."
    "button": {                                 # Optional
        "onclick": "button action",
        "label": "button label"
    }
}

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

Relevant extra_classes:

  • Color classes (See the list), for example fr-callout--green-emeraude

Tag name: dsfr_callout

Usage: {% dsfr_callout data_dict %}

Exemples

Données 

{'button': {'extra_classes': 'fr-btn--secondary',
            'label': 'Bouton normal',
            'onclick': "alert('Ce bouton est bien un bouton')"},
 'icon_class': 'fr-icon-alert-line',
 'text': 'Cette mise en avant a un bouton normal',
 'title': 'Mise en avant avec bouton normal'}

Résultat

Mise en avant avec bouton normal

Cette mise en avant a un bouton normal

Données 

{'button': {'extra_classes': 'fr-btn--secondary',
            'label': 'Bouton qui est un lien',
            'url': 'https://www.systeme-de-design.gouv.fr/'},
 'icon_class': 'fr-icon-external-link-line',
 'text': 'Cette mise en avant a un lien d’appel à action',
 'title': 'Mise en avant avec lien'}

Résultat

Mise en avant avec lien

Cette mise en avant a un lien d’appel à action

Bouton qui est un lien

Données 

{'extra_classes': 'fr-callout--green-emeraude',
 'icon_class': 'fr-icon-palette-line',
 'text': 'Cette mise en avant a une classe de couleur',
 'title': 'Mise en avant en couleur'}

Résultat

Mise en avant en couleur

Cette mise en avant a une classe de couleur