Order summary component card with SCSS and BEM

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  I'm afraid this isn't responsive fully, it doesn't fit on my phone screen. I'll add a screenshot to slack for you so you can see what I'm seeing.

  Feedback on accessibility:

  • you shouldn't ever have text in divs/spans alone. There is always a meaningful element for it
  • in my opinion annual plan should be a heading. Just an opinion.
  • why have you used 3 button elements on this? What would you expect to happen on click of each of these?

  Other general feedback is it's not great practice to clutter the html with divs to hold things like background images. Try to use background image on the card or even use pseudo element if you like, but the extra divs shouldn't be necessary (id just have that card header image in the html in an img tag, but again that's just opinion/ personal preference). The body background should definitely be on the body not in a separate div.

  I hope this is helpful

  Marked as helpful

  1

  ---

  

  P

  Zsofia Dalnoki-Papp•210

  @dalnokiPosted over 2 years ago

  @grace-snow Super helpful, actually! I fixed all the mentioned things and I took a mental note for the future :) About the buttons:

  • with the Change button, users could change their payment plan;
  • the Proceed to payment would take users to an external payment page;
  • by clicking Cancel order, the card would be closed.

  For me, all three would count as a button, without a second doubt, but please let me know if I'm approaching this wrong, I'd love to know the best practices when it comes to deciding if an element is a button.

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  @dalnoki in that case I'm afraid you're incorrect then.

  1. If the change button toggles content of a payment plan (e.g. toggling to monthly instead of annual, or opens a modal to choose from a list of plans) that would be a button element
  2. If proceed to payment navigates to another page, it would be an anchor tag
  3. I'm still not sure by what you mean by the card would be 'closed'. If you're imagining the whole card is a modal dialog and the cancel would close that modal, it would be a button but if you're thinking it would navigate users back to a previous page/step, that would be an anchor tag

  They have very different and specific uses.

  Marked as helpful

  0