Links on GitHub

Links

A link is a hyperlink from one page to another.

To create a Brightspace UI-styled link, using the <d2l-link> custom element, and treat it like a native <a> element.

Example (html)
<d2l-link>Normal Link</d2l-link>
Normal Link
Accessibility: Provide Descriptive Link Text

Describe the purpose of the link as the content of the <a> element. This ensures the user can uniquely distinguish each link from the others on the page. Avoid ambiguous link text such as “click here”.

WCAG 2.0 Level A
H30: Providing link text that describes the purpose of a link for anchor elements

For links which require more emphasis, add the main attribute:

Example (html)
<d2l-link main>Main Link</d2l-link>
Main Link

To create a link with a smaller font-size, add the small attribute:

Example (html)
<d2l-link small>Small Link</d2l-link>
Small Link

For cases where a clickable icon which is semantically an <a> is needed, see: Clickable Icons.

Installation

To use this component in your application, you can install it using Bower:

bower install d2l-link

Then import d2l-link.html:

Example (html)
<link
  rel="import"
  href="bower_components/d2l-link/d2l-link.html">

Show me the code!

Want to see, contribute or learn more about the code?
Check out "BrightspaceUI/link" on GitHub!

More information on developing with Brightspace UI components can be found in the Developer Guide.