Skip to content
Submitted almost 3 years ago

Summary Card using CSS Flexbox

Josiel Matos•10
@JosielMatos
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is there any better ways than just using divs for wrapping elements to use flexbox and make it semantic within components like this card? I'd appreciate to learn about.

Community feedback

  • Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    Hi! Josiel, Nice work , your design is responsive. Now my answer to your question.

    YES! It is totally fine to use div as wrapper element for further alignments of child content using flexbox.

    Great Job!

    Happy New Year ;)

    Marked as helpful
    1
  • Ben•770
    @BenConfigPosted almost 3 years ago

    Remember to use <p> elements for blocks of text. <div>s and <span>s aren't semantic elements, they are just used to separate elements for styling purposes.

    For example, your .description element can be a <p>. And the .price element can be a <p> also in my opinion:

    <p class="price">
     <strong>Annual Plan</strong>
     <span>$59.99/year</span>
</p>
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord