3-Column Preview Card Component

Community feedback

• 

  hardy•3,660

  @hardy333Posted about 3 years ago

  Hey, nice job, card looks good.

  Few suggestions:

  • use cursor:pointer; on buttons.
  • use border: 1px solid transparent; on buttons this prevents content shift when hovering them.

  Good luck ...

  Marked as helpful

  3
• 

  Muhammad Shajjar•1,100

  @muhammadshajjarPosted about 3 years ago

  Hey, great work on this one,

  • The Learn more should be a link, in my opinion, using the a tag and not a button. Use the button if it will act as a control for something. But on this, it is treated as a link, go for a tag.
  • For any decorative images, like in this case the icons in your cards , you should leave the alt="" and add aria-hidden=" true" or role=" presentation" to make sure that all screen readers will ignore those icons.
  • Use only one h1 per page. Don't judge heading level by the weight of text given in design
  • Instead of going for width try to go for max-width. Writing fixed things would cause issues.
  • To overcome your accessibility issue you should need to add some semantic markers to designate sections of the page as the header, navigation, main and footer e.g:

  <main>
       <div></div>
    </main>
    <footer>
  </footer>
  

  Thanks, hope it would help!

  Marked as helpful

  1

  ---

  

  Catherine Vuthi•150

  @esthercatePosted about 3 years ago

  @muhammadshajjar Thank you. This is very insightful

  0