Blog Preview Card

Community feedback

• 

  P

  Darkstar•1,440

  @DarkstarXDD

  Posted 6 months ago

  Looks nice, i have couple of suggestions.

  • You don't have to specify width: 100vw for the body. Body is a block element, and by default block elements take full width of the screen.
  • You shouldn't give a fixed height for containers that contain text. Currently you have given a fixed height for the card. If some more text were added to the card, text will start to overflow. Because the card can't grow it's height past the fixed height you have defined. You don't need to specify a height at all. The browser will calculate the height based on the content inside the container and things like font sizes and padding etc.
  • Use meaningful elements. div and span doesn't have any meaning. They are good for layout and and styling purposes. The label and the date should be p elements. Same way the user's name should also be a p. It's fine to have text inside a span, but the span must be inside a meaningful element like a heading or a p.
  • I feel like the image at the top is just a decorative image. It doesn't add any meaning. Images like those can be treated as decorative images by giving an empty alt. (alt=""). But if you feel like it should have an alt text, it's fine.
  • When an hover effect is present, it implies to the user that it must be an interactive element. Currently you have given the hover effect to a heading. Headings alone are not interactive elements, so having a hover effect on it doesn't really make sense. What should happen here is, you should have an a element inside that heading. So in a real site, when the user clicks on it, they will be taken to the actual blog page. That is the purpose of this card component. Picture it like this, there will be multiple of these cards on a page. Clicking on each card, should direct the user to the relevant blog post. For that to happen you need to have an a element inside the card.

  00