GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind 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 role sets the main style of the link.

Default role

Use the default role for:
  • Most links.
  • Links that are placed on a light background.

Light role

Use the light role 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
2026-02-12