diff --git a/_includes/components/alert.njk b/_includes/components/alert.njk new file mode 100644 index 0000000..419ff48 --- /dev/null +++ b/_includes/components/alert.njk @@ -0,0 +1,7 @@ +{% if not alert %}{% set alert = params %}{% endif %} +
+ {% if alert.title %} +

{{ alert.title | safe }}

+ {% endif %} + {% if alert.description %}{{ alert.description | safe }} {% endif %} +
\ No newline at end of file diff --git a/content/fr/blog/posts/alert.md b/content/fr/blog/posts/alert.md new file mode 100644 index 0000000..8f7a2d3 --- /dev/null +++ b/content/fr/blog/posts/alert.md @@ -0,0 +1,63 @@ +--- +title: Alert +description: Comment intégrer une alerte +date: git Last Modified +tags: + - DSFR + - composant +--- + +Ce composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `.md`. + +## Exemple d'utilisation + +```njk +{% raw %} +{% from "components/component.njk" import component with context %} +{{ component("alert", { + type: "info", {# info (par défaut), warning, error, success #} + title: "Test d'alerte", + description: "

Le contenu de l'alerte

" +}) }} +{% endraw %} +``` + +Référence : [https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte) + +## Rendu + +{% from "components/component.njk" import component with context %} +{{ component("alert", { + type: "info", + title: "Titre de l'info", + description: "

Le contenu de l'alerte

" +}) }} + +{% from "components/component.njk" import component with context %} +{{ component("alert", { + type: "warning", + title: "Titre de l'avertissement", + description: "

Le contenu de l'alerte

" +}) }} + +{% from "components/component.njk" import component with context %} +{{ component("alert", { + type: "success", + description: "

Contenu de l'alerte seul

" +}) }} + +{% from "components/component.njk" import component with context %} +{{ component("alert", { + type: "error", + title: "Titre de l'erreur seul" +}) }} + +---- + +Alerte sans type précisé (défaut info) : + +{% from "components/component.njk" import component with context %} +{{ component("alert", { + title: "Titre de l'info", + description: "

Le contenu de l'alerte

" +}) }} \ No newline at end of file