Card component with accessible contrast, custom properties, and BEM

Solution retrospective
What tag should I use for the card title to give it the best HTML semantics? I used <h1> for the title of the card, since it is the only <h1> in the page. However, this is not ideal if I were to reuse the card component in a page with more content. I'm also not sure if a heading tag is even the best option for a card title.
I used "max-width: min(80%, 300px)" to make the card width match the design, as well as to prevent it from going edge to edge on small screens, but I'm using a "magic number" here. Is there a better approach to this?
Any other comments are more than welcome. Thank you!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Hey, Julio Cinquina! 👋
Congratulations on completing your first Frontend Mentor challenge! 🎉 Great work on this challenge! 👍 Your solution looks great! 🙌
Since this is an isolated component, using an
h1
tag for the heading might be fine. In an actual website, though, you're right in that you'd probably want to use a different heading tag for that element (such as anh2
orh3
). I'd still keep it as a heading element though, since it is a heading for the card.Choosing to add a
max-width
to the card component was a good choice. You probably don't need to use themin
function, however. A simpleem
orrem
value should work (e.g.,max-width: 30rem
).Hope you find these suggestions helpful. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful - @buddhi-ashen
What tag should I use for the card title to give it the best HTML semantics? I used <h1> for the title of the card, since it is the only <h1> in the page. - add classes for
h1
,. it make your code more accessible.easy to use in css.use different heading tags. like h3 or h2
cheeres for your challenge!
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