Card component using CSS flexbox and overlay

Community feedback

• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  You want to use main around any content even something a small as this. H1 is different. Since this is the only content on the page you want to use it if possible. If it is part of a larger page you would use the appropriate heading.

  Marked as helpful

  1
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  The card looks very good. Alignment, spacing and the hover effects all look good. Use min-height on the body instead of the height property you have now. I also wouldn't give the card a height. Use spacing between the elements to match the design. If you take off the height you don't need to do too much to match the design. I think you did a good job on the hover and overlay. There are many ways to solve the same problem.

  Wrap your card section in a Main tag and change the H2 to an H1. You shouldn't have to restyle it as you gave it the .title class. Doing these things will clear the accessibility warnings.

  Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

  Hope this helps.

  Marked as helpful

  1

  ---

  

  Rogerio Bautz•180

  @rogeriobautzPosted almost 3 years ago

  @brodiewebdt Thanks for the feedback. I didn't use the main and h1 tags because it's a component and not a whole page, am I wrong?

  0
• 

  Rogerio Bautz•180

  @rogeriobautzPosted almost 3 years ago

  @brodiewebdt I made the changes that you suggested.

  1