Links

Connected items


How we use it

Utility classes

For a simple link, use the gg-u-link class on the a tag.

If you would like an arrow on your link, add the gg-u-link--arrow to it.

Mixins

If you’d rather use a mixin, then you can!

.el {
  @include style-link;
}

However, the mixin won’t account for theming, whereas the utility classes will.

How they look

On small screens, where hover is not available, the links will show with the text decoration applied.

On larger screens, the links appear with no text decoration, until hovered over.

View demo Open in new window
320 x 568
View code
    
<p><a class="gg-u-link">I am a link</a></p>
<p><a class="gg-u-link gg-u-link--arrow">I have an arrow</a></p>