Order Summary Card Component

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout is fine but the image is different right, I think it is intentional right.

  Jasper Decaestecker already gave feedback on this one, just going to add some suggestions as well:

  • Never use position: absolute on a large element as this removes the element from the flow. Try to inspect the layout, hover on the html or body tag, you will notice that it doesn't have any height since the layout inside it is out of the flow.
  • Since you are using position to center the layout, you can do it this way, but first remove these stylings on the .card element:

  position
  absolute
  left
  padding-bottom # use the padding-bottom on the body tag
  

  and on the body tag add these:

  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  

  This way, content will be centered properly and you avoided using position.

  • Always have a main element to wrap the main content of your page. On this one, the .card should be using the main instead of div.
  • When using img tag, don't forget to include the alt attribute, even if the value of it is empty or not. If you don't include this, screen-reader will read the source path of the img which you don't want. So always include it.
  • A page must have a single h1 on a page. Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element.
  • Avoid using id attribute as a selector in css because it is a bad practice due to css specificity. Use class to target elements.
  • annual plan could use a heading tag since it gives information on what the section would contain.
  • Always use interactive elements such as button or a tag for interactive components, using p tag on the change makes it not accessible.

  Aside from those, great work again on this one.

  Marked as helpful

  0
• 

  Jasper Decaestecker•80

  @jasperdecaesteckerPosted about 3 years ago

  Hey, I think the spacing in the plan (Annual plan) is not that great, i would add more padding to give your solution more breathing space, like in the design I would also look to have the primary button (Proceed to payment) to be larger visually than cancel order, Cancel order draws more attention now i feel.I do like to overall.

  I like that you gave your own twist with it (image and some color changes) it does look good.

  Marked as helpful

  0