Clickable cards are a familiar design pattern on many websites. They are often used for things like news articles, product listings, or blog post previews. A typical card might include a heading, an image, a category label, and a short description.

From a user experience perspective, it’s helpful if the entire card is clickable, and not just the headline. This makes it easier for users to interact with the content, especially on touch screens or smaller devices.

However, wrapping the entire card in a link isn’t ideal. If the card includes other interactive elements like buttons or nested links, putting everything inside a single <a> tag can cause issues with accessibility and valid HTML. It can confuse screen readers and break expected keyboard behavior. Remember that the screen reader will read the whole thing as the link description!

A better approach is to let the link element contain only the heading, which is the content that best describes the link target. Then use CSS to make the entire card a clickable area. Here’s how you can do it using pseudo-elements:

HTML:
<article class="card">
  <img src="example.jpg" alt="Teaser image">
  <span class="category">Category name</span>
  <h2><a href="/full-article">Heading</a></h2>
  <p>Short description that draws the reader in.</p>
</article>

CSS:
.card {
  position: relative;
}
.card a::before {
  content: " ";
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

Explanation: The ::before pseudo element expands the clickable area of the a element to fill all space available in the card by using absolute positioning and inset: 0 (shorthand for top, bottom, left and right – all set to zero means the element fills the height and width). The position property of the card needs to be set to relative to limit the available space to the card. z-index is used to make sure the clickable area stays on top and cursor:pointer; gives the user the change of mouse pointer they expect when hovering over a link.

Some pointers on clickable cards:

• Make sure the actual link element gives enough information. Avoid using the same general text for all cards, like “Read more”. Typically, the heading gives the correct link content.
• Make sure the card is reachable by keyboard and has a visible focus state.
• Make sure to implement hover state for the card, to signal its’ interactivity.
• Test your solution with screen readers.