Stats preview card component - Semantic HTML, Flexbox, mobile first
Design comparison
Solution retrospective
I built this component mostly with BEM css to keep the styling scoped to the component itself, but using CUBE CSS also with some global properties (that I imagine would be set by design tokens globally if it were in a larger project) - accent colours being selected directly rather than by a class for example:
h2 span {
color: var(--clr-accent);
}
I also decided to use only one image src for both desktop and mobile views; using the aspect-ratio property to alter the image ratio for the mobile view. The cropping is slightly different but I think it's a cleaner solution than switching out images.
Community feedback
- Account deleted
Hey man firstly it looks identical so it couldnt be any better! I do have a slighty selfish reason for commenting, i've noticed with your solutions that the measurements are almost if not perfect with the design screenshots. Can you serve up some advice as to how you get the measurements so accurately because currently i am just guessing then adding or subtracting and guessing again until I get it as close by eye as possible. If you also use this terrible technique i appologise and I am simply awefull at it. Any advice would be greatly appreciated! awesome design.
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