Informations et alertes

#bloc-information

Bloc information

Présentation

Les blocs informations permettent d'afficher une ligne de texte qui doit être mise en avant / en valeur.

Plusieurs déclinaisons existent :

  • Standard : déclinaison par défaut
  • Success
  • Warning
  • Danger
  • Neutral

Chaque déclinaison utilise une couleur spécifique, et le picto associé peut aussi évoluer.

Usage

Selon le contexte, vous devez choisir la déclinaison du bloc information

  • Pour indiquer que les champs sont obligatoires, le bloc info déclinaison standard est positionné en haut de formulaire,
  • Pour mettre en avant que l'information partagée est importante, vous pouvez utiliser la déclinaison Warning, la couleur orange permet d'attirer l'attention,
  • Pour signifier un danger, il est pertinent d'utiliser la déclinaison Danger, sa couleur et son picto rouge,
  • Pour signifier le succès, il est pertinent d'utiliser la déclinaison Success, sa couleur et son picto vert,
  • Enfin, une dernière déclinaison dite neutre, vous permet d’afficher une information sans mettre en valeur plus que cela.

A noter que le texte associé au bloc information peut être modulé et vous pouvez jouer avec la graisse des polices.

#bloc-info-accordeon

Bloc info accordéon

Présentation

Ce bloc est une extension du module bloc information, il en possède les mêmes déclinaisons.
Sa particularité réside dans le fait qu'il est possible de mettre un texte plus important, qu'une seule phrase courte, accessible via une action de clic.
Néanmoins il faut conserver une phrase d'accroche.
Le comportement au clic permet d'ouvrir l'expand et d'afficher alors le texte qui est plus conséquent.

Usage

Les usages sont les mêmes que ceux du bloc information.
L'usage premier de ce bloc information accordéon est de ne pas afficher de prime abord les informations indiquées dans l'expand, car elles sont considérées comme un complément d'informations.
La surcharge visuelle est ainsi évitée
L'utilisateur peut accéder au complément d'informations en cliquant sur l'expand.

Lien vers le module Bloc info utilisé dans les pages Edito

Consultez

#champ-erreur

Champ erreur

Présentation

Ce module permet d'afficher à l'utilisateur qu'il y a une erreur dans la saisie d'un formulaire par exemple.
Cette erreur n'est pas associée à un champ de saisie.

Usage

Le module champ erreur est à utiliser si vous souhaitez afficher une erreur lors de la validation d'un formulaire, par exemple.
Cette erreur ne DOIT pas être reliée à la saisie d'un champ car dans ce cas c'est un autre dispositif qui est déclenché.

#bloc-attention

Bloc attention

Information

Récemment, le bloc info a évolué pour proposer plusieurs déclinaisons dont une tournée vers le danger. Une réflexion est en cours pour savoir si le bloc attention est conservé ou si nous considérons que le bloc info version danger est suffisante pour attirer l'attention

#bloc-info-light

Bloc info light

Présentation

Ce bloc information permet de donner une indication sur l'ensemble d'une étape d'un formulaire.
Par exemple : Tous les champs sont obligatoires ou Tous les champs sont obligatoires sauf mention contraire.

Usage

Ce bloc est à utiliser en début de formulaire notamment pour notifier la saisie obligatoire ou non des champs du formulaire.