Blog preview card

Community feedback

• 

  Rebecca Padgett•2,100

  @bccpadge

  Posted over 1 year ago

  Hello @Jonee2. Congratulations on completing this challenge!!!🎉

  You can wrap the the img and name in a div and then use flexbox to align them. Be sure to change the h3 to a h2 because heading tags must be used in chronological order. You can use gap property to add space between the elements as well.

  div{
   display: flex;
   align-items: center;
  }
  

  I hope you find this useful and don't hesitate to reach out if you have any questions.

  20
• 

  

  Grace•32,130

  @grace-snow

  Posted over 1 year ago

  This needs a lot of the same changes as your QR code solution. Apply those here.

  The only additional issues I note are:

  • if using inline svgs they need to either be aria-hidden if they are decorative images, or they need to be accessibly named. This article explains different ways to accessibly name svgs smashingmagazine.com/2021/05/accessible-svg-patterns-comparison. Although, personally I would just use an img tag here.
  • There is no link to the blog, which would make this card unusable. Whenever you see a hover style in a design that means something is interactive (clickable). It's our job as frontend developers to choose the appropriate element depending on what the click would do. In this case it would navigate to a blog post, which means the element must be an anchor (link).
  • I think this design showed that the whole card should be clickable in this case. That means you'd need to use the content-pseudo trick on the link when you add it, as explained on the inclusive components site
  • Don't use <br> to try and create vertical space. Use margin.

  10
• 

  anass-lamiri•320

  @Anass-Lamiri

  Posted over 1 year ago

  Hi, I suggest you make the profile pic and the name in a div and then make a display flex, with a align-item center.

      display: flex;
      align-items: center;
      gap: 16px;
  

  you can adjust the gap according to the design.

  I hope this feedback is helpful.

  00