Accessible Clickable Cards

Card layout where the card itself isn't an anchor link, but the whole card is clickable (with a :before pseudo element on the main <a>). Links inside of the card are still clickable.

CSS

.grid__item {
  &:hover,
  &:focus-within {
    background-color: #eee;
  }

  a {
    position: relative;
    z-index: 1;
  }

  h2 a {
    position: static;
  }
}

This pattern keeps accessibility intact while making the entire card act as a clickable area.