Product Preview Card Component

Community feedback

• 

  P

  Stefan Vetsch•140

  @vstmPosted 2 months ago

  Congratulations on your solution, the code is really clean and easy to read. I liked how you solved the responsive image using the hidden/block method with the breakpoints - why didn't I hink of that :D. I don't have that much to add to improve it, but there are some things that caught my eye (and some of those points are a bit nit-picky):

  • The empty div around the <img>-tags could be removed
  • There are two <h1> tags, one for the product name and one for the price, which is not strictly wrong but here it could be easily avoided - for example using a <h2>, a <strong> tag or just a plain <span> tag for the price (there is no semantic HTML tag for a money amount as far as I know).
  • xl:w-2/5 lg:w-3/5 w-11/12 - I'm not sure if those width's are necessary, just setting the max-w-* might be sufficient (I haven tested it though).
  • rounded-bl-2xl rounded-tl-2xl could be shortened to rounded-l-2xl, and rounded-tr-2xl rounded-tl-2xl could be shortened to rounded-t-2xl. This one is a matter of taste.
  • I've seen you kept the camelCase notation for the color names, I would have changed it to kebab-case (so instead of text-neutral-darkGrayishBlue I would have set it up so I could write text-neutral-dark-grayish-blue). Again this one is just a matter of taste.

  So again, great solution overall - I actually learned about the ratio-widths (w-11/12 etc) which I didn't know. I nevertheless hope my points might help you a bit.

  Happy coding! :D

  0