You have two approaches: 1) Wrapper approach: Wrap the entire card in a Link component (better semantics), or 2) Stretched link technique: Set the card to position: relative, add a link inside, then add an element inside that link with position: absolute and inset: 0. However, the stretched link approach can interfere with content editing access for clients. For clients using Content Editor, use a CSS solution that disables the overlay when in edit mode: body:not([tabindex="0"]) [data-card]::after { content: ""; position: absolute; inset: 0; }