<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.