G-Loot DS — reward ladder structure

by Augustin Hiebel

HTML

<!-- The ladder can work without the ladder-container or the ladder-avatar elements -->
<!-- When using the ladder-avatar, you need to add the max number of steps and the current step as css variables to the ladder-avatar -->

<div class='ladder-container scrollbar-desktop' style='--max: 10; --step: 1;'>

  <!-- ladder-avatar -->
  <div class='ladder-avatar'>
    <div>
      <div>
        <figure class="avatar avatar-circle avatar-sm">
          <div>
            <img src="https://res.cloudinary.com/gloot/image/upload/v1654063975/Marketing/2022_prototype/DummyContent/teams/teamlogo_CrocEsports.png" alt="" />
          </div>
          <i class="radar"></i>
        </figure>
      </div>
    </div>
  </div>

  <!-- ladder -->
  <ul class='ladder'>
    <li class='is-active'>
      <div class='ladder-info'>
        <div>
          <span>1</span>
          <span>0/200</span>
        </div>
      </div>
      <div class='ladder-content'>
        <div class='ladder-decoration'></div>
        <div class='ladder-body'>
          <div class='chip chip-reward chip-xp chip-inverted chip-sm'>
            <span>500</span>
            <span class='icon icon-xp-symbol-outline'></span>
          </div>
          <img src='https://res.cloudinary.com/gloot/image/upload/v1653391336/Marketing/2022_prototype/CurrencyRewards/Reward-token-unique.png' width='100%' height='auto' alt='Reward' />
          <span>
            1 token
          </span>
        </div>
      </div>
    </li>
    <li>
      <div class='ladder-info'>
        <div>
          <span>2</span>
          <span>0/200</span>
        </div>
      </div>
      <div class='ladder-content'>
        <div class='ladder-decoration'></div>
        <div class='ladder-body'>
          <div class='chip chip-reward chip-xp chip-inverted chip-sm'>
            <span>500</span>
            <span class='icon icon-xp-symbol-outline'></span>
          </div>
          <img...