G-Loot DS — stats with image

by Augustin Hiebel

HTML

<div class="stats surface">
  <div class="stat">
    <div class="stat-body">
      <div class="stat-label">Total missions played</div>
      <div class="stat-value">
        95
        <small>k</small>
      </div>
      <div class="stat-description text-interaction-500">↗︎ 12% more than last month</div>
    </div>
    <div class="stat-image"><span class="icon text-5xl text-ui-400 icon-missions"></span></div>
  </div>
  <div class="stat">
    <div class="stat-body">
      <div class="stat-value">
        85
        <small>%</small>
      </div>
      <div class="stat-label">Missions completed</div>
      <div class="stat-description text-error-500">1 mission remaining</div>
    </div>
    <div class="stat-image">
      <figure class="avatar avatar-simple avatar-squircle avatar-sm">
        <div>
          <img src="https://res.cloudinary.com/gloot/image/upload/v1655292255/Marketing/2022_prototype/DummyContent/avatars/avatar_user_3.jpg">
        </div>
        <i></i>
      </figure>
    </div>
  </div>
</div>