Stats preview card component using HTML, CSS and Flexbox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @gdcristea ,

  I have some suggestions regarding your solution :

  There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution).

  • You can use <ul> to wrap the stats class="card_footer .

  • The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. the words like companies should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

  • changing base html size. This has huge accessibility implications for those of us with different font size or zoom requirements. There is no need to make 1rem equal 10px.

  • You can add border-radius and overflow: hidden to the component to avoid setting the corners individually .

  • In most cases, use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN

  Overall , your solution is good, Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Daniel Cristea•200

  @gdcristeaPosted over 2 years ago

  Hi @PhoenixDev22,

  Thanks a lot for these pieces of advice.

  Makes sense. I will update my solution based on them.

  Have a lovely day,

  1
• 

  A1ex•500

  @a1excpunkPosted over 2 years ago

  Good trick on image opacity and background <3

  1

  ---

  

  Daniel Cristea•200

  @gdcristeaPosted over 2 years ago

  @a1excpunk Thanks!

  0