<section class="container vertical-spacing-xxl first-call-up">
<div class="container__content">
<div class="container__header">
<h2 class="heading-section ">New Lions</h2>
</div>
<div class="carousel-container">
<div class="carousel" data-behavior="carousel-glide">
<div data-glide-el="track">
<ul class="glide__slides">
<li>
<article class="player-card">
<img class="player-card__image" src="/assets/example-content/player-card-2.jpg" />
<div class="player-card__info">
<img class="team player-card__team" src="/assets/example-content/leicster.jpg" />
<h1 class="player-name">Jadon
<div>
<span class="player-name__lastname">Sancho</span>
</div>
</h1>
<dl class="stat-list ">
<div>
<dt>Age</dt>
<dd>20 years</dd>
</div>
<div>
<dt>Position</dt>
<dd>Forward</dd>
</div>
<div>
<dt>Legacy number</dt>
<dd>1234567890</dd>
</div>
</dl>
<a href="/" class="text-xs player-card__cta">View Jadon's profile</a>
</div>
</article>
</li>
<li>
<article class="player-card">
<img class="player-card__image" src="/assets/example-content/player-card.jpg" />
<div class="player-card__info">
<img class="team player-card__team" src="/assets/example-content/leicster.jpg" />
<h1 class="player-name">Callum
<div>
<span class="player-name__lastname">Hudson-Odoi</span>
</div>
</h1>
<dl class="stat-list ">
<div>
<dt>Age</dt>
<dd>20 years</dd>
</div>
<div>
<dt>Position</dt>
<dd>Forward</dd>
</div>
<div>
<dt>Legacy number</dt>
<dd>1234567890</dd>
</div>
</dl>
<a href="/" class="text-xs player-card__cta">View Callum's profile</a>
</div>
</article>
</li>
<li>
<article class="player-card">
<img class="player-card__image" src="/assets/example-content/player-card.jpg" />
<div class="player-card__info">
<img class="team player-card__team" src="/assets/example-content/leicster.jpg" />
<h1 class="player-name">Callum
<div>
<span class="player-name__lastname">Hudson-Odoi</span>
</div>
</h1>
<dl class="stat-list ">
<div>
<dt>Age</dt>
<dd>20 years</dd>
</div>
<div>
<dt>Position</dt>
<dd>Forward</dd>
</div>
<div>
<dt>Legacy number</dt>
<dd>1234567890</dd>
</div>
</dl>
<a href="/" class="text-xs player-card__cta">View Callum's profile</a>
</div>
</article>
</li>
<li>
<article class="player-card">
<img class="player-card__image" src="/assets/example-content/player-card.jpg" />
<div class="player-card__info">
<img class="team player-card__team" src="/assets/example-content/leicster.jpg" />
<h1 class="player-name">Callum
<div>
<span class="player-name__lastname">Hudson-Odoi</span>
</div>
</h1>
<dl class="stat-list ">
<div>
<dt>Age</dt>
<dd>20 years</dd>
</div>
<div>
<dt>Position</dt>
<dd>Forward</dd>
</div>
<div>
<dt>Legacy number</dt>
<dd>1234567890</dd>
</div>
</dl>
<a href="/" class="text-xs player-card__cta">View Callum's profile</a>
</div>
</article>
</li>
<li>
<article class="player-card">
<img class="player-card__image" src="/assets/example-content/player-card.jpg" />
<div class="player-card__info">
<img class="team player-card__team" src="/assets/example-content/leicster.jpg" />
<h1 class="player-name">Callum
<div>
<span class="player-name__lastname">Hudson-Odoi</span>
</div>
</h1>
<dl class="stat-list ">
<div>
<dt>Age</dt>
<dd>20 years</dd>
</div>
<div>
<dt>Position</dt>
<dd>Forward</dd>
</div>
<div>
<dt>Legacy number</dt>
<dd>1234567890</dd>
</div>
</dl>
<a href="/" class="text-xs player-card__cta">View Callum's profile</a>
</div>
</article>
</li>
<li>
<article class="player-card">
<img class="player-card__image" src="/assets/example-content/player-card.jpg" />
<div class="player-card__info">
<img class="team player-card__team" src="/assets/example-content/leicster.jpg" />
<h1 class="player-name">Callum
<div>
<span class="player-name__lastname">Hudson-Odoi</span>
</div>
</h1>
<dl class="stat-list ">
<div>
<dt>Age</dt>
<dd>20 years</dd>
</div>
<div>
<dt>Position</dt>
<dd>Forward</dd>
</div>
<div>
<dt>Legacy number</dt>
<dd>1234567890</dd>
</div>
</dl>
<a href="/" class="text-xs player-card__cta">View Callum's profile</a>
</div>
</article>
</li>
<li>
<article class="player-card">
<img class="player-card__image" src="/assets/example-content/player-card.jpg" />
<div class="player-card__info">
<img class="team player-card__team" src="/assets/example-content/leicster.jpg" />
<h1 class="player-name">Callum
<div>
<span class="player-name__lastname">Hudson-Odoi</span>
</div>
</h1>
<dl class="stat-list ">
<div>
<dt>Age</dt>
<dd>20 years</dd>
</div>
<div>
<dt>Position</dt>
<dd>Forward</dd>
</div>
<div>
<dt>Legacy number</dt>
<dd>1234567890</dd>
</div>
</dl>
<a href="/" class="text-xs player-card__cta">View Callum's profile</a>
</div>
</article>
</li>
<li>
<article class="player-card">
<img class="player-card__image" src="/assets/example-content/player-card.jpg" />
<div class="player-card__info">
<img class="team player-card__team" src="/assets/example-content/leicster.jpg" />
<h1 class="player-name">Callum
<div>
<span class="player-name__lastname">Hudson-Odoi</span>
</div>
</h1>
<dl class="stat-list ">
<div>
<dt>Age</dt>
<dd>20 years</dd>
</div>
<div>
<dt>Position</dt>
<dd>Forward</dd>
</div>
<div>
<dt>Legacy number</dt>
<dd>1234567890</dd>
</div>
</dl>
<a href="/" class="text-xs player-card__cta">View Callum's profile</a>
</div>
</article>
</li>
<li>
<article class="player-card">
<img class="player-card__image" src="/assets/example-content/player-card.jpg" />
<div class="player-card__info">
<img class="team player-card__team" src="/assets/example-content/leicster.jpg" />
<h1 class="player-name">Callum
<div>
<span class="player-name__lastname">Hudson-Odoi</span>
</div>
</h1>
<dl class="stat-list ">
<div>
<dt>Age</dt>
<dd>20 years</dd>
</div>
<div>
<dt>Position</dt>
<dd>Forward</dd>
</div>
<div>
<dt>Legacy number</dt>
<dd>1234567890</dd>
</div>
</dl>
<a href="/" class="text-xs player-card__cta">View Callum's profile</a>
</div>
</article>
</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": "New Lions"
},
"subtitle": {
"copy": "Congratulations to [X] on [his/her/their] first call-up to the [Men’s Senior England or other] team",
"additionalClasses": "container__subtitle"
},
"players": [
{
"firstName": "Jadon",
"lastName": "Sancho",
"image": "/assets/example-content/player-card-2.jpg"
},
{},
{},
{},
{},
{},
{},
{},
{}
]
}
.first-call-up {
@media screen and (max-width: $mq-medium) {
.carousel__prev,
.carousel__next {
display: none;
}
}
@media screen and (min-width: 501px) and (max-width: 900px) {
.carousel-container {
max-width: 560px;
margin: 0 auto;
}
}
@media screen and (min-width: $mq-medium) {
.heading-section {
line-height: 6.9rem;
}
}
}
<section class="container vertical-spacing-xxl first-call-up">
<div class="container__content">
<div class="container__header">
{{render '@heading--section' heading merge=true}}
</div>
<div class="carousel-container">
<div class="carousel" data-behavior="carousel-glide">
<div data-glide-el="track">
<ul class="glide__slides">
{{#each players}}
<li>{{render '@player-card' 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>