GC Design System Components
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

Link
<gcds-link>

Also called: anchor, hyperlink, call to action.

A link is a navigational element that brings a person to a new page, website, file, or section on the current page.

  • GitHub
  • Figma

Link component preview

A link is a navigational element that takes a person to a website or opens a source, like a pdf.

Problems component solves

Use links to:

  • Allow a person to move fluidly between different pages or sections of a website or application.
  • Direct people to external websites, clearly indicating when the link leads outside the current site.
  • Let a person skip to a section heading using anchor links in a table of contents or page summary. They can then directly access specific sections or content without scrolling.
  • Connect to email addresses or phone numbers, so a person can initiate communication directly by selecting the link.
  • Start downloads for files, providing users with direct access to documents, media, or other downloadable content.
  • Skip past navigational elements to get to main content.

Buttons to emphasize an action.

Details to provide a way to hide or show a section of content.

A variant sets the main style of the link.

Default variant

Use the default variant for:

  • Most links.
  • Links that are placed on a light background.

Light variant

Use the light variant for:

Links that need to appear on a dark background. Make sure the contrast ratio between the light link and dark background meets (WCAG) Web Content Accessibility Guidelines standards.

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
2025-05-06