Design comparison
Solution retrospective
I made a small extension by allowing for multiple category tags and incorporating some accessibility elements (which I need to do more of).
What challenges did you encounter, and how did you overcome them?For accessibility reasons, I did not want to wrap the entire card content in <a> tags, which made it difficult to create the intended hover effect. In my solution, the hover effect (change in font color) when the mouse is directly on the title.
What specific areas of your project would you like help with?Any comment on the React approach would be appreciated. In this instance, I favored using props over creating a compound component.
I also need help with accessibility best practices.
Community feedback
- P@gabeiPosted about 1 month ago
This looks awesome! I love the card component. It is more modular and is ready to accept variable amounts of props (like additional tags).
That card hover animation is tricky. After some research I ended up adding an empty
:afterpseudo element to my link so that I could make it span the whole card without actually wrapping the card in an<a>tag.Speaking of hovering: As of writing this, your card does not have the box-shadow change on hover.
Happy coding!
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord