Text
<gcds-text>

Also called: text block, copy, caption, body text, paragraph.

Text is a styled and formatted paragraph that displays written content in an accessible way.

• GitHub
• Figma

Problems text solves

Use the text component to:

• Convey information in small or large blocks of written content to provide essential details about a program or service without adding a high degree of structure or emphasis.
• Insert written content after a heading with a sentence, paragraph, or caption.
• Apply consistent font sizes, colour contrast, and white space that we've optimized for accessibility.
• Reinforce brand identity with consistent messaging styles and formats across web pages. For example, using GC Design System typography as a standard for consistent font style.
• Divide content into understandable sections with vertical and horizontal margins. Breaking up content supports readability, simplifies site navigation, and reduces task abandonment.

Choose a text role

A role is a text sub-type that has a specific use on a page.

Primary

Use the primary text-role for:

• Most text content.
• Content that is the main focus of the section.

Secondary

Use the secondary text-role for:

• Supporting content that is important but secondary to the main task.
• When the main idea of the section can still be understood if the reader skips the secondary text.

Light

Use the light text-role for:

Content that needs to appear on a dark background when the contrast ratio between the light text and dark background meets WCAG (Web Content Accessibility Guidelines) standards.