Stats preview card component using html and css

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted 9 months ago

  Hi,

  This looks good but there are a few issues that should be addressed.

  • the 3 stats need to be an unordered list with 3 list items. Each number and/or word in those can be in spans set to display block to make them stack vertically on each line.
  • the card must not have a height. That's very potentially dangerous for overflow bugs. You can't control the height — you have no control over the end font family, language, font size or line height the end user may have, and all of those could change where lines break and how tall the component needs to be. It's the browsers job to decide the height based off the content, plus any padding, margin or gaps used inside it. You could use min-height but even that is unnecessary.
  • the text half of the card should have padding on all sides. The low level child elements like headings or paragraphs shouldn't need percentage widths. Don't micro-manage. All the component needs for width is a max-width in rem (different on mobile default and larger screens in the media query).
  • it's unnecessary to load the css reset as a whole other file. That impacts performance. Instead, just place those css declarations at the start of the main styles.

  00