Profile Card Component / SASS / PUG / BEM

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hello

  I'm not very familiar with pug so can't suggest how to fix the html issues with this but it should be pretty easy ☺

  • text needs to be in meaningful elements not divs, headings, paragraphs etc
  • aria-label won't be read out by some screenreaders if on a div (and aria labels cannot contribute to a bots document outline so you may be better using visually hidden labels on this for the extra text you're adding anyway)
  • you shouldn't be using the figure element unless you're also going to use the fig caption element inside it
  • the layout breaks on mobile landscape for me. Probably caused by the heights in viewport units, which you shouldn't need (maybe just a min-height on the body/wrapper, that's all)
  • you shouldn't need to put a width and height on the card at all actually... Maybe min- and/or max- to allow it to respond well. And I recommend using rem as the units for min/max widths on content blocks not viewport units so you have more control

  Other than that, all great. Particularly good treatment of the background circles and putting the stats in a list like that 👍

  0