England Football

Player Stats 

<div class="player-stats">
    <div class="player-stats__img-wrapper" data-info="Appearances">
        <img src="/assets/example-content/player-stats.png" alt="" />
        <div class="player-stats__info-block">
            <div class="player-stats__position">Appearances</div>
            <div class="player-stats__value">88 </div>
            <div class="player-stats__name">M.Mount</div>
        </div>
    </div>
    <div class="player-stats__ranking-card">
        <ul>
            <li>
                <img src="/assets/example-content/player-stats-small-1.png" />
                <p>T. Alexander-Arnold</p>
                <span>11</span>
            </li>
            <li>
                <img src="/assets/example-content/player-stats-small-1.png" />
                <p>T. Alexander-Arnold</p>
                <span>8</span>
            </li>
            <li>
                <img src="/assets/example-content/player-stats-small-1.png" />
                <p>T. Alexander-Arnold</p>
                <span>5</span>
            </li>
            <li>
                <img src="/assets/example-content/player-stats-small-1.png" />
                <p>T. Alexander-Arnold</p>
                <span>3</span>
            </li>
        </ul>
    </div>
</div>

No notes defined.

{
  "title": "Appearances",
  "playerImage": "/assets/example-content/player-stats.png",
  "playerName": "M.Mount",
  "statValue": "88",
  "rankingCard": [
    {
      "image": "/assets/example-content/player-stats-small-1.png",
      "name": "T. Alexander-Arnold",
      "value": "11"
    },
    {
      "image": "/assets/example-content/player-stats-small-1.png",
      "name": "T. Alexander-Arnold",
      "value": "8"
    },
    {
      "image": "/assets/example-content/player-stats-small-1.png",
      "name": "T. Alexander-Arnold",
      "value": "5"
    },
    {
      "image": "/assets/example-content/player-stats-small-1.png",
      "name": "T. Alexander-Arnold",
      "value": "3"
    }
  ]
}
 
<div class="player-stats">
    <div class="player-stats__img-wrapper" data-info="{{title}}">
        <img src="{{playerImage}}" alt="" />
        <div class="player-stats__info-block">
            <div class="player-stats__position">{{title}}</div>
            <div class="player-stats__value">{{statValue}} {{#if statSubValue}}<span>{{statSubValue}}</span>{{/if}}</div>
            <div class="player-stats__name">{{playerName}}</div>
        </div>
    </div>
    <div class="player-stats__ranking-card">
        <ul>
            {{#each rankingCard}}
            <li>
                <img src="{{image}}" />
                <p>{{name}}</p>
                <span>{{value}}</span>
            </li>
            {{/each}}            
        </ul>
    </div>
</div>