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

Build a text component

Text displays non-heading content with matching GC Design System styles to provide accessible text sizes and colour contrast.

Coding and accessibility for text

Ensure accessible character limits

• Maintain the default line length maximum of 65 characters for each line of text to ensure a comfortable, accessible reading length.

• Opt to shorten the line length by setting the character-limit attribute to false.

Set the text size

• Set the text size attribute to body or caption.

• Use the default body size value to render a p element with the recommended font size and colour contrast.

• Choose a caption to present brief context about a section or piece of content.

• Opt to display smaller text by setting the size attribute to caption to render a small element inside a p element.

Use text styling sparingly

• Only use underline for links.

• Use bold text sparingly.

• Avoid using bold text as a heading. Headings are the accessible component for identifying content sections.

• For bold text, use the strong tag within the gcds-text component to highlight terms and emphasize key points.

• Only use italics for:

  • Legal reference, like the Accessible Canada Act.

  • Words in other languages, including Latin.

  • Titles of publications, works of art, and mathematical and scientific material.

• Use the em tag within the gcds-text component to emphasize specific words or phrases.

Get your code

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: Following standard practice, the code builder uses English for all code elements.