Given A Row Of Product Cards, Should The Whole Card Be A Link?

Given This Row Of Product Cards:

Should the whole card just link to the product, or would it be better to:

• Link The Brand Name to more products of the same brand.
• Link the reviews to the reviews of the product.
• Link the image and the title to the product.

My Thoughts

Having the products encapsulated in a "card", especially in this specific layout, usually means that it's basically just a fancy button.

But...

Because there's more info on there (Brand, Reviews) it might lead people trying to find more Reebok products just to the single product, where they can find more products by Reebok. It's an extra step but you can still get to more Reebok products from the single product, if that's what they're looking to find.

I'd Love To Know Your Thoughts.

Comments

[Eka]

The whole card should be clickable for the sake of UX, but ideally only the title (and maybe short description) should be linked. Then you may style the a:after with CSS to cover the entire card.

This link has a nice explanation and several solutions: inclusive-components.design/cards/

[Jack Harner 🚀]

I'll definitely look into making the whole card clickable, and thanks for the Inclusive Components link. Accessibility is definitely something I need to focus more on in my work.

[Camilo Gonzalez]

I would honestly go for the whole card a button linking to the product page. This is kind of bias, but if I see something like that in a product page, I just click anywhere in the card to see more details not worrying if I clicked the title or the image, etc. If I need to see more details such as reviews, chances are it is already somewhere in the detail page. Amazon does the same thing too.

[Tyler Smith]

I'm interested in this too. What I've been doing a lot in the last year is adding an absolutely position overlay block link on top of the entire card and having hidden screen reader text inside of it that says it's a link for the thing. I'm not sure if it's the best approach though, so I'm excited to see what answers come up here.

[Ben Halpern]

Slightly different scenario, but on DEV the whole item on list views is clickable to the article and other links like author, etc. are clickable links to those places.

[David Shoes & Co]

Could you please share the JS magic you used to achieve that?