Séparateur
Un séparateur est un trait horizontal qui permet de diviser deux sections entre elles.
Quand l’utiliser
Le séparateur est utilisé pour des fins de hiérarchisation et de structure des contenus, et ne doit pas servir à des fins explicitement décoratives. Il permet, entre autres, d’optimiser le repérage visuel des éléments contenus dans une page ou un composant.
Par exemple, dans un formulaire, un séparateur peut aider à séparer et regrouper les champs dédiés à la saisie d’une adresse postale.
Exemple
Comment l'utiliser
Le séparateur doit être discret. Ni sa couleur ni sa graisse ne doivent être modifiées. Sa largeur s’adapte toutefois à celle de la page ou d’un autre élément visuel.
Informations techniques
Les séparateurs placés dans le contenu courant ont un dégagement vertical de 48 px.
CSS du séparateur
border: 1px solid #c5cad2;
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026