<div class="card">
  <div class="card-content">Card using map and area</div>
  <map name="card">
    <area
    alt="Design Systems Hot Takes"
    href="https://blog.damato.design"
    shape="default"
    target="_blank"/>
  </map>
  <img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIBAAA="
    aria-hidden="true"
    height="100%"
    width="100%"
    usemap="#card"/>
</div>

<a href="https://blog.damato.design" class="card">
  <div class="card-content">Card using block anchor</div>
</a>
.card {
  display: inline-grid;
}

.card:focus-within {
  outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
}

.card > :not(map) {
  grid-area: 1 / 1 / -1 / -1;
}

.card > map {
  position: absolute;
  transform: scale(0);
}

body {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}

.card {
  aspect-ratio: 3/4;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: .25rem;
}

.card-content {
  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  font-size: 2em;
  padding: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.