Links
@volvo-cars/css v2.3.0
Links navigate users between pages or sections. They provide a less prominent alternative to buttons for navigation actions.
<a href="#" class="link-underlined">Learn more</a>Variants
Section titled “Variants”Inline links
Section titled “Inline links”Links within body text are automatically styled with an underline. No class needed—any <a href> without a class gets inline link styling.
Read our terms and conditions before proceeding.
<p>Read our <a href="#">terms and conditions</a> before proceeding.</p>Underlined links
Section titled “Underlined links”Use link-underlined for standalone links that need clear visual indication. These have a 40px minimum tap target.
<a href="#" class="link-underlined">Learn more</a>Plain links
Section titled “Plain links”Use link-plain for links in navigation or contexts where interactivity is already clear. Only shows underline on hover/press.
<nav class="flex flex-col gap-8"> <a href="#" class="link-plain">Models</a> <a href="#" class="link-plain">Accessories</a> <a href="#" class="link-plain">Service</a></nav>Accessibility
Section titled “Accessibility”Links are keyboard accessible by default. Key considerations:
- Use descriptive link text that makes sense out of context
- Avoid generic text like “click here” or “read more”
- Don’t use icons in inline links
- Plain and underlined links have 40px tap targets to meet accessibility guidelines