Boîte
<gcds-container>
Autres noms : conteneur, encadré.
Il s’agit d’un modèle de boîte simple associé à une largeur de contenu fixe.
-
GitHub -
Figma
Aperçu du composant de la boîte
Structure d’une boîte
- Le boîte regroupe du contenu dans un espace limité pouvant contenir du texte, des images et d’autres composants. La largeur peut être ajustée, notamment pour limiter la longueur d’une ligne de texte.
- La bordure optionnelle entoure la boîte en indiquant la largeur.
Design et accessibilité des boîtes
Limiter la largeur du contenu
- Veillez à ce que vos lignes de texte ne dépassent pas 65 caractères pour obtenir une longueur de lecture acceptable.
- Limitez la largeur de la boîte pour éviter que les grands écrans n’affichent des lignes de texte trop longues et difficiles à lire.
- Évitez de dépasser la largeur maximale de 71,25 rem (1140 px).
Ajouter une taille de boîte
La propriété size définit la taille d’une boîte. Six tailles sont disponibles :
| Taille | REM | Pixels (px) |
|---|---|---|
full |
100% | 100% |
xl |
71.25rem | 1140px |
lg |
62rem | 992px |
md |
48rem | 768px |
sm |
30rem | 480px |
xs |
20rem | 320px |
La taille de la boîte par défaut est full, ce qui signifie que la boîte occupera la largeur totale de la boîte parente.
Aidez-nous à nous améliorer
Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact.
Quelque chose ne va pas? Signalez-le sur GitHub en créant un