Four card feature section master

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  👋Hi Jonathan!

  I have some feedback on this solution:

  • I noticed the card border color is darker then it should.
  • The box shadow opacity is too high, try to reduce it.
  • For any decorative images, you should leave the alt="" empty and add aria-hidden="true to make all screen readers ignore those images. In this case all images are decorative images.
  • For each card title, it should not be a heading. It should be a paragraph tag. Heading tag is commons used for titling article or section.
  • Also you may want to make the parent of the cards to be ul and make each card to be li. It's optional but I think it's more semantic than div.
  • For the CSS selector, keep the specificity as low as possible. It will make it easier to maintain and override styling if needed. Using > will increase the specificity unnecessarily. I recommend to use BEM class naming convention to make you write better CSS.
  • Using % for margin, padding, and gap is not recommended since on wide screen and on small screen it may behave weirdly. Use rem or em instead.

  That's it! Hopefully this is helpful!

  31

  Marked as helpful