Desktop design

Mobile design

Results summary component

<div class="result">
        <h3>Your Result</h3>
        <div class="circle">
          <h1>76</h1>
          <p>of 100</p>
        </div>
        <h2>Great</h2>
        <p class="comment">
          You scored higher than 65% of the people who have taken these tests.
        </p>
      </div>

<div class="section reaction">
          <div>
            <img src="../images/icon-reaction.svg" alt="reaction">
            <p class="title">Reaction</p>
          </div>
          <p class="score"><span>80</span> / 100</p>
        </div>

<div class="section memory">
          <div>
            <img src="../images/icon-memory.svg" alt="reaction">
            <p class="title">Memory</p>
          </div>
          <p class="score"><span>92</span> / 100</p>
        </div>

<div class="section verbal">
          <div>
            <img src="../images/icon-verbal.svg" alt="reaction">
            <p class="title">Verbal</p>
          </div>
          <p class="score"><span>61</span> / 100</p>
        </div>

<div class="section visual">
          <div>
            <img src="../images/icon-visual.svg" alt="reaction">
            <p class="title">Visual</p>
          </div>
          <p class="score"><span>72</span> / 100</p>
        </div>

Design comparison

Please log in to post a comment

Community feedback

Results summary component [1]

Design comparison

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community