Conseils
Nous utilisons des bordures pour séparer, définir, diviser et mettre visuellement en valeur le contenu et les composants. Les bordures font partie du style de certains composants et ne doivent jamais être modifiées. Dans certains cas, les couleurs des bordures sont porteuses de sens et assurent le maintien de modèles cohérents dans l’ensemble du système de conception.
À faire
- Conservez les styles et les couleurs de bordure hérités du composant parent.
À ne pas faire
- Ne modifiez pas le style ou la couleur de bordure d’un composant.
Séparer les en-têtes et les titres
Utilisez une bordure noire de 2 px pour séparer les titres de tableaux et de navigation du contenu. Cela s’applique entre autres aux tableaux et aux titres de navigations.
| En-tête | En-tête | En-tête | En-tête |
|---|---|---|---|
| Cellule | Cellule | Cellule | Cellule |
| Cellule | Cellule | Cellule | Cellule |
Diviser le contenu
Utilisez une bordure grise de 1px grey-300 pour diviser le contenu. Cela s’applique entre autres aux accordéons, aux listes de contenu, les cartes et aux onglets.
Listes de contenu
-
Lorem ipsum dolor sit amet consectetur adipiscing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
-
Lorem ipsum dolor sit amet consectetur adipiscing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
Cartes
Titre de la carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
Titre de la carte avec lien externe
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Titre de la carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Définir les entrées
Définissez les entrées à l’aide d’une bordure noire de 2 px. Cela s’applique entre autres aux formulaires et aux barres de recherche.
Mettre en évidence la page ou l’onglet actuel
Mettez en évidence les éléments actifs ou consultés par l’utilisateur à l’aide d’une bordure rouge de 2 px. Cela s’applique entre autres aux onglets et aux titres de navigation.
Premier onglet
Lorem ipsum dolor sit amet, consectetur adipscing elit. Quistque lobortis lacinia massa, ac suscipit risus rutrum sed. Lorem ipsum dolor sit amet, consectetur adipscing elit. Quistque lobortis lacinia massa, ac suscipit risus rutrum sed.
Deuxième onglet
Lorem ipsum dolor sit amet, consectetur adipscing elit. Quistque lobortis lacinia massa, ac suscipit risus rutrum sed. Lorem ipsum dolor sit amet, consectetur adipscing elit. Quistque lobortis lacinia massa, ac suscipit risus rutrum sed.
Troisième onglet
Lorem ipsum dolor sit amet, consectetur adipscing elit. Quistque lobortis lacinia massa, ac suscipit risus rutrum sed. Lorem ipsum dolor sit amet, consectetur adipscing elit. Quistque lobortis lacinia massa, ac suscipit risus rutrum sed.
Rayon de bordure
Le rayon de bordure sert à créer des coins arrondis. Les deux principaux jetons utilisés sont
border-radius et border-radius-pill. ucune autre valeur ne doit être
utilisée pour appliquer des coins arrondis.
Border-radius
Presque tous les composants aux coins arrondis utilisent l’élément border-radius avec
un rayon de bordure de 0,25 rem (4 px).
Border-radius-pill
Seuls les badges et les étiquettes affichent des coins entièrement
arrondis. Ces composants utilisent l’élément
border-radius-pill.
Badge Étiquette