Desktop design

Mobile design

Results summary component

<div class="line-1">
          <div class="title">
            <img class="icon" src="icons\lightning.svg" alt="">Reaction
          </div>
          <div class="final-score">80</div>
          <div class="final-score-2">/100</div>
        </div>

<div class="line-2">
          <div class="title">
            <img class="icon" src="icons\memory.svg" alt=""> Memory
          </div>
          <div class="final-score">92</div>
          <div class="final-score-2">/100</div>
        </div>

<div class="line-3">
          <div class="title">
            <img class="icon" src="icons\textbox.svg" alt=""> Verbal
          </div>

          <div class="final-scoree">61</div>
          <div class="final-score-2">/100</div>
        </div>

<div class="line-4">
          <div class="title">
            <img class="icon" src="icons\eye.svg" alt=""> Visual
          </div>
          <div class="final-scoree">72</div>
          <div class="final-score-2">/100</div>
        </div>

<img class="icon" src="icons\lightning.svg" alt="">Reacti

<img class="icon" src="icons\memory.svg" alt=""> Memor

<img class="icon" src="icons\textbox.svg" alt=""> Verba

<img class="icon" src="icons\eye.svg" alt=""> Visua

Design comparison

Please log in to post a comment

Results summary component using inline-block and flex

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community