# Make Whole Cards Clickable

> Makes an entire Group, Column or Query Loop card with the class "wpide-card-link" clickable, using the link in its heading, so visitors don't have to hit the small title link.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: cards, links, query-loop, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-clickable-cards/

## Code

```css
.wpide-card-link {
    position: relative;
}

.wpide-card-link :is(h2, h3, h4, .wp-block-post-title) a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.wpide-card-link a:not(:is(h2, h3, h4, .wp-block-post-title) a),
.wpide-card-link button {
    position: relative;
    z-index: 2;
}

.wpide-card-link:hover {
    cursor: pointer;
}

.wpide-card-link:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}
```

## Notes

The link in the card's heading (or Post Title block) becomes the click target; other links and buttons inside stay clickable on their own.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Make Whole Cards Clickable" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/