<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.