Links

Use and behavior for the HTML element.

Accessibility

• When providing the content for the link, avoid generic descriptions like "click here" or "go to". Instead, use specific descriptions.
• For the best user experience links should stand out from the text on the page.
• If a link doesn't have a meaningful href, it should be rendered using the Button component.

Standard Link

<a href="javascript:;">Public Loan Forgiveness</a>

Inline Links

Unifi theme will apply a standardized blue - #397a9c - and enforce an underline for inline-links detected within the following HTML elements:

• p
• li

To modify this behavior, update the following list:

$u-link-intext-selectors: "p, li";

Also, inline links will become a standardized purple - #8963af - when the browser designates them as :visited, and will have their underline removed on hover to accessibly indicate state.

<p>
  Read more about <a href="#">Public Service Loan Forgiveness</a> requirements and access the
  Employment Certification Form (ECF).
</p>

Typography Variants

Links can make use of Typography variants.

<a href="#" class="u-typography--h4 u-link--underline-hover">
  Typography variant h4
</a>