Stats preview card component using flexbox

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  👋 Greetings, Luca!

  🎉 Congratulations on finishing this challenge! I have some feedback on this solution:

  • Accessibility
    • 👍 Good job on using main landmark!
    • 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 this case, all images are decorative only.
    • For the card bottom element, use ul and wrap each item with li. Don't use br for presentation purposes (making the text move to the next line) instead make the span element as display: block instead. Also, they should not be headings.

  <ul class="card__bottom">
    <li class="bottom__description__one">10k+<span class="break">Companies</span></li>
  </ul>
  

  • Styling
    • Don't limit the height of the body element, it will not allow the users to scroll the page if the page content needs more height. Use min-height instead.
    • For the overlay, you can use pseudo-element instead of div.

  That's it! Hopefully, this is helpful!

  10
• 

  Naveen Gumaste•10,420

  @NaveenGumaste

  Posted over 3 years ago

  Hay ! Good Luca Job you made it look nearly perfect to the preview

  Keep up the good work!

  00