<section class="efl-full-width-carousel efl-full-width-carousel--latest-sessions ">
<h2>Latest Sessions</h2>
<div class="carousel" data-behavior="full-width-carousel-glide">
<div data-glide-el="track">
<ul class="glide__slides">
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-1.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>01</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-2.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>02</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-3.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>03</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-4.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>04</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-5.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>05</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-1.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>06</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-2.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>07</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-3.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>08</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-4.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>09</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-5.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>10</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-1.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>11</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-2.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>12</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-3.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>13</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-4.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>14</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-5.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>15</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-1.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>16</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-2.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>17</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-3.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>18</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-4.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>19</span></div>
</a>
</li>
<li>
<a href="#" class="efl-carousel-card efl-carousel-card--video efl-carousel-card--trending">
<img class="efl-carousel-card--image" src=/assets/example-content/efl-hero-top-section-5.jpg alt="">
<div class="efl-carousel-card__content">
<p class="efl-carousel-card__content--category">course</p>
<h4 class="efl-carousel-card__content--title">BT Playmaker by England Football</h4>
</div>
<div class="efl-carousel-card--trending__number"><span>20</span></div>
</a>
</li>
</ul>
</div>
<div class="full-width-carousel-nav-block">
<div class="full-width-carousel-nav-wrapper">
<div class="full-width-carousel-navigation" data-glide-el="controls">
</div>
</div>
</div>
<button aria-label="Previous" class="full-width-carousel__cta full-width-carousel__prev"><span class="visually-hidden">Previous
page</span>
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.36326 10.0377L1.06884 10.8172L8.70084 19.2327L10.6387 17.6736L3.71231 10.0378L10.6387 2.40189L8.70084 0.842773L1.06884 9.25827L0.36326 10.0377Z" fill="white" />
</svg></button>
<button aria-label="Next" class="full-width-carousel__cta full-width-carousel__next"><span class="visually-hidden">Next
page</span><svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.8471 9.41443L9.18146 8.63462L1.98146 0.216612L0.153321 1.7762L6.68762 9.41434L0.15332 17.0525L1.98146 18.6121L9.18146 10.1941L9.8471 9.41443Z" fill="white" />
</svg></button>
</div>
<a href="#" class="view-all-sessions">View All Sessions</a>
</section>
No notes defined.
{
"heading": {
"copy": "Exclusive Partner Offers"
},
"subtitle": {
"copy": "Exclusive discounts and offers for members of the Pride",
"additionalClasses": "container__subtitle"
},
"players": [
{
"number": "01",
"image": "/assets/example-content/efl-hero-top-section-1.jpg"
},
{
"sponsors-show": false,
"number": "02",
"image": "/assets/example-content/efl-hero-top-section-2.jpg"
},
{
"sponsors-show": false,
"number": "03",
"image": "/assets/example-content/efl-hero-top-section-3.jpg"
},
{
"sponsors-show": false,
"number": "04",
"image": "/assets/example-content/efl-hero-top-section-4.jpg"
},
{
"sponsors-show": false,
"number": "05",
"image": "/assets/example-content/efl-hero-top-section-5.jpg"
},
{
"sponsors-show": false,
"number": "06",
"image": "/assets/example-content/efl-hero-top-section-1.jpg"
},
{
"sponsors-show": false,
"number": "07",
"image": "/assets/example-content/efl-hero-top-section-2.jpg"
},
{
"sponsors-show": false,
"number": "08",
"image": "/assets/example-content/efl-hero-top-section-3.jpg"
},
{
"sponsors-show": false,
"number": "09",
"image": "/assets/example-content/efl-hero-top-section-4.jpg"
},
{
"sponsors-show": false,
"number": "10",
"image": "/assets/example-content/efl-hero-top-section-5.jpg"
},
{
"sponsors-show": false,
"number": "11",
"image": "/assets/example-content/efl-hero-top-section-1.jpg"
},
{
"sponsors-show": false,
"number": "12",
"image": "/assets/example-content/efl-hero-top-section-2.jpg"
},
{
"sponsors-show": false,
"number": "13",
"image": "/assets/example-content/efl-hero-top-section-3.jpg"
},
{
"sponsors-show": false,
"number": "14",
"image": "/assets/example-content/efl-hero-top-section-4.jpg"
},
{
"sponsors-show": false,
"number": "15",
"image": "/assets/example-content/efl-hero-top-section-5.jpg"
},
{
"sponsors-show": false,
"number": "16",
"image": "/assets/example-content/efl-hero-top-section-1.jpg"
},
{
"sponsors-show": false,
"number": "17",
"image": "/assets/example-content/efl-hero-top-section-2.jpg"
},
{
"sponsors-show": false,
"number": "18",
"image": "/assets/example-content/efl-hero-top-section-3.jpg"
},
{
"sponsors-show": false,
"number": "19",
"image": "/assets/example-content/efl-hero-top-section-4.jpg"
},
{
"sponsors-show": false,
"number": "20",
"image": "/assets/example-content/efl-hero-top-section-5.jpg"
}
],
"efl-blue": false
}
.efl-full-width-carousel {
position: relative;
overflow: hidden;
padding-bottom: 3.1rem;
z-index: 2;
> h2 {
color: $blue;
padding-top: 6.4rem;
padding-left: 12.1rem;
padding-right: 12.1rem;
margin: auto;
font: $efl-heading-2;
&::after {
content: '';
display: block;
width: 6.4rem;
padding-top: 1.5rem;
border-bottom: 0.2rem solid $red;
}
}
> a {
padding-left: 12.1rem;
padding-right: 12.1rem;
margin: auto;
text-transform: uppercase;
font-family: $text-font-ef;
font-size: 1.6rem;
font-weight: 400;
line-height: 2.4rem;
letter-spacing: 0;
text-align: left;
}
.carousel {
position: relative;
}
.container {
&__content {
max-width: initial;
}
&__subtitle {
font: normal normal 2rem/3.2rem $text-font-ef;
letter-spacing: 0.02em;
color: $color-interface-light;
}
}
.heading-section {
text-transform: uppercase;
margin-bottom: 3.6rem;
}
.carousel__prev {
position: absolute;
left: 0;
}
.full-width-carousel {
.visually-hidden {
visibility: hidden;
}
&-nav-block {
display: flex;
position: absolute;
bottom: -0.1rem;
left: 0;
width: 100%;
flex-direction: column;
justify-content: flex-end;
opacity: 0;
.glide-carousel__pagination {
button {
background-color: $red;
margin: 0 1.1rem;
&.glide__bullet--active {
background-color: $grey;
}
}
}
}
&__next {
border-radius: 0.4rem 0 0 0.4rem;
right: 0;
}
&__prev {
border-radius: 0 0.4rem 0.4rem 0;
left: 0;
}
&__next,
&__prev {
cursor: pointer;
position: absolute;
height: 13rem;
width: 5.3rem;
border-style: none;
top: 50%;
transform: translate(0, -50%);
background-color: $color-interface-light;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
transition: background-color 0.3s ease-in-out;
&:hover {
opacity: 1;
background-color: $white;
path[d] {
fill: $blue;
}
}
&.disabled {
cursor: default;
opacity: 0.3;
&:hover {
opacity: 0.3;
background-color: $color-interface-light;
path[d] {
fill: $white;
}
}
}
}
}
&:hover {
.full-width-carousel-nav-block {
opacity: 0.7;
transition: opacity 0.3s ease-in-out;
}
}
&--latest-sessions {
padding-bottom: 3.9rem;
position: relative;
background-color: $grey-light;
&.efl-full-width-carousel {
.full-width-carousel-nav-block {
bottom: -1.3rem;
}
}
&::after {
content: '';
position: absolute;
z-index: -1;
top: 0;
right: 0;
display: block;
background-image: url('./assets/images/efl-full-width-carousel-latest-sessions.png');
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
width: 100%;
height: 100%;
}
}
&--ongoing-learning {
.article-session-card {
.article-session-card__content {
height: 15.9rem;
}
}
}
&--latest-articles,
&--ongoing-learning {
padding-bottom: 3.9rem;
position: relative;
&.efl-full-width-carousel {
.full-width-carousel-nav-block {
bottom: -1.3rem;
}
}
.article-session-card {
flex-direction: column;
margin-top: 2.3rem;
margin-bottom: 2.3rem;
&__image {
height: 21.9rem;
max-height: 21.9rem;
max-width: none;
border-radius: 0.4rem 0.4rem 0 0;
&--video::before {
border-radius: 0;
bottom: 0;
left: 0;
margin: 0;
}
}
/* stylelint-disable no-descending-specificity */
&__content {
height: 18.6rem;
&--title {
@include text-limit(3);
white-space: pre-wrap;
}
&--description {
display: none;
}
&--date-wrap {
display: flex;
flex-direction: column;
&::before {
margin: 1.4rem 0;
content: '';
width: 100%;
border-bottom: 0.1rem solid $grey-light;
height: auto;
}
}
}
}
.full-width-carousel-nav-block .glide-carousel__pagination {
button {
background: $blue;
opacity: 0.43;
&.glide__bullet--active {
opacity: 1;
background: $red;
}
}
}
&.efl-grey {
.full-width-carousel-nav-block .glide-carousel__pagination {
button {
background: $red;
opacity: 1;
&.glide__bullet--active {
background: $white;
opacity: 1;
}
}
}
}
}
&.efl-blue {
h2 {
color: $white;
}
> a {
color: $white;
}
&::after {
background-image: url('./assets/images/efl-full-width-carousel-latest-sessions-efl-blue.png');
}
&::before {
content: '';
position: absolute;
z-index: -2;
top: 0;
right: 0;
display: block;
background-color: $blue-accent3;
background-image: url('./assets/images/noise.png');
background-repeat: repeat-x;
background-position: right center;
background-size: auto 100%;
width: 100%;
height: 100%;
}
.full-width-carousel-nav-block .glide-carousel__pagination {
button {
background-color: $red;
opacity: 1;
&.glide__bullet--active {
background-color: $white;
opacity: 1;
}
}
}
.efl-carousel-card {
&:focus {
outline: 3px solid $white;
}
}
}
&.efl-grey {
background-color: $grey-light;
&::before {
background: none;
}
&::after {
background: none;
}
}
&--other-bundles {
padding-bottom: 4.3rem;
.bundle-card {
margin-top: 2.9rem;
margin-bottom: 6.2rem;
}
> a {
color: $blue;
}
.full-width-carousel-nav-block .glide-carousel__pagination {
button {
background-color: $color-interface-light;
opacity: 1;
&.glide__bullet--active {
opacity: 1;
background-color: $red;
}
}
}
}
@media screen and (min-width: 501px) and (max-width: 900px) {
.carousel-container {
max-width: 56rem;
margin: 0 auto;
}
}
// Tablet Dimensions
@media screen and (min-width: $mq-small) and (max-width: $mq-medium) {
> h2 {
padding-left: 8.2rem !important;
}
> a {
padding-left: 8.2rem !important;
}
&--latest-sessions,
&--latest-articles,
&--ongoing-learning {
.glide-carousel__pagination {
margin-left: 18rem;
}
}
}
@media screen and (max-width: $mq-medium) {
overflow: hidden;
max-width: 100vw;
> h2 {
padding-top: 2.4rem;
padding-left: 3.2rem;
padding-right: 3.2rem;
&::after {
padding-top: 0.8rem;
}
}
> a {
padding-left: 3.2rem;
padding-right: 3.2rem;
}
&--latest-sessions {
padding-bottom: 3.2rem;
&::after {
background-image: url('./assets/images/efl-full-width-carousel-latest-sessions-crop.png');
}
.efl-carousel-card {
margin-top: 2.4rem;
margin-bottom: 3.2rem;
}
}
&--ongoing-learning {
.article-session-card {
.article-session-card__content {
height: 11rem;
}
}
}
&--latest-articles,
&--ongoing-learning {
padding-bottom: 3.2rem;
.article-session-card--horizontal,
.article-session-card {
margin-top: 2.9rem;
margin-bottom: 2.9rem;
&__image {
height: 11rem;
}
&__content {
height: 15.9rem;
}
}
}
&.efl-blue {
&::after {
background-image: url('./assets/images/efl-full-width-carousel-latest-sessions-efl-blue-crop.png');
}
}
.container__subtitle {
margin-top: 1.5rem;
padding: 0 1.6rem;
}
.heading-section {
font-size: 4rem;
line-height: 4rem;
}
&--other-bundles {
padding-bottom: 3.2rem;
.bundle-card {
margin-top: 3.1rem;
margin-bottom: 2.4rem;
}
}
}
@media screen and (max-width: $mq-medium) {
.full-width-carousel {
&__next,
&__prev {
display: none;
}
&-nav-block {
display: none;
}
}
}
}
:root [data-brand='womens'],
:root [data-brand='mens'] {
@media screen and (max-width: $mq-medium) {
.membership-carousel .heading-section {
font-size: 5rem;
line-height: 3.8rem;
}
}
}
<section class="efl-full-width-carousel efl-full-width-carousel--latest-sessions {{#if efl-blue}}efl-blue{{/if}}">
<h2>Latest Sessions</h2>
<div class="carousel" data-behavior="full-width-carousel-glide">
<div data-glide-el="track">
<ul class="glide__slides">
{{#each players}}
<li>
{{render '@efl-carousel-card--trending' this merge="true"}}
</li>
{{/each}}
</ul>
</div>
<div class="full-width-carousel-nav-block">
<div class="full-width-carousel-nav-wrapper">
<div class="full-width-carousel-navigation" data-glide-el="controls">
</div>
</div>
</div>
<button aria-label="Previous" class="full-width-carousel__cta full-width-carousel__prev"><span
class="visually-hidden">Previous
page</span>
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.36326 10.0377L1.06884 10.8172L8.70084 19.2327L10.6387 17.6736L3.71231 10.0378L10.6387 2.40189L8.70084 0.842773L1.06884 9.25827L0.36326 10.0377Z" fill="white"/>
</svg></button>
<button aria-label="Next" class="full-width-carousel__cta full-width-carousel__next"><span
class="visually-hidden">Next
page</span><svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.8471 9.41443L9.18146 8.63462L1.98146 0.216612L0.153321 1.7762L6.68762 9.41434L0.15332 17.0525L1.98146 18.6121L9.18146 10.1941L9.8471 9.41443Z" fill="white"/>
</svg></button>
</div>
<a href="#" class="view-all-sessions">View All Sessions</a>
</section>