Link Component

The link module itself does not provide any base styling of anchor tags, that styling instead comes from the global module.

Nested Link

When nested amongst paragraphs of text, the anchor tag's default underline gives visual affordance that this selection of text is a hyperlink . The color of the link alone would not be sufficient affordance in this context and therefore the underline is required and must not be removed.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  <a href="https://www.ebay.com"> tempor incididunt </a>
  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  exercitation
  <a href="https://www.ebay.com"> ullamco laboris </a>
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in
  <a href="https://www.ebay.com"> voluptate velit esse cillum </a>
  dolore eu fugiat nulla pariatur.
</p>

Nav Link

Nav links are typically used in blocks of navigation within sidebars, allowing the user to navigate the site hierarchy.

Nav links remove the default underline. The "color alone" principle mentioned above is not violated, because in this context there are other visual affordances (e.g. heading, placement, spacing and surrounding elements) that these elements are interactive.

<nav aria-labelledby="nav-link-heading" role="navigation">
  <h2 id="nav-link-heading">Navigation</h2>
  <ul>
    <li>
      <a class="nav-link" href="#link1"> Link 1 </a>
    </li>
    <li>
      <a class="nav-link" href="#link2"> Link 2 </a>
    </li>
    <li>
      <a class="nav-link" href="#link3"> Link 3 </a>
    </li>
    <li>
      <a class="nav-link" href="#link4"> Link 4 </a>
    </li>
    <li>
      <a class="nav-link" href="#link5"> Link 5 </a>
    </li>
  </ul>
</nav>

Legal Link

For a link used in legal text (such as Terms & Conditions), use the legal-link .

<div>
  <a class="legal-link" href="https://www.ebay.com"> Terms & Conditions </a>
</div>
<div>
  <button class="fake-link legal-link" type="button">Privacy Policy</button>
</div>

Fake Link

To style a button to look like a link, use the fake-link class.

<button class="fake-link" type="button">Button</button>