Cover Link

Overview

The Cover Link object allows you to use semantic links to cover the entire area of a parent element. This allows us to keep the HTML as accessible as possible without affecting the end-user experience.

Basic Usage

To use the cover link, add the o-cover-link class to the element you would like to be clickable. Then place the o-cover-link__overlay on the link element contained within that parent.

<div class="o-cover-link">
  <p>Little squirrels live here and play. Everything's not great in life, but we can still find beauty in it. Let that brush dance around there and play.</p>
  <a href="#" class="o-cover-link__overlay styled-link">Child Link Element</a>
</div>

Examples

Elements with Padding

A simple use case could be use in a navigation with padded list elements.

<ul class="o-list-inline">
  <li class="o-cover-link o-list-inline__item u-p-vert-lg u-p-horz-xl">
    <a href="#" class="o-cover-link__overlay styled-link">
      Trees
    </a>
  </li>
  <li class="o-cover-link o-list-inline__item u-p-vert-lg u-p-horz-xl">
    <a href="#" class="o-cover-link__overlay styled-link">
      Mountain
    </a>
  </li>
  <li class="o-cover-link o-list-inline__item u-p-vert-lg u-p-horz-xl">
    <a href="#" class="o-cover-link__overlay styled-link">
      Grass
    </a>
  </li>
  <li class="o-cover-link o-list-inline__item u-p-vert-lg u-p-horz-xl">
    <a href="#" class="o-cover-link__overlay styled-link">
      River
    </a>
  </li>
  <li class="o-cover-link o-list-inline__item u-p-vert-lg u-p-horz-xl">
    <a href="#" class="o-cover-link__overlay styled-link">
      Sky
    </a>
  </li>
</ul>

Nested Links

The Cover Link object allows you to nest links within your clickable area as well. The nested links will be positioned above the Cover Link so they can be clicked.

Headline goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare urna sit amet convallis vestibulum. Ut tempus placerat orci, in tincidunt dui ultrices eu.

Call to action

Tagged in Events

<div class="c-card o-cover-link">
  <div class="c-card__img">
    <div class="o-ar o-ar--16:9">
      <img class="o-ar__item" src="/images/placeholder/hospital-16-9.jpg" alt="">
    </div>
  </div>
  <div class="c-card__header">
    <h3 class="c-card__title">Headline goes here</h3>
  </div>
  <div class="c-card__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare urna sit amet convallis vestibulum. Ut tempus placerat orci, in tincidunt dui ultrices eu.</p>
  </div>
  <div class="c-card__footer">
    <a href="#" class="c-button o-cover-link__overlay">Call to action</a>
    <div class="u-m-t">
      <span>Tagged in <a href="#" class="styled-link">Events</a></span>
    </div>
  </div>
</div>