Product preview card component

Community feedback

• 

  Ahmed El_Bald•1,020

  @Ahmed-Elbald

  Posted over 1 year ago

  Hello Osman,

  So I think your solution is great regarding the UI and even some of the accessibility features. I've noticed you are using the article element for your card, which is great. However, there are some subtle notes that you might find helpful:

  • The alt text of your image should be descriptive. Placing the text (Perfume Image) as the alt text is quite generic. Instead, try using a longer version that clearly describes the image. Something like: 'Gabrielle Essence Eau De Parfum surrounded by tree leaves....etc'. You can read more about the alt attribute here

  • In the price section you can replace your div.felx-group with a dl which can take key-value pairs to associate them together. That would be something like this:

  <dl>
    <dt>Product Price</dt>
    <dd>$149.99</dd>
    <dt>Original Price</dt>
    <dd>$169.99</dd>
  <dl>
  

  Thank you.

  00

  Marked as helpful