What's the current best practice for linked card markup?
Goal: an accessible card containing an image, heading, description, CTA, etc. "Clicking" anywhere on the card takes the visitor to the target link.
Here's a Pen demonstrating some common card component patterns, but all are problematic to some degree, either for the visitor, the developer, or both.
5 Replies
your goal is as vague as saying "i want an ocean", because there's that many possibilities of doing this
you can check some in #Challenge #3: HTML is Hard
and even kevin made a video about this challenge: https://www.youtube.com/watch?v=PGvgdZuQu6w
Kevin Powell
YouTube
Is HTML the hardest language?
✅ Join the Discord: https://css.community
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with conf...
unless you're specific about what you want in your card, the possibilities are endless
Perfect! Taking a look now. Thanks!
TL/DR: KP recommends the fourth approach I demo'd in my CodePen above.
I assumed there'd be a better way, but perhaps this is the best we have right now 🤷
for that html and that intent, yes, it is the best approach
but for something you want, maybe it would need changes