Links

Clickable text element to navigate to page section, another page or open an overlaid window such as modal dialog or popover

Default

Display within body copy for articles, hub cards, footer, or recommendations.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Standalone

Display independently with a call to action. Some examples are for finding a store, or viewing related products.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Icon on left

Display standalone link with icon on left.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Icon on right

Display standalone link with icon on right.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Always use a <button> element for the tag prop when there is no href attribute that can be applied to the link. Examples are:
    • Toggling a display to full screen
    • Opening a modal window
    • Triggering a popup menu
    • Playing media content
  • Always use the default <a> element for a link when the link will navigate the user to the location specified by the href attribute
  • Avoid using only “click here” or “start here” but if screen space for text is minimal:
    • Provide text that can be read by screen readers
    • Use an inline element for hidden text with the 'cdr-sr-only' class
  <cdr-link>
    Start here <span class="cdr-sr-only">for help finding the proper sleeping bag </span>
  </cdr-link>
1
2
3
  • Ensure assistive technology can find all links on a page:
    • Always provide a href attribute. Empty href attributes are not considered true links
    • Ensure that each link can be accessed via the keyboard, don’t manipulate the default tab index
    • When using images as links, the alt attribute acts as the link text. Describe the action or hyperlink that the image represents

This component has compliance with following WebAIM’s accessibility guidelines:

  • Using text color with a Level AA contrast ratio of 4.5:1 contrast between the text color and the background but only when displayed on light backgrounds