<section class="legends-squad-list" id="legends-squad-list">
<div class="squad-list__container">
<div class="squad-profiles-wrapper">
<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 data-carousel-attr="carousel-legends-150">
<div class="player-profile-list__players carousel" data-legends-attr="legends-150">
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":true, "womenssenior":false, "para":false, "futsal":false, "allgenders":false, "male":false, "female":false, "allpositions":true, "goalkeeper":false, "defender":true, "midfielder":false, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":false, "womenssenior":false, "para":false, "futsal":false, "allgenders":false, "male":true, "female":false, "allpositions":true, "goalkeeper":true, "defender":true, "midfielder":false, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":false, "womenssenior":false, "para":false, "futsal":false, "allgenders":false, "male":false, "female":false, "allpositions":true, "goalkeeper":true, "defender":true, "midfielder":false, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":true, "womenssenior":false, "para":false, "futsal":false, "allgenders":false, "male":true, "female":false, "allpositions":true, "goalkeeper":false, "defender":true, "midfielder":false, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":false, "womenssenior":false, "para":true, "futsal":true, "allgenders":false, "male":false, "female":false, "allpositions":true, "goalkeeper":true, "defender":true, "midfielder":true, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</div>
<div class="carousel-nav-block">
<div class="carousel-nav-wrapper">
<div class="tabbed-carousel__navigation-bottom">
<div role="tablist" class="tabbed-carousel__pagination carousel__pagination"></div>
</div>
<div class="tabbed-carousel__arrows-wrap">
<button aria-label="Previous" class="carousel__cta carousel__prev tabbed-carousel__prev disabled">
<span class="visually-hidden">Previous page</span>
<svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg>
</button>
<button aria-label="Next" class="carousel__cta carousel__next tabbed-carousel__next">
<span class="visually-hidden">Next page</span>
<svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="squad-block-defenders" class="player-profile-list legends-player-profile-list" role="region" aria-label="100+ ">
<div class="design-spacer design-spacer--blank-52">
<hr class="design-spacer__lineandlogo" />
<img src="/assets/example-content/design-spacer-logo.svg" alt="" />
<hr class="design-spacer__lineandlogo" />
</div>
<h2 class="player-profile-list__title">100+
<span class="player-profile-list__title2">CUPS</span>
</h2>
<div data-carousel-attr="carousel-legends-100">
<div class="player-profile-list__players carousel" data-legends-attr="legends-100">
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":true, "womenssenior":false, "para":false, "futsal":false, "allgenders":false, "male":true, "female":false, "allpositions":true, "goalkeeper":true, "defender":true, "midfielder":false, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":true, "womenssenior":false, "para":false, "futsal":false, "allgenders":true, "male":true, "female":false, "allpositions":true, "goalkeeper":false, "defender":true, "midfielder":true, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</div>
<div class="carousel-nav-block">
<div class="carousel-nav-wrapper">
<div class="tabbed-carousel__navigation-bottom">
<div role="tablist" class="tabbed-carousel__pagination carousel__pagination"></div>
</div>
<div class="tabbed-carousel__arrows-wrap">
<button aria-label="Previous" class="carousel__cta carousel__prev tabbed-carousel__prev disabled">
<span class="visually-hidden">Previous page</span>
<svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg>
</button>
<button aria-label="Next" class="carousel__cta carousel__next tabbed-carousel__next">
<span class="visually-hidden">Next page</span>
<svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="squad-block-midfielders" class="player-profile-list legends-player-profile-list" role="region" aria-label="50+ ">
<div class="design-spacer design-spacer--blank-52">
<hr class="design-spacer__lineandlogo" />
<img src="/assets/example-content/design-spacer-logo.svg" alt="" />
<hr class="design-spacer__lineandlogo" />
</div>
<h2 class="player-profile-list__title">50+
<span class="player-profile-list__title2">CUPS</span>
</h2>
<div data-carousel-attr="carousel-legends-50">
<div class="player-profile-list__players carousel" data-legends-attr="legends-50">
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":true, "womenssenior":false, "para":false, "futsal":false, "allgenders":true, "male":false, "female":false, "allpositions":true, "goalkeeper":false, "defender":true, "midfielder":false, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":true, "womenssenior":false, "para":false, "futsal":false, "allgenders":true, "male":true, "female":false, "allpositions":true, "goalkeeper":true, "defender":true, "midfielder":false, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":true, "womenssenior":false, "para":false, "futsal":false, "allgenders":true, "male":true, "female":false, "allpositions":true, "goalkeeper":false, "defender":true, "midfielder":false, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":true, "womenssenior":false, "para":false, "futsal":false, "allgenders":false, "male":true, "female":false, "allpositions":true, "goalkeeper":false, "defender":true, "midfielder":true, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
<div class="legends-player-profile legend-player-count" data-filter='{"allsquad":true, "menssenior":true, "womenssenior":false, "para":false, "futsal":false, "allgenders":false, "male":false, "female":false, "allpositions":true, "goalkeeper":false, "defender":true, "midfielder":false, "forward":true }'>
<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
<div>
<span class="player-name__lastname">Banks</span>
</div>
<span class="player-name__active-year">Active 8888-8888</span>
</a>
</div>
</div>
</div>
<div class="carousel-nav-block">
<div class="carousel-nav-wrapper">
<div class="tabbed-carousel__navigation-bottom">
<div role="tablist" class="tabbed-carousel__pagination carousel__pagination"></div>
</div>
<div class="tabbed-carousel__arrows-wrap">
<button aria-label="Previous" class="carousel__cta carousel__prev tabbed-carousel__prev disabled">
<span class="visually-hidden">Previous page</span>
<svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg>
</button>
<button aria-label="Next" class="carousel__cta carousel__next tabbed-carousel__next">
<span class="visually-hidden">Next page</span>
<svg fill="none" viewBox="0 0 10 17" xmlns="http://www.w3.org/2000/svg">
<path d="m9.2722 9.3355-6.75 6.75c-0.46089 0.4609-1.2087 0.4609-1.6706 0-0.46089-0.4609-0.46089-1.2097 0-1.6706l5.9146-5.9146-5.9146-5.9146c-0.46089-0.46089-0.46089-1.2097 0-1.6706 0.46194-0.46089 1.2097-0.46089 1.6706 0l6.75 6.75c0.46194 0.46089 0.46194 1.2097 0 1.6706v-1.4e-4z" fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
No notes defined.
{
"legendsSquad": true,
"roles": [
{
"legendsSquad": true,
"title": {
"copy": "150+ ",
"copy2": "CUPS",
"type": "legends-150"
},
"id": "squad-block-goalkeepers"
},
{
"legendsSquad": true,
"design-spacer": true,
"title": {
"copy": "100+ ",
"copy2": "CUPS",
"type": "legends-100"
},
"id": "squad-block-defenders",
"players": [
{
"legends-filter": {
"allsquad": "true",
"menssenior": "true",
"womenssenior": "false",
"para": "false",
"futsal": "false",
"allgenders": "false",
"male": "true",
"female": "false",
"allpositions": "true",
"goalkeeper": "true",
"defender": "true",
"midfielder": "false",
"forward": "true"
},
"image": "/assets/example-content/player-holder-bkgnd.png"
},
{
"legends-filter": {
"allsquad": "true",
"menssenior": "true",
"womenssenior": "false",
"para": "false",
"futsal": "false",
"allgenders": "true",
"male": "true",
"female": "false",
"allpositions": "true",
"goalkeeper": "false",
"defender": "true",
"midfielder": "true",
"forward": "true"
},
"image": "/assets/example-content/player-holder-bkgnd.png",
"stats": [
{
"title": {
"copy": "Senior goals"
},
"value": {
"copy": "1"
}
}
]
}
]
},
{
"legendsSquad": true,
"design-spacer": true,
"title": {
"copy": "50+ ",
"copy2": "CUPS",
"type": "legends-50"
},
"id": "squad-block-midfielders",
"players": [
{
"legends-filter": {
"allsquad": "true",
"menssenior": "true",
"womenssenior": "false",
"para": "false",
"futsal": "false",
"allgenders": "true",
"male": "false",
"female": "false",
"allpositions": "true",
"goalkeeper": "false",
"defender": "true",
"midfielder": "false",
"forward": "true"
}
},
{
"legends-filter": {
"allsquad": "true",
"menssenior": "true",
"womenssenior": "false",
"para": "false",
"futsal": "false",
"allgenders": "true",
"male": "true",
"female": "false",
"allpositions": "true",
"goalkeeper": "true",
"defender": "true",
"midfielder": "false",
"forward": "true"
}
},
{
"legends-filter": {
"allsquad": "true",
"menssenior": "true",
"womenssenior": "false",
"para": "false",
"futsal": "false",
"allgenders": "true",
"male": "true",
"female": "false",
"allpositions": "true",
"goalkeeper": "false",
"defender": "true",
"midfielder": "false",
"forward": "true"
}
},
{
"legends-filter": {
"allsquad": "true",
"menssenior": "true",
"womenssenior": "false",
"para": "false",
"futsal": "false",
"allgenders": "false",
"male": "true",
"female": "false",
"allpositions": "true",
"goalkeeper": "false",
"defender": "true",
"midfielder": "true",
"forward": "true"
}
},
{
"legends-filter": {
"allsquad": "true",
"menssenior": "true",
"womenssenior": "false",
"para": "false",
"futsal": "false",
"allgenders": "false",
"male": "false",
"female": "false",
"allpositions": "true",
"goalkeeper": "false",
"defender": "true",
"midfielder": "false",
"forward": "true"
}
}
]
}
]
}
.legends-squad-list {
background-color: $black;
transform: translateX(-16px);
width: calc(100% + 28px);
padding-left: 148px;
text-align: left;
&__container {
padding-top: 0.1rem;
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;
}
}
.squad-profiles-wrapper {
padding: 0 1.6rem;
}
}
:root [data-brand='womens'] {
.legends-squad-list {
.player-profile-list {
&__title.heading-l {
color: $white;
}
}
}
}
<section class="legends-squad-list" id="legends-squad-list">
<div class="squad-list__container">
<div class="squad-profiles-wrapper">
{{#each roles}}
{{render '@legends-player-profile-list' this merge="true" }}
{{/each}}
</div>
</div>
</section>