Système de design GCComposants
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperç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 texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement 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 mot MargeMarge intérieure Alignement 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 individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Texte
<gcds-text>

Autres noms : bloc de texte, version, légende, corps du texte, paragraphe. Le composant texte est un paragraphe stylisé et formaté qui affiche du contenu écrit de manière accessible.
  • GitHub
  • Figma

Aperçu du composant de texte

Problèmes résolus par le composant texte

Utilisez le composant texte pour :
  • Transmettre de l’information en petits ou grands blocs de contenu écrit pour fournir des détails essentiels sur un programme ou un service sans ajouter un degré élevé de structure ou d’accent.
  • Insérer du contenu écrit après un titre avec une phrase, un paragraphe ou une légende.
  • Appliquer des tailles de police uniformes, un contraste de couleurs et des espaces blancs optimisés pour l’accessibilité.
  • Renforcer l’identité de marque avec des styles et des formats de messagerie uniformes sur toutes les pages Web. Par exemple, l’utilisation de la typographie Système de design GC comme norme pour un style de police uniforme.
  • Diviser le contenu en sections compréhensibles avec des marges verticales et horizontales. La décomposition de votre contenu favorise la lisibilité, simplifie la navigation sur le site et réduit le risque que les gens abandonnent leur tâche.

Composants connexes

Titre pour structurer le contenu en créant des niveaux hiérarchiques qui permettent l’organisation visuelle et mentale du contenu de la page à l’aide des styles de Système de design GC. Masquage accessible pour fournir de l’Information accessible par les technologies d’assistance, comme les lecteurs d’écran, mais invisible pour les utilisateur·rice·s voyant·e·s.

Choisir un rôle de texte

Un rôle est un sous-type de texte à usage spécifique sur une page.

primary (Principal)

Utilisez le primary text-role pour :
  • La plupart du contenu textuel.
  • Le contenu qui est l’objet principal de la section.

secondary (Secondaire)

Utilisez le secondary text-role pour :
  • Soutenir un contenu important, mais secondaire par rapport à la tâche principale.
  • Lorsque l’idée principale de la section peut encore être comprise si le lecteur ignore le texte secondaire.

light (Clair)

Utilisez le light text-role pour : Le contenu qui doit apparaître sur un fond sombre lorsque le rapport de contraste entre le texte clair et l’arrière-plan sombre est conforme aux normes WCAG (Web Content Accessibility Guidelines).
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
2025-05-06