Skip to content

<a>

The aria-current="page" attribute tells assistive technologies which link represents the current page.

live preview
editable html
<a href="#">Regular Link</a>
<hr>
<a href="#" aria-current="page">Active link</a>

Intent Variants

To convey intent and importance, links can be styled with different variants. The default variant is .primary, which is used for the most important actions on a page, but there are also:

live preview
editable html
<section class="auto-grid">
  <a href="#" class="primary">Primary</a>
  <a href="#" class="secondary">Secondary</a>
  <a href="#" class="contrast">Contrast</a>
  <a href="#" class="success">Success</a>
  <a href="#" class="info">Info</a>
  <a href="#" class="warning">Warning</a>
  <a href="#" class="danger">Danger</a>
</section>