NFT Preview Card Component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @kennbach,

  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="" 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 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.

  • Images must have alt text . The avatar' alt text should be set to Jules Wyvern .

  • Tips for writing 'good' alt text.

  • You can use an unordered list<ul> to wrap class="card-details" and in each <li>, there would be <img > and<p> (never use <span> 's for meaningful content )

  • No need for <div class="card-hr"></div>, you can use border-top: to class="creator" to the class="creator"`.

  • <p>Creation of <a class="creator-name">Jules Wyvern</a></p>

  CSS

  • Set min-height: 100vh; to the body .Using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page.

  Marked as helpful

  1

  ---

  

  Kenneth Lauderbach•140

  @kennbachPosted almost 3 years ago

  @PhoenixDev22 Thank you for taking the time to write in such great detail. I've implemented most everything you suggested for this project, and will certainly use it all on future projects. Thanks again!

  1
• 

  Kai Pereira•240

  @KaiPereiraPosted almost 3 years ago

  Nice job @kennbach!

  Your component is almost fully responsive until you hit around 400px width for your screen which is around the size of the galaxy fold, so just make it responsive when it hits 400px

  Keep up the great work though!

  Marked as helpful

  1

  ---

  

  Kenneth Lauderbach•140

  @kennbachPosted almost 3 years ago

  @KaiPereira Thanks for pointing that out. Not sure how I missed it, but I will implement a fix for this project and keep a lookout for that on my future projects. Thanks!

  0