<section class="squad-list">
<div class="squad-list__container">
<div class="squad-navbar" data-behaviour="squad-navbar">
<nav class="squad-navbar__nav-list" data-behavior="squad-navbar--nav-list" aria-label="Current player squad">
<a href="#" data-nav-to="squad-block-goalkeepers">
Goalkeepers
</a>
<a href="#" data-nav-to="squad-block-defenders">
Defenders
</a>
<a href="#" data-nav-to="squad-block-midfielders">
Midfielders
</a>
<a href="#" data-nav-to="squad-block-forwards">
Forwards
</a>
<a href="#" data-nav-to="squad-block-staff">
Staff
</a>
</nav>
</div>
<div class="squad-profiles-wrapper">
<div id="squad-block-goalkeepers" class="player-profile-list" role="region" aria-label="Goalkeepers">
<h2 class="player-profile-list__title">
Goalkeepers <span class="player-profile-list__title2"></span>
</h2>
<div class="player-profile-list__players">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-2.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-2.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-3.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<span class="player-name__lastname">Alexander</span>
</a>
</div>
</div>
</div>
<div id="squad-block-defenders" class="player-profile-list" role="region" aria-label="Defenders">
<h2 class="player-profile-list__title">
Defenders <span class="player-profile-list__title2"></span>
</h2>
<div class="player-profile-list__players">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-3.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-2.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
</div>
</div>
<div id="squad-block-midfielders" class="player-profile-list" role="region" aria-label="Midfielders">
<h2 class="player-profile-list__title">
Midfielders <span class="player-profile-list__title2"></span>
</h2>
<div class="player-profile-list__players">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-2.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-2.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-3.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<span class="player-name__lastname">Alexander</span>
</a>
</div>
</div>
</div>
<div id="squad-block-forwards" class="player-profile-list" role="region" aria-label="Forwards">
<h2 class="player-profile-list__title">
Forwards <span class="player-profile-list__title2"></span>
</h2>
<div class="player-profile-list__players">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-2.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-2.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-3.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<span class="player-name__lastname">Alexander</span>
</a>
</div>
</div>
</div>
<div id="squad-block-staff" class="player-profile-list" role="region" aria-label="Staff">
<h2 class="player-profile-list__title">
Staff <span class="player-profile-list__title2"></span>
</h2>
<div class="player-profile-list__players">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-2.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-2.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-3.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<span class="player-name__lastname">Alexander</span>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<span class="player-name__lastname">Alexander</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
No notes defined.
{
"roles": [
{
"title": {
"copy": "Goalkeepers"
},
"id": "squad-block-goalkeepers"
},
{
"competition": {
"name": "squad-block-defenders"
},
"title": {
"copy": "Defenders"
},
"id": "squad-block-defenders",
"players": [
{
"image": "/assets/example-content/player-profile-3.png"
},
{
"image": "/assets/example-content/player-profile-2.png",
"stats": [
{
"title": {
"copy": "Senior goals"
},
"value": {
"copy": "1"
}
}
]
}
]
},
{
"competition": {
"name": "squad-block-midfielders"
},
"title": {
"copy": "Midfielders"
},
"id": "squad-block-midfielders"
},
{
"competition": {
"name": "squad-block-forwards"
},
"title": {
"copy": "Forwards"
},
"id": "squad-block-forwards"
},
{
"competition": {
"name": "squad-block-staff"
},
"title": {
"copy": "Staff"
},
"id": "squad-block-staff"
}
],
"hide-sponsor": true
}
.squad-list {
transform: translateX(-16px);
width: calc(100% + 28px);
&__container {
padding-top: $spacing-s;
padding-bottom: $spacing-s;
}
.player-profile-list {
margin: $spacing-xl 0;
&__title.heading-l {
color: $crest-blue;
}
}
.inline-sponsor {
justify-content: center;
}
@media (min-width: $mq-medium) {
padding: $spacing-m;
transform: initial;
width: inherit;
}
@media (min-width: $mq-large) {
&__container {
padding-top: $spacing-xl;
padding-bottom: $spacing-xl;
}
.inline-sponsor {
justify-content: flex-end;
margin-top: $spacing-xl;
margin-bottom: $spacing-s;
}
.inline-sponsor + .player-profile-list {
margin-top: 0;
}
}
@media (min-width: $mq-large) {
.white-space-lg {
white-space: nowrap;
}
}
}
:root [data-brand='womens'] {
.squad-list {
.player-profile-list {
&__title.heading-l {
color: #5b6885;
}
}
}
}
<section class="squad-list">
<div class="squad-list__container">
{{#unless squad-navbar}}
{{render '@squad-navbar'}}
{{/unless}}
<div class="squad-profiles-wrapper">
{{#unless hide-sponsor}}
{{render '@inline-sponsor'}}
{{/unless}}
{{#each roles}}
{{render '@player-profile-list' this merge="true" }}
{{/each}}
</div>
</div>
</section>