NFT preview card component with SASS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @azenetesc ,

  I have some suggestions regarding your solution:

  • Anything with a hover style in a design means it's interactive. you need to add an interactive element<a> around the image(image-equilibrium.jpg), Equilibrium #3429, Jules Wyvern`.

  • the icon-view doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden:true or role presentation with empty alt

  • For any decorative images, each img tag should have empty alt="" ( as you did )and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view,icon-ethereum, icon-clock ).

  • The avatar' alt text shouldn't be user profile image , you can set it to Jules Wyvern .

  • Tips for writing 'good' alt text.

  • the link should be wrapping the original image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

  • you can use border-top: to the class="card-footer"" , no need to use <hr class="body-line" /> .

  CSS

  • width: 21.875rem; an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

  • In most cases, use unitless value of the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN

  Overall, your solution is good, Hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Aze•140

  @azenetescPosted over 2 years ago

  @PhoenixDev22 Thanks for the feedback, it means a lot

  1