Clickable Group Patterns: Turning Any DesignSetGo Block Into a Link

One of the subtler rules of good card UI: the whole card should be clickable. Not just the title. Not just a button tucked in the corner. The card. Users move their cursor toward whatever looks tappable, and when the hit target is the whole surface, the interface feels effortless. When it’s only a tiny “Read more” link, it feels fiddly.

WordPress makes this surprisingly hard. You can’t nest an anchor tag inside another anchor tag — it’s invalid HTML and screen readers treat it as a single mush. So if your card already contains a “Learn more” button, you can’t just wrap the whole thing in another link.

The DesignSetGo Clickable Group extension solves this with a pattern that’s accessible, keyboard-navigable, and respects nested interactive elements.

How it works

Enable the Clickable Group panel on any container block (Section, Row, Grid, Card), set a URL, and the whole block becomes clickable. Under the hood:

• A small JS handler attaches to the container.
• Click events on the container navigate to the URL.
• Clicks on nested <a> or <button> elements are excluded — they do their own thing.
• Keyboard users get a focusable wrapper with an aria-label.
• The container gets a visible focus ring.

The result: mouse users click anywhere, keyboard users tab to the card and hit Enter, screen readers announce the card as a link, and the “Read more” button inside still works.

The canonical card pattern

Here’s the layout we reach for 80% of the time:

Grid (3 columns)
├── Card (clickable, url=/blog/post-1)
│   ├── Image
│   ├── Heading (h3)
│   ├── Paragraph (excerpt)
│   └── Button ("Read more" → /blog/post-1)
├── Card (clickable, url=/blog/post-2)
│   └── ... same structure
└── Card (clickable, url=/blog/post-3)
    └── ... same structure

Yes, the button URL duplicates the card URL. That’s intentional: the button is the visible affordance, the clickable card is the generous hit target. If JS fails, the button still works.

Patterns that work

Blog post cards. Whole card links to the post. Tag pills inside the card link to tag archives — clicking them does the tag thing, not the post thing.

Team member cards. Whole card opens a bio page. Social icon links inside open LinkedIn/Twitter — they’re excluded from the card click.

Pricing tier cards. Whole card scrolls to a #pricing-details anchor or opens a modal. The “Get started” button inside handles the actual conversion.

Product/category tiles. The tile navigates to the category page. No nested links needed — just make the whole tile one big target.

Patterns that don’t

Cards with multiple competing destinations. If your card has a “Read article” button and a “Save for later” button and a “Share” button, making the card itself clickable creates a hierarchy problem: which action does a click on empty space do? Pick one primary destination or skip the clickable wrapper entirely.

Long-form content with inline links. A blog post section containing paragraphs with inline links inside should not be clickable. The nested links work, but the reading experience (accidental navigation when selecting text) is terrible.

Form containers. Never make a block clickable when it contains form inputs. Clicking an input’s label would trigger card navigation instead of focusing the field.

Accessibility details

• The extension adds role="link" and a proper aria-label to the container.
• Tab order follows the document: users tab to the card, then tab into it to reach the inner button.
• Enter and Space both trigger navigation from the card.
• The focus ring is a visible outline — don’t override it with outline: none in custom CSS.

Used in the right places, Clickable Group is one of the highest-leverage extensions DesignSetGo ships: two settings, a measurable bump in click-through rates, no custom CSS, and no accessibility compromises. If you’ve been shipping cards with tiny “Read more” links as the only hit target — try it.