Link

Description

The web is built on links. The <a> element connects pages and content with each other. According to the HTML standard, links and their state are identified by color. In Circuit, links inherit the color of their surrounding text, are marked by the familiar underline, and indicate states through the weight and color of that underline.

Links that leave the site should open in a new tab or window and carry a visual indicator — the external link icon.

Use Cases

• When navigating to another page within the site.
• When navigating to an external resource.
• When triggering a file download.
• When linking within a page via anchor (href="#section").

Usage

Rules & Guidelines

Stick to the standards: A link navigates — it must not trigger an action. Use a <button> for actions.

Use descriptive labels: Link text must describe the destination. Avoid vague phrases like “click here” or “read more”.

External links: Add target="_blank" and rel="noopener noreferrer". Use the .ext class to render the external link icon and warn users that a new tab will open.

HTML Structure

<!-- Internal link -->
<a href="/path/to/page">Link text</a>

<!-- External link -->
<a href="https://example.com" class="ext" target="_blank" rel="noopener noreferrer">
  External link
</a>

<!-- Download link -->
<a href="/files/document.pdf" class="download" download>Download document</a>

Accessibility

HTML element: Always use <a> — it carries implicit role="link" and is announced correctly by all screen readers. Only fall back to role="link" on non-anchor elements when unavoidable.

Keyboard navigation: Links must be reachable via Tab and activatable with Enter. Do not suppress the focus outline — Circuit’s focus styles satisfy WCAG 2.1 SC 2.4.7.

Screen reader labels: Screen readers (NVDA, VoiceOver) list all links on a page in isolation. Visible link text must be self-explanatory without surrounding context. If the visible text is insufficient, provide aria-label. Example: <a href="…" aria-label="DEHN Annual Report 2024 (PDF)">Download</a>.

Color contrast: Link text must meet WCAG AA — 4.5:1 for body text, 3:1 for large text. The underline alone must not be the only visual differentiator from surrounding text.

Validation: Test with Lighthouse and verify keyboard navigation manually.

Example

Resources

• Link in Figma
• Link in Storybook