Order Component Using Flex

Community feedback

• 

  Nic•595

  @nicm42

  Posted over 3 years ago

  This looks great for a beginner.

  I noticed in your html you have this:

  <h2>Order Summary</h1> I think you meant that to either be an h2 or a an h1.

  The Annual plan bit is a bit of a pain in the design. It's a good case for using Grid, because you can have the note and the Change link spanning two rows. If you don't know Grid, then I found Wes Bos's free course really helpful. If you want to stick to Flex, then you can make it as a row, then put the Annual Plan and price into a div and make that fix a Flex of direction column.

  To stop your card getting bigger when you do that, you can put a max-width on it. That'll make sure the card will never get any wider than that.

  The easiest way to get the Proceed to payment looking more like the design is to make it a button. That will automatically only make it as wide as the text. Then you can add padding to get it to the size you need. Then you can add the border-radius and box shadow.

  And then I think that pretty much gets you there. What you have is really close - and it looks alright. If I wasn't comparing it to the design I'd think it was fine.

  00