link | Vaadin

Polymer-based web component and Sass mixins for a D2L link

[ This description is mirrored from at on 2019-05-10 ]


Published on Bower version Build status

Polymer-based web component and Sass mixins for a D2L link.

Links look like this:

example screenshot of link

For further information on this and other components, refer to The Brightspace UI Guide.


d2l-link can be installed from Bower:

bower install d2l-link

Link Styles

The following link styles are available for use in your application:


This is the standard link style, used in most cases.

example screenshot of standard link


Similarly styled to the standard link, but slightly smaller and more compact.

example screenshot of small link


Same size as the standard link, but bolder.

example screenshot of main link


Link styles can be applied using either a Polymer web component or Sass mixins. Which one you use depends on your technology stack and comfort with each.


Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-link.html:

  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="d2l-link.html">

The native <a> element can now be replaced with <d2l-link>. Similarly to Sass, the small and main link styles can be achieved by adding their corresponding attributes:

<d2l-link href="foo.html">D2L Link</d2l-link>
<d2l-link href="foo.html" small>Small Link</d2l-link>
<d2l-link href="foo.html" main>Main Link</d2l-link>


Import the d2l-link.scss file into your application's Sass. Then apply the d2l-link() mixin to your link elements:

@import 'bower_components/d2l-link/d2l-link.scss';

.my-link {
	@include d2l-link();

The small and main styles can be applied by adding corresponding attributes to the HTML markup:

<a href="foo.html" class="my-link">D2L Link</a>
<a href="foo.html" class="my-link" small>Small Link</a>
<a href="foo.html" class="my-link" main>Main Link</a>

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

If you don't have it already, install the Polymer CLI globally:

npm install -g polymer-cli

To start a local web server that hosts the demo page and tests:

polymer serve

To lint (eslint and Polymer lint):

npm run lint

To run unit tests locally using Polymer test:

npm run test:polymer:local

To run Galen Tests, which test the resolved CSS:

npm run galen:local:run

To lint AND run local unit tests AND Galen tests:

npm test

Dumping Galen Output

The output of the Galen tests can be dumped using the command npm run galen:local:dump. Screenshots of the test objects will be put in test\acceptance\dumps, and can be used to perform perceptual diffs before/after any changes. The "baseline" version should be committed to source control.


Commits and PR merges to master will automatically do a minor version bump which will:

  • Update the version in package.json
  • Add a tag matching the new version
  • Create a github release matching the new version

By using either [increment major] or [increment patch] notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.


Link to this version
ImportedReleased 16 February 2018Apache License 2.0
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (3.5.1)
Browser Compatibility
Install with
bower install --save BrightspaceUI/link"#4.0.2"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 4.0.2


  • d2l-colors#^3.1.2
  • d2l-polymer-behaviors#^1.3.0
  • polymer#1.9 - 2