Link

Ready Added in 2.0.0

Define different styles to integrate links into specific content.

Usage

The Base component determines the default link color.

<a href=""></a>
  • Link 
  • <a href="#">Link</a>

Guidelines

When to use

  • Navigating to a new page or view in your application
  • Navigating to different web page, e.g. external documentation

When to consider something else

  • Opening or closing a modal or dialog
  • Triggering a dropdown menu
  • Submitting data to the server

Microcopy & accessibility notes

Your link should always describe where it will take users. Users tend to scan text online, and elements that stand out (like links) grab attention. Clear links can help users navigate more quickly.

Microcopy & accessibility notes

Your link should always describe where it will take users. Users tend to scan text online, and elements that stand out (like links) grab attention. Clear links can help users navigate more quickly.

For example, instead of:

Learn more

Use:

Learn how to reset your passphrase

Never use a link to say “click here.” A nondescript link forces users to backtrack and read the surrounding text for more context. This is even more problematic for those who rely on screen readers, which can list links for quicker navigation. A list of “click here” isn’t helpful for anyone.

Resources

Muted modifier

If you want the link to apply a muted style instead, just add the .gls-link-muted class to the anchor element. You can also add the class to a parent element, and it will be applied to all <a> elements inside it.

<a class="gls-link-muted" href="#"></a>
  • Link

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <a class="gls-link-muted" href="#">Link</a>

<p class="gls-link-muted">Lorem ipsum <a href="#">dolor sit</a> amet, consectetur adipiscing elit, sed do <a href="#">eiusmod</a> tempor incididunt ut <a href="#">labore et</a> dolore magna aliqua.</p>

Secondary modifier

If you want the link to use the secondary color instead, just add the .gls-link-secondary class to the anchor element. You can also add the class to a parent element and it will be applied to all <a> elements inside it.

<a class="gls-link-secondary" href=""></a>
  • Link

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <a class="gls-link-secondary" href="#">Link</a>

<p class="gls-link-secondary">Lorem ipsum <a href="#">dolor sit</a> amet, consectetur adipiscing elit, sed do <a href="#">eiusmod</a> tempor incididunt ut <a href="#">labore et</a> dolore magna aliqua.</p>

Text modifier

To make a link appear like body text and apply a hover effect, add the .gls-link-text class to the anchor element. You can also add the class to a parent element, and it will be applied to all <a> elements inside it. This is useful for link lists in the page footer.

<a class="gls-link-text" href="#"></a>

  • <ul class="gls-list gls-link-text">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

Heading modifier

To style a link inside a heading element, add the .gls-link-heading class to the anchor element.

<h3><a class="gls-link-heading" href="#"></a></h3>

  • Heading

  • <h3><a class="gls-link-heading" href="#">Heading</a></h3>

Reset modifier

To reset a link’s color, so that it inherits the color from its parent, add the .gls-link-reset class. There won’t be any hover effect at all. This is useful for links inside heading elements. You can also add the class to a parent element, and it will be applied to all <a> elements inside it.

  • Link

    Heading

  • <a class="gls-link-reset" href="#">Link</a>

<h3><a class="gls-link-reset" href="">Heading</a></h3>

Toggle

To use an anchor as parent element and apply the link style on one of its child elements, just add the .gls-link-toggle class to the parent element and one of the .gls-link-* classes to the child element. For instance, you can link the whole card and still have the hover effect on the heading.

<a class="gls-link-toggle" href="#">
    <span class="gls-link-heading"></span>
</a>