Couleurs
- Voir la page de présentation de la palette de couleurs sur le Système de Design de l’État Ouvre une nouvelle fenêtre
- Voir la page de règles d’utilisation de la palette de couleurs sur le Système de Design de l’État Ouvre une nouvelle fenêtre
Cartes et tuiles
Les cartes et tuiles peuvent prendre un fond gris à la place de la couleur par défaut, respectivement avec les classes fr-card--grey et fr-tile--grey.
Texte de la carte. Il peut prendre jusqu’à 200 caractères, ce qui devrait correspondre à environ cinq lignes dans le mode vertical, et deux en horizontal. …
Texte de la carte. Il peut prendre jusqu’à 200 caractères, ce qui devrait correspondre à environ cinq lignes dans le mode vertical, et deux en horizontal. …
Couleurs de fond
Il est possible de changer la couleur de fond d’un paragraphe ou d’une div. Les couleurs primaires, neutres et illustratives sont prises en compte.
Il faut utiliser une classe de type fr-background-alt--<color-name> (par exemple, fr-background-alt--green-archipel.)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio tempore atque quis nulla repellat dolores quibusdam temporibus laborum velit rerum aliquam amet recusandae consectetur voluptas, quasi asperiores veniam excepturi ipsam.
Totam harum magni quis laudantium esse? Quod, tenetur nobis ab nostrum minus rerum magnam? Tempora provident distinctio fugit sunt, rem magni harum? Minus explicabo repudiandae placeat suscipit! Earum provident facere, unde quam recusandae cumque neque quas porro dolor a natus labore delectus vel necessitatibus.
Couleurs d’accentuation
Certains composants prennent une couleur d’accentuation comme paramètre. Seules les couleurs illustratives sont prises en compte.
Badge
Personnalise la couleur du fond et du texte.
Il faut utiliser une classe de type fr-badge--<color-name> (par exemple, fr-quote--green-archipel.)
Badge simple
Citation
Personnalise la couleur de l’icône.
Il faut utiliser une classe de type fr-quote--<color-name> (par exemple, fr-quote--green-archipel.)
Citation très basique, sans aucun des champs optionnels.
Mise en avant
Personnalise la couleur du fond et de la bordure.
Il faut utiliser une classe de type fr-callout--<color-name> (par exemple, fr-callout--green-archipel.)
Mise en exergue
Personnalise la couleur de la bordure.
Il faut utiliser une classe de type fr-highlight--<color-name> (par exemple, fr-highlight--green-archipel.)
Contenu de la mise en exergue
Tag
Personnalise la couleur du fond, du texte et de l’icône. Seuls les tags cliquables sont pris en compte.
Il faut utiliser une classe de type fr-tag--<color-name> (par exemple, fr-tag--green-archipel.)