Configuration graphique

Une configuration graphique est définie par les variantes de couleurs suivantes :

  • une couleur primaire : c'est votre couleur dominante, elle sera utilisée par défaut pour la barre de menu ainsi que pour les titres et les liens.
Couleur primaire

  • 2 couleurs secondaires peu visibles par défaut mais vous pourrez facilement les utiliser dans vos éléments de mise en forme.
Couleur secondaire 1

Couleur secondaire 2

  • la couleur de votre texte et couleur du fond : si vous les modifiez, veillez à bien respecter le contraste pour assurer la lisibilité des contenus.
3 couleurs de texte à définir (valeur actuelle en hexa) :
  • principale (#4e5056 par défaut)[variable --main-text-color ou --neutral-text-color],
  • neutre (#57575C par défaut)[variable --neutral-soft-color],
  • claire (#f7f5fa)[variable --neutral-light-color, valeur par défaut #f2f2f2],

Styles utilisés

Cette page affiche les différents styles utilisables par défaut dans l'édition des pages.

La police des titres est Overpass.

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
La police des textes est Overpass.

texte centré

texte agrandi

texte normal
texte gras
texte italique
texte souligné
texte barré
liste à puces
  • point 1
  • point 2

liste numérotée
  1. point 1
  2. point 2
texte mis en valeur

Composants graphiques

Ce bandeau de couleur a été créé grâce au composant de mise en forme nommé section


Boutons

Les couleurs de la charte graphique

btn-primary btn-secondary-1 btn-secondary-2


Les couleurs pour l'interface utilisateur

btn-default btn-success btn-info

Etiquettes

Les couleurs de la charte graphique

label-primary label-secondary-1 label-secondary-2


Les couleurs pour l'interface utilisateur

Label-default label-success label-info label-warning label-danger

Encadrés

Les couleurs de la charte graphique

Contenu panel-primary
Encadré ouvert initialement
Contenu panel-secondary-1
Encadré fermé initialement

Titre secondary-2

Contenu panel-secondary-2
Simple encadré

Accordéons

Les couleurs de la charte graphique

Contenu panel-primary
Contenu panel-secondary-1
Contenu panel-secondary-2

Les couleurs de l'interface utilisateur

Contenu panel-success
Contenu panel-warning
Contenu panel-danger