Components
GC Design System components are user interface building blocks that address different user objectives. Each comes with reusable code, best practice advice, and accessibility tips.
Browse components
We're sharing components as we build them.
A path to the current page from each preceding level of the site's hierarchy.
Other names: breadcrumb trail.
An interactive object that emphasizes an action.
Other names: call to action, CTA.
A box containing structured, actionable content on a single topic.
Other names: tile, content card
An option or set of options where any of the available boxes can be selected.
Other names: checklist.
A container is a basic box layout with a set width for its contents.
Other names: wrapper, box.
A date input is a space to enter a known date.
Other names: dates, dateinput, date, memorable date.
A timestamp of the last page update.
Other names: last updated, version date.
An interactive switch to expand or collapse content.
Other names: accordion, collapse.
A description of a problem blocking a user goal.
Other names: inline error.
A list of user errors on a page or in a flow.
Other names: error overview.
A group of multiple form elements.
Other names: form field.
A file selector for document transfer.
Other names: file input, dropzone.
The Government of Canada branded footer landmark.
Other names: site footer.
A grid is a responsive, flexible column layout to position elements on a page.
Other names: layout, columns, columns layout, grid container.
The Government of Canada branded header landmark.
Other names: global header.
A heading is a title that establishes levels of hierarchy to organize page content into a structure.
Other names: title, section heading, subheading.
A symbol that represents an action or idea.
Other names: symbol, glyph, graphic.
A space to enter short-form information.
Other names: text input, text field.
A switch for displaying either French or English site content.
Other names: language toggle link.
A link is a navigational element that brings a person to a new page, website, file, or section on the current page.
Other names: anchor, hyperlink, call to action.
A short, prominent message that’s part of the page content.
Other names: Contextual alert
A page selector for a range of pages.
Other names: page index, page navigation
A short set of options for single selection.
Other names: radio, radio button
The screenreader-only component is text information only accessible with assistive technologies.
Other names: visually hidden, assistive text.
A space for entering keywords to find relevant information.
Other names: search bar, site search box, search field.
A list of options with a single-option choice.
Other names: dropdown, select menu.
A side navigation is a vertical list of page links on the left side of the screen.
Other names: sidebar menu, lefthand nav, vertical navigation
A corporate identity marker for the Government of Canada.
Other names: GC signature.
A progress tracker for a multi-step process.
Other names: progress indicator, steps.
Text is a styled and formatted paragraph that displays written content in an accessible way.
Other names: text block, copy, caption, body text, paragraph.
A space to enter long-form information.
Other names: textbox.
The theme and topic menu is a navigation to the top tasks of Government of Canada websites.
Other names: global navigation, theme-based navigation.
A top navigation is a horizontal list of page links.
Other names: site menu, navigation, navbar
Canada.ca required components help you meet federal identity standards for the Government of Canada in any product.
Experimental components point out new features we're trying out and think you might like to use.
Help us improve
Have questions or a request? Give feedback on our contact form.
Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.
Give feedback
Report an issue on GitHub
2024-10-17