Links

By default, links throughout the help center derive their appearance from theme settings and Sass variables.

Custom link styles can be used on elements that need a different visual treatment to links within content areas, for example author links.

Usage

Use .link, .link-implied or .link-article to apply custom styling to links.

<a href="#">This is a standard link</a>
<a class="link" href="#">This is a link using <code>.link</code></a>
<a class="link-implied" href="#">This is a link using <code>.link-implied</code></a>
<a class="link-article" href="#">This is a link using <code>.link-article</code></a>

Use .link-stretched to make a link’s containing block clickable. In most cases, this means that an element with position: relative; that contains a link with the .link-stretched class is clickable.

<div class="card">
  <div class="card-body">
    <h3 class="h2">
      This is a card title
    </h3>
    <p>
      This is some card content containing a <a class="link-stretched" href="#">stretched link</a> which makes the entire card clickable!
    </p>
  </div>
</div>

Questions or feedback about this article? Let us know