<section class="legends-squad-list">
<div class="squad-list__container">
<div class="squad-profiles-wrapper">
<div class="inline-sponsor">
Official sponsor <img src="/assets/example-content/sponsor-logo-bt.svg" alt="Sponsor name" />
</div>
<div id="squad-block-goalkeepers" class="player-profile-list legends-player-profile-list" role="region" aria-label="150+ ">
<h2 class="player-profile-list__title">150+
<span class="player-profile-list__title2">CUPS</span>
</h2>
<div class="player-profile-list__players">
<div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":true, "womens":false, "para":false, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">2</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">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":false, "womens":false, "para":false, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">2</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">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":false, "womens":false, "para":false, "fustal":true, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":false, "womens":false, "para":true, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":false, "womens":false, "para":false, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">2</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">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</div>
</div>
<div id="squad-block-defenders" class="player-profile-list legends-player-profile-list" role="region" aria-label="100+ ">
<h2 class="player-profile-list__title">100+
<span class="player-profile-list__title2">CUPS</span>
</h2>
<div class="player-profile-list__players">
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":false, "womens":false, "para":false, "fustal":true, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">2</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">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":true, "womens":false, "para":false, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</div>
</div>
<div id="squad-block-midfielders" class="player-profile-list legends-player-profile-list" role="region" aria-label="50+ ">
<h2 class="player-profile-list__title">50+
<span class="player-profile-list__title2">CUPS</span>
</h2>
<div class="player-profile-list__players">
<div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":false, "womens":false, "para":false, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">2</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">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":true, "womens":false, "para":true, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">2</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">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":true, "womens":false, "para":true, "fustal":true, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">2</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">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":false, "mens":true, "womens":false, "para":true, "fustal":false, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">2</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">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"all":true, "mens":false, "womens":false, "para":true, "fustal":true, "link":false }'>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-holder-bkgnd.png" alt="" />
<div class="player-profile__caps-info">
<span class="player-profile__caps-info--value">127</span>
<span class="player-profile__caps-info--label">caps</span>
</div>
<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">2</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">Gordon
<span class="player-name__lastname">Banks</span>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
No notes defined.
{
"legendsSquad": true,
"roles": [
{
"legendsSquad": true,
"title": {
"copy": "150+ ",
"copy2": "CUPS"
},
"id": "squad-block-goalkeepers"
},
{
"legendsSquad": true,
"title": {
"copy": "100+ ",
"copy2": "CUPS"
},
"id": "squad-block-defenders",
"players": [
{
"legends-filter": {
"all": "false",
"mens": "false",
"womens": "false",
"para": "false",
"fustal": "true",
"link": "false"
},
"image": "/assets/example-content/player-holder-bkgnd.png"
},
{
"legends-filter": {
"all": "false",
"mens": "true",
"womens": "false",
"para": "false",
"fustal": "false",
"link": "false"
},
"image": "/assets/example-content/player-holder-bkgnd.png",
"stats": [
{
"title": {
"copy": "Senior goals"
},
"value": {
"copy": "1"
}
}
]
}
]
},
{
"legendsSquad": true,
"title": {
"copy": "50+ ",
"copy2": "CUPS"
},
"id": "squad-block-midfielders",
"players": [
{
"legends-filter": {
"all": "true",
"mens": "false",
"womens": "false",
"para": "false",
"fustal": "false",
"link": "false"
}
},
{
"legends-filter": {
"all": "false",
"mens": "true",
"womens": "false",
"para": "true",
"fustal": "false",
"link": "false"
}
},
{
"legends-filter": {
"all": "false",
"mens": "true",
"womens": "false",
"para": "true",
"fustal": "true",
"link": "false"
}
},
{
"legends-filter": {
"all": "false",
"mens": "true",
"womens": "false",
"para": "true",
"fustal": "false",
"link": "false"
}
},
{
"legends-filter": {
"all": "true",
"mens": "false",
"womens": "false",
"para": "true",
"fustal": "true",
"link": "false"
}
}
]
}
]
}
.legends-squad-list {
background-color: $black;
transform: translateX(-16px);
width: calc(100% + 28px);
padding-left: 148px;
&__container {
padding-top: $spacing-s;
padding-bottom: $spacing-s;
background-image: url(./assets/example-content/legends-overlay.svg);
}
.player-profile-list {
margin: $spacing-xl 0;
&__title.heading-l {
color: $white;
}
}
}
:root [data-brand='womens'] {
.legends-squad-list {
.player-profile-list {
&__title.heading-l {
color: $white;
}
}
}
}
<section class="legends-squad-list">
<div class="squad-list__container">
<div class="squad-profiles-wrapper">
{{#unless hide-sponsor}}
{{render '@inline-sponsor'}}
{{/unless}}
{{#each roles}}
{{render '@legends-player-profile-list' this merge="true" }}
{{/each}}
</div>
</div>
</section>