Système de design GCDémarrerAperçu des modèles de pagePage de baseAperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texteAperçu des raccourcis CSSRéinitialisation des stylesMise en page réactiveÉtatDimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilitéPoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de motMargeMarge intérieureAlignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuelCouleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordureNoms des icônesTaille de l'icôneImageCurseurÉvénements de pointeurTransitionAperçu des stylesUnités de styleCouleurEspacementTypographieNous contacterS'impliquerTrouvez une démo
Titre <gcds-heading>
Autres noms : titre de la section, sous-titre.Un titre établit les niveaux d’une structure hiérarchique pour organiser le contenu d’une page.
Classez les niveaux de titre de manière hiérarchique
Les niveaux de titre suivent un ordre séquentiel et hiérarchique : les niveaux supérieurs ont un texte d’affichage plus grand que les niveaux inférieurs.
Définissez des niveaux de titre corrects et cohérents pour aligner les titres codés et visuels sur une page. Des titres cohérents favorisent une expérience équitable pour les personnes qui utilisent des technologies d’assistance.
Classez les titres de manière séquentielle, du plus bas au plus élevé (H1 à H6).
Évitez de sauter des niveaux de titre. Restructurez plutôt le contenu de manière à ce que les titres soient utilisés de manière séquentielle, du plus grand (H1) au plus petit (H6).
N’utilisez un titre H1 qu’une seule fois sur une page. D’autres types de titres peuvent être utilisés plusieurs fois.
Utilisez les titres H2 pour décrire les sections individuelles. Chaque section doit avoir un titre H2.
Utilisez les titres H3 à H6 dans les sections. Les sections peuvent contenir plusieurs titres H3-H6, à condition qu’ils soient placés dans l’ordre hiérarchique.
Maintenez des limites de caractères accessibles
Conservez la valeur character-limit par défaut pour chaque ligne de titre en réglant l’attribut à true pour une expérience de lecture agréable et accessible. Ces valeurs par défaut créent une longueur de ligne équilibrée et cohérente entre les tailles de police des titres.
Limitez les limites de caractères aux longueurs suivantes pour maintenir un équilibre visuel entre les titres d’une page :
31 caractères pour H1.
35 caractères pour H2.
40 caractères pour H3.
45 caractères pour H4.
50 caractères pour H5.
57 caractères pour H6.
Utilisez un espacement cohérent
Conservez l’espacement par défaut pour une expérience de lecture agréable et accessible. Ces valeurs par défaut créent des espaces visuels et des séparations entre les différentes sections.
Conservez les valeurs d’espacement suivantes pour maintenir un équilibre visuel entre les titres d’une page :
Par défaut margin-bottom: 300 pour tous les niveaux
Par défaut margin-top: 0 pour H1 et 600 pour H2 à H6
Exemples
Explorez les différentes façons de configurer le composant. Chaque exemple présente une mise en œuvre fonctionnelle et du code prêt à copier.
Ces attributs sont requis pour que le composant fonctionne correctement.
tag
L’attribut tag définit l’élément de titre HTML approprié pour le niveau sélectionné.
<gcds-heading tag="h2">Titre</gcds-heading>
Attributs facultatifs
Ces attributs vous permettent de personnaliser ou d’enrichir le comportement et la présentation du composant.
character-limit
L’attribut character-limit définit la longueur de ligne maximale en nombre de caractères pour chaque niveau de titre, assurant une longueur de lecture confortable et accessible.
L’emplacement par défaut vous permet d’injecter du contenu personnalisé dans la zone de contenu principale du composant, et les emplacements nommés, dans des zones spécifiques.
default
L’emplacement par défaut sert à ajouter du texte au titre.
<gcds-heading tag="h2">Heading</gcds-heading>
Générateur de 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.
Choisissez des valeurs de code pour obtenir l'élément que vous voulez.
Obtenez le code et intégrez-le dans votre environnement.
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. Titre 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 compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes. Fournir des commentaires Signaler un problème sur GitHub 2026-09-14