Skip to content
UGA Online Design System

Links

Links are styled at the element level for unclassed <a> tags. The .cmp-base-link class provides a reusable link style mixin for custom components.

Important: The design system’s base link styles only apply to <a> elements with no class attribute (via :not([class]) selectors). If you add any class to a link, the base styles will no longer apply. In those cases, add .cmp-base-link alongside your other classes to retain the link styling.

Section titled “Default Link”

Unclassed links with an href attribute receive Olympic color with underline, toggling on hover.

This is a default link in a paragraph.

<p>
  This is a
  <a href="#">default link</a>
  in a paragraph.
</p>
Section titled “Link States”
StateColorText Decoration
DefaultOlympic (#004E60)Underline
HoverOlympic (#004E60)None
VisitedAthens (#66435A)Underline
ActiveBulldog Red (#BA0C2F)Underline
Section titled “Base Link Class”

The .cmp-base-link class applies the base link mixin for use on custom components or elements that need link-like styling.

<span class="cmp-base-link">Styled like a link</span>
Section titled “Print Behavior”

In print media, links display their URL in parentheses after the link text (except tel: links), use blue color, and remove underlines.

Example Link (https://example.com)