<!-- start card -->
<a href="page-1.html" class="card" id="card--verbose">
  <h2 class="card__title">
    <span class="card__link">
      <span class="card__link-inner card__title-icon-wrapper">
        <span class="card__title-icon far fa-frown-open" aria-hidden="true"></span>
        Verbose card link
      </span>
    </span>
  </h2>
  <img class="card__img" src="http://via.placeholder.com/400x300/333333/ffffff" alt="Placeholder image which reads 400x300.">
  <p class="card__date">
    <abbr title="Saturday">Sat</abbr> 05.09.2020</p>
  <p class="card__description">An HTML5 block link wraps the card's contents. This creates verbose link output in screen readers.</p>
  <h3 class="visually-hidden">Tagged as</h3>
  <ul class="card__tags">
    <li class="card__tag">Tag 1</li>
    <li class="card__tag">Tag 2</li>
    <li class="card__tag">Tag 3</li>
  </ul>
</a>
<!-- end card -->

/* colours */

:root {
  --color-darkgrey: rgba(0, 0, 0, 0.7);
  --color-midgrey: rgba(0, 0, 0, 0.6);
  --color-grey: rgba(0, 0, 0, 0.25);
  --color-yellow: rgba(255, 255, 0, 0.5);
  --color-pink: rgba(255, 0, 255, 0.25);
  --color-blue: rgba(0, 255, 255, 0.25);
  --color-linkblue: rgba(0, 100, 150, 1);
}

/* card list */

.card-list {
  &__title {
    font-size: 3em;
    font-weight: normal;
    margin: 0.25em 0;
  }

  &__items,
  &__item {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  &__items {
    display: flex;
    flex-direction: row;
  }

  &__item {
    margin-right: 1em;
  }
}

/* card */

.card {
  position: relative; /* for a.card__link positioning */
  font-family: serif;
  text-decoration: none;
  background-color: var(--color-white);
  color: #000;
  display: flex; // to give us control over visual ordering
  flex-direction: column; // stack child elements vertically
  padding: 1em;
  border: 1px dotted var(--color-darkgrey);
  box-shadow: 3px 3px rgba(0, 0, 0, 0.05);
  width: 17em;

  &:focus, // old Edge
  &:focus-within {
    outline: 0.25em solid var(--color-linkblue);
    outline-offset: 0.1em;

    .card__link--block {
      outline: none; // only show one outline - on the parent card
    }
  }

  > * {
    order: 2; /* display everything else after the elements with order 0 or 1 */
  }

  // date

  &__date {
    order: 1; /* second, above heading */
    font-family: sans-serif;
    font-size: 0.8em;
    text-transform: uppercase;
    color: var(--color-midgrey);
    margin: 0 0 0.25em;
  }

  // description

  &__description {
    font-size: 1.1em;
    color: var(--color-dark-grey);
  }

  // image

  &__img {
    order: 0; /* first, above date */
    display: block;
    width: calc(100% + 1em);
    height: auto;
    margin: -0.5em -0.5em 1em;
  }

  // link

  &__link {
    color: var(--color-linkblue);

    &--block {
      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }
  }

  &__link-inner {
    text-decoration: underline;

    a.card:hover &,
    a.card__link:hover & {
      text-decoration: none;
    }
  }

  // tags, non-clickable

  &__tags,
  &__tag {
    display: inline-block;
    padding: 0;
    margin: 0;
    font-size: 1em;
  }

  &__tag {
    font-family: sans-serif;
    font-size: 0.75em;
    text-transform: uppercase;
    border: 1px solid var(--color-grey);
    padding: 0.25em 0.4em 0.15em;
    margin-right: 0.5em;

    &:nth-child(1) {
      background-color: var(--color-yellow);
    }

    &:nth-child(2) {
      background-color: var(--color-pink);
    }

    &:nth-child(3) {
      background-color: var(--color-blue);
    }
  }

  // title, contains link in non-verbose variant

  &__title {
    font-size: 2em;
    font-weight: normal;
    margin: 0;
  }

  &__title-icon-wrapper {
    position: relative; // note this element is inside the non-verbose link, to prevent the relative context being changed
    display: inline-block;
    padding-left: 1.1em;
  }

  &__title-icon {
    position: absolute;
    left: 0;
    font-size: 0.9em;
    top: 0.2em;
  }
}

.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

abbr {
  text-decoration: none;
  cursor: help;
}