<div id="" 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"></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>
No notes defined.
{
"title": {
"copy": "150+",
"extraClasses": "player-profile-list__title",
"type": "legends-150"
},
"players": [
{
"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"
},
"firstName": "test"
},
{
"legends-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"
},
"image": "/assets/example-content/player-holder-bkgnd.png"
},
{
"legends-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"
},
"image": "/assets/example-content/player-holder-bkgnd.png",
"stats": [
{
"title": {
"copy": "Senior goals"
},
"value": {
"copy": "1"
}
}
]
},
{
"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": "false",
"forward": "true"
},
"image": "/assets/example-content/player-holder-bkgnd.png",
"stats": [
{
"title": {
"copy": "Senior goals"
},
"value": {
"copy": "1"
}
}
]
},
{
"legends-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"
},
"firstName": "test"
}
]
}
.legends-player-profile-list {
margin-top: 7.2rem;
.carousel__pagination button.active,
.glide-carousel__pagination button.active {
background-color: #9d8d72;
}
.carousel__prev,
.carousel__next {
color: $white !important;
}
.carousel__prev:hover,
.carousel__next:hover {
border: 1px solid $white !important;
}
.player-name {
&__lastname {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 20rem;
margin: auto;
}
.player-profile {
margin: 25px auto 0 auto;
}
}
@media screen and (min-width: $mq-large) {
margin-top: 2.5rem;
.design-spacer--blank-52 {
padding-bottom: 6.1rem;
}
}
@media screen and (max-width: $mq-small) {
&.player-profile-list {
.player-profile-list__players {
flex-direction: column;
}
.player-profile__img-wrapper {
border-radius: 0 !important;
img {
object-fit: cover;
align-self: flex-start;
width: 100%;
object-position: left top;
}
}
.player-name {
width: calc(100% - 16.5rem);
background: $dark-black;
&__lastname {
font-size: 5.6rem;
line-height: 4.7rem;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 15rem;
}
&__active-year {
font-size: 1.2rem;
line-height: 1.2rem;
}
}
.player-profile__caps-info {
display: block;
right: 0.8rem;
top: -0.5rem;
&--value {
font-size: 5rem;
}
&--label {
font-size: 2.8rem;
}
}
}
.design-spacer--blank-52 {
padding-bottom: 3.2rem;
}
.player-profile {
flex-direction: row-reverse;
max-width: 34.3rem;
margin: 25px auto 0 auto;
border-radius: 0.4rem;
/* stylelint-disable no-descending-specificity */
&__img-wrapper {
width: 16.5rem;
height: 12.8rem;
max-width: 16.5rem;
max-height: 12.8rem;
}
}
}
}
<div id="{{id}}" class="player-profile-list legends-player-profile-list" role="region" aria-label="{{title.copy}}">
{{#if design-spacer}}
{{render '@design-spacer--52-pixel-spacer-with-line-and-logo'}}
{{/if}}
<h2 class="player-profile-list__title">{{title.copy}}
<span class="player-profile-list__title2">{{title.copy2}}</span>
</h2>
<div data-carousel-attr="carousel-{{title.type}}">
<div class="player-profile-list__players carousel" data-legends-attr="{{title.type}}">
{{#each players}}
{{render '@legends-player-profile' this merge="true" }}
{{/each}}
</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>