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

Créer une boîte

Utilisez les boîtes pour ajouter un élément enveloppant associé à une largeur maximale définie, en fournissant une boîte pour les autres contenus et composants généralement présentés de manière verticale de haut en bas.

Codage 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 :

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.

Centrer la boîte

Les boîtes ne sont pas automatiquement centrées. Pour centrer une boîte sur une page, ajoutez la propriété centered.

Obtenez votre code

Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.

1. Choisissez des valeurs de code pour obtenir l'élément que vous voulez.

2. Obtenez le code et intégrez-le dans votre environnement.

3. Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).

Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.