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

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.

Related components

Buttons to emphasize an action.

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

Choose a link variant

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.