Product preview card component

Community feedback

• 

  Thomas Hertog•885

  @thomashertog

  Posted about 2 years ago

  Visually very similar to the design so kudos for that.

  It has some improvements that can be made though

  • You used an <h1> for the name of the product and an <h4> for the product type perfume. This is not how headings work (imagine reading a book and you have a table of contents going from 1. to 1.1.1.1. but the 1.1. and the 1.1.1. are missing). Don't use headings for styling, do that in your CSS
  • The product image is meaningful content so it should be in the HTML (not added as a background-image)
  • The icon on the button is purely decorative so it should be added via CSS (with the use of pseudo elements) or hidden from assistive technology
  • Using absolute positioning for the icon in the button feels really weird, though can be fixed with along with the previous one
  • The button does not have a type attribute (type=button will do)
  • There's a typo in the name of your dark-cyan color (may seem small, but typo's will eventually haunt you later on when trying to reuse variables), also casing is inconsistent
  • Font-size (as well as padding/margin) should be in em/rem

  12

  Marked as helpful