Ensure you place position-relative on the parent
The stretched link element can be used to expand a link's clickable area to its nearest parent with position: relative
. You can place the .position-relative
atomic class on parent element and .stretched-link
to the anchor tag itself.
A word of warning: you should only use this pattern when the relative parent contains at most one clickable element.
HTML
<article class="padding-lg position-relative border">
<a href="#" class="stretched-link">This entire card is clickable.</a>
<p>Ensure you place position-relative on the parent</p>
</article>