<section class="container legends-manager">
<h2 class="heading-section ">Managers</h2>
<div class="container__content">
<div class="carousel-container">
<div class="carousel" data-behavior="carousel-glide" data-carousel-loop="true">
<div data-glide-el="track">
<ul class="glide__slides">
<li>
<div class="legends-player-profile">
<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 ">Games managed</p>
<p class="value">39</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>
</li>
<li>
<div class="legends-player-profile">
<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 ">Games managed</p>
<p class="value">39</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>
</li>
<li>
<div class="legends-player-profile">
<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 ">Games managed</p>
<p class="value">39</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>
</li>
<li>
<div class="legends-player-profile">
<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 ">Games managed</p>
<p class="value">39</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>
</li>
<li>
<div class="legends-player-profile">
<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 ">Games managed</p>
<p class="value">39</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>
</li>
<li>
<div class="legends-player-profile">
<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 ">Games managed</p>
<p class="value">39</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>
</li>
</ul>
</div>
<div class="carousel-nav-block">
<div class="carousel-nav-wrapper">
<div class="carousel-navigation" data-glide-el="controls">
<button aria-label="Previous" class="carousel__cta carousel__prev"><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"><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>
</section>
No notes defined.
{
"heading": {
"copy": "Managers"
},
"players": [
{
"legends": true,
"firstName": "Gordon",
"tag": "a",
"attrs": "href='http://www.google.com'",
"image": "/assets/example-content/player-holder-bkgnd.png",
"lastName": "Banks",
"activeYear": "Active 8888-8888",
"sponsors-show": false
},
{
"legends": true,
"firstName": "Gordon",
"tag": "a",
"attrs": "href='http://www.google.com'",
"image": "/assets/example-content/player-holder-bkgnd.png",
"lastName": "Banks",
"activeYear": "Active 8888-8888",
"sponsors-show": false
},
{
"legends": true,
"firstName": "Gordon",
"tag": "a",
"attrs": "href='http://www.google.com'",
"image": "/assets/example-content/player-holder-bkgnd.png",
"lastName": "Banks",
"activeYear": "Active 8888-8888",
"sponsors-show": false
},
{
"legends": true,
"firstName": "Gordon",
"tag": "a",
"attrs": "href='http://www.google.com'",
"image": "/assets/example-content/player-holder-bkgnd.png",
"lastName": "Banks",
"activeYear": "Active 8888-8888",
"sponsors-show": false
},
{
"legends": true,
"firstName": "Gordon",
"tag": "a",
"attrs": "href='http://www.google.com'",
"image": "/assets/example-content/player-holder-bkgnd.png",
"lastName": "Banks",
"activeYear": "Active 8888-8888",
"sponsors-show": false
},
{
"legends": true,
"firstName": "Gordon",
"tag": "a",
"attrs": "href='http://www.google.com'",
"image": "/assets/example-content/player-holder-bkgnd.png",
"lastName": "Banks",
"activeYear": "Active 8888-8888",
"sponsors-show": false
}
]
}
.legends-manager {
background-color: $dark-black;
padding: 5.2rem 0;
margin: 0 auto;
width: auto;
.container__subtitle {
font: normal normal 2rem/3.2rem $text-font-ef;
letter-spacing: 0.02em;
color: $color-interface-light;
}
.player-name {
&__lastname {
font-size: 4.2rem !important;
line-height: 3.6rem !important;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 14.5rem;
margin: auto;
}
}
.heading-section {
@extend .heading-1;
color: $white;
}
.carousel__cta svg {
color: $white;
}
.glide__bullet--active {
background-color: $white !important;
}
.carousel__prev:hover,
.carousel__next:hover {
border: 2px solid $white !important;
}
.carousel__pagination button,
.glide-carousel__pagination button {
background-color: rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: $mq-small) {
.carousel-nav-wrapper {
display: none;
}
.glide__slides > li {
width: auto !important;
margin-left: 0;
margin-right: 0;
}
}
}
<section class="container legends-manager">
{{render '@heading--section' heading merge=true}}
<div class="container__content">
<div class="carousel-container">
<div class="carousel" data-behavior="carousel-glide" data-carousel-loop="true">
<div data-glide-el="track">
<ul class="glide__slides">
{{#each players}}
<li>{{render '@legends-player-profile--with-one-stat' this merge="true"}}</li>
{{/each}}
</ul>
</div>
<div class="carousel-nav-block">
<div class="carousel-nav-wrapper">
<div class="carousel-navigation" data-glide-el="controls">
<button aria-label="Previous" class="carousel__cta carousel__prev"><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"><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>
</section>