<div class="efl-bundle-recommendations" data-behaviour="accordion">
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="bundle-0" aria-expanded="true" aria-controls="bundle-0-panel">
<div class="efl-bundle-recommendations__section">Attacking Skills</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel open-accordion" id="bundle-0-panel" role="region" aria-labelledby="bundle-0">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<section class="efl-hero-banner article-session-index" data-behavior="efl-hero-banner">
<div class="efl-hero-banner__wrapper">
<div class="efl-hero-banner__overlay">
<div class="efl-hero-banner__overlay--wrapper">
<h1><span class="jumpTohide">Headline</span></h1>
<div class="efl-hero-banner-copy">
Try these bundles of sessions and articles aimed at anyone interested in taking a more active role in grassroots football.
</div>
</div>
</div>
</div>
</section>
<div class='efl-bundle-recommendations__bundle-section'>
<div class="efl-bundle-card ">
<div class="efl-bundle-card__gallery">
<img src="/assets/example-content/bundle-recommendation/bundle-img.svg" class="placeholder-img">
<div class="placeholder-img--1"></div>
<div class="placeholder-img--2"></div>
</div>
<div class="efl-bundle-card__info">
<div class="title">Bundle One</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.</p>
<div class="efl-bundle-card__award-details">
<div class="efl-bundle-card__trophy">
<img src="/assets/example-content/bundle-recommendation/efl-bundle-trophy.svg" alt="">
<p>1 - Trophy awarded</p>
</div>
<div class="efl-bundle-card__time-quiz mob-hide">
<p class="mins">20 - Minutes</p>
<p class="quiz">5 - Quizzes</p>
</div>
<div class="efl-bundle-card__time-quiz desktop-hide">
<p class="mins">20 - Mins</p>
<p class="quiz">5 - Quiz</p>
</div>
</div>
<div class="efl-bundle-card__view-bundles">
<a href="#" class="cta cta--efl" id="view-bundle-button" title="View Bundle of Bundle One" tabindex="0">view
bundle</a>
</div>
</div>
</div>
<div class="efl-bundle-card ">
<div class="efl-bundle-card__gallery">
<img src="/assets/example-content/bundle-recommendation/bundle-img.svg" class="placeholder-img">
<div class="placeholder-img--1"></div>
<div class="placeholder-img--2"></div>
</div>
<div class="efl-bundle-card__info">
<div class="title">Bundle Two</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.</p>
<div class="efl-bundle-card__award-details">
<div class="efl-bundle-card__trophy">
<img src="/assets/example-content/bundle-recommendation/efl-bundle-trophy.svg" alt="">
<p>1 - Trophy awarded</p>
</div>
<div class="efl-bundle-card__time-quiz mob-hide">
<p class="mins">20 - Minutes</p>
<p class="quiz">5 - Quizzes</p>
</div>
<div class="efl-bundle-card__time-quiz desktop-hide">
<p class="mins">20 - Mins</p>
<p class="quiz">5 - Quiz</p>
</div>
</div>
<div class="efl-bundle-card__view-bundles">
<a href="#" class="cta cta--efl" id="view-bundle-button" title="View Bundle of Bundle Two" tabindex="0">view
bundle</a>
</div>
</div>
</div>
<div class="efl-bundle-card efl-bundle-card--completed">
<div class="efl-bundle-card__gallery">
<img src="/assets/example-content/bundle-recommendation/bundle-img.svg" class="placeholder-img">
<div class="placeholder-img--1"></div>
<div class="placeholder-img--2"></div>
</div>
<div class="efl-bundle-card__info">
<div class="title">Bundle Three</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.</p>
<div class="efl-bundle-card__award-details">
<div class="efl-bundle-card__trophy">
<img src="/assets/example-content/bundle-recommendation/efl-bundle-trophy.svg" alt="">
<p>1 - Trophy awarded</p>
</div>
<div class="efl-bundle-card__time-quiz mob-hide">
<p class="mins">20 - Minutes</p>
<p class="quiz">5 - Quizzes</p>
</div>
<div class="efl-bundle-card__time-quiz desktop-hide">
<p class="mins">20 - Mins</p>
<p class="quiz">5 - Quiz</p>
</div>
</div>
<div class="efl-bundle-card__view-bundles">
<a href="#" class="cta cta--efl" id="view-bundle-button" title="View Bundle of Bundle Three" tabindex="0">view
bundle</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="bundle-1" aria-expanded="false" aria-controls="bundle-1-panel">
<div class="efl-bundle-recommendations__section">Defending skills</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel " id="bundle-1-panel" role="region" aria-labelledby="bundle-1">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<section class="efl-hero-banner article-session-index" data-behavior="efl-hero-banner">
<div class="efl-hero-banner__wrapper">
<div class="efl-hero-banner__overlay">
<div class="efl-hero-banner__overlay--wrapper">
<h1><span class="jumpTohide">Headline</span></h1>
<div class="efl-hero-banner-copy">
Try these bundles of sessions and articles aimed at anyone interested in taking a more active role in grassroots football.
</div>
</div>
</div>
</div>
</section>
<div class='efl-bundle-recommendations__bundle-section'>
<div class="efl-bundle-card ">
<div class="efl-bundle-card__gallery">
<img src="/assets/example-content/bundle-recommendation/bundle-img.svg" class="placeholder-img">
<div class="placeholder-img--1"></div>
<div class="placeholder-img--2"></div>
</div>
<div class="efl-bundle-card__info">
<div class="title">Bundle One</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.</p>
<div class="efl-bundle-card__award-details">
<div class="efl-bundle-card__trophy">
<img src="/assets/example-content/bundle-recommendation/efl-bundle-trophy.svg" alt="">
<p>1 - Trophy awarded</p>
</div>
<div class="efl-bundle-card__time-quiz mob-hide">
<p class="mins">20 - Minutes</p>
<p class="quiz">5 - Quizzes</p>
</div>
<div class="efl-bundle-card__time-quiz desktop-hide">
<p class="mins">20 - Mins</p>
<p class="quiz">5 - Quiz</p>
</div>
</div>
<div class="efl-bundle-card__view-bundles">
<a href="#" class="cta cta--efl" id="view-bundle-button" title="View Bundle of Bundle One" tabindex="0">view
bundle</a>
</div>
</div>
</div>
<div class="efl-bundle-card ">
<div class="efl-bundle-card__gallery">
<img src="/assets/example-content/bundle-recommendation/bundle-img.svg" class="placeholder-img">
<div class="placeholder-img--1"></div>
<div class="placeholder-img--2"></div>
</div>
<div class="efl-bundle-card__info">
<div class="title">Bundle Two</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.</p>
<div class="efl-bundle-card__award-details">
<div class="efl-bundle-card__trophy">
<img src="/assets/example-content/bundle-recommendation/efl-bundle-trophy.svg" alt="">
<p>1 - Trophy awarded</p>
</div>
<div class="efl-bundle-card__time-quiz mob-hide">
<p class="mins">20 - Minutes</p>
<p class="quiz">5 - Quizzes</p>
</div>
<div class="efl-bundle-card__time-quiz desktop-hide">
<p class="mins">20 - Mins</p>
<p class="quiz">5 - Quiz</p>
</div>
</div>
<div class="efl-bundle-card__view-bundles">
<a href="#" class="cta cta--efl" id="view-bundle-button" title="View Bundle of Bundle Two" tabindex="0">view
bundle</a>
</div>
</div>
</div>
<div class="efl-bundle-card ">
<div class="efl-bundle-card__gallery">
<img src="/assets/example-content/bundle-recommendation/bundle-img.svg" class="placeholder-img">
<div class="placeholder-img--1"></div>
<div class="placeholder-img--2"></div>
</div>
<div class="efl-bundle-card__info">
<div class="title">Bundle Three</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.</p>
<div class="efl-bundle-card__award-details">
<div class="efl-bundle-card__trophy">
<img src="/assets/example-content/bundle-recommendation/efl-bundle-trophy.svg" alt="">
<p>1 - Trophy awarded</p>
</div>
<div class="efl-bundle-card__time-quiz mob-hide">
<p class="mins">20 - Minutes</p>
<p class="quiz">5 - Quizzes</p>
</div>
<div class="efl-bundle-card__time-quiz desktop-hide">
<p class="mins">20 - Mins</p>
<p class="quiz">5 - Quiz</p>
</div>
</div>
<div class="efl-bundle-card__view-bundles">
<a href="#" class="cta cta--efl" id="view-bundle-button" title="View Bundle of Bundle Three" tabindex="0">view
bundle</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="bundle-2" aria-expanded="false" aria-controls="bundle-2-panel">
<div class="efl-bundle-recommendations__section">Coaching skills</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel " id="bundle-2-panel" role="region" aria-labelledby="bundle-2">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<section class="efl-hero-banner article-session-index" data-behavior="efl-hero-banner">
<div class="efl-hero-banner__wrapper">
<div class="efl-hero-banner__overlay">
<div class="efl-hero-banner__overlay--wrapper">
<h1><span class="jumpTohide">Headline</span></h1>
<div class="efl-hero-banner-copy">
Try these bundles of sessions and articles aimed at anyone interested in taking a more active role in grassroots football.
</div>
</div>
</div>
</div>
</section>
<div class='efl-bundle-recommendations__bundle-section'>
<div class="efl-bundle-card ">
<div class="efl-bundle-card__gallery">
<img src="/assets/example-content/bundle-recommendation/bundle-img.svg" class="placeholder-img">
<div class="placeholder-img--1"></div>
<div class="placeholder-img--2"></div>
</div>
<div class="efl-bundle-card__info">
<div class="title">Bundle One</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.</p>
<div class="efl-bundle-card__award-details">
<div class="efl-bundle-card__trophy">
<img src="/assets/example-content/bundle-recommendation/efl-bundle-trophy.svg" alt="">
<p>1 - Trophy awarded</p>
</div>
<div class="efl-bundle-card__time-quiz mob-hide">
<p class="mins">20 - Minutes</p>
<p class="quiz">5 - Quizzes</p>
</div>
<div class="efl-bundle-card__time-quiz desktop-hide">
<p class="mins">20 - Mins</p>
<p class="quiz">5 - Quiz</p>
</div>
</div>
<div class="efl-bundle-card__view-bundles">
<a href="#" class="cta cta--efl" id="view-bundle-button" title="View Bundle of Bundle One" tabindex="0">view
bundle</a>
</div>
</div>
</div>
<div class="efl-bundle-card ">
<div class="efl-bundle-card__gallery">
<img src="/assets/example-content/bundle-recommendation/bundle-img.svg" class="placeholder-img">
<div class="placeholder-img--1"></div>
<div class="placeholder-img--2"></div>
</div>
<div class="efl-bundle-card__info">
<div class="title">Bundle Two</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.</p>
<div class="efl-bundle-card__award-details">
<div class="efl-bundle-card__trophy">
<img src="/assets/example-content/bundle-recommendation/efl-bundle-trophy.svg" alt="">
<p>1 - Trophy awarded</p>
</div>
<div class="efl-bundle-card__time-quiz mob-hide">
<p class="mins">20 - Minutes</p>
<p class="quiz">5 - Quizzes</p>
</div>
<div class="efl-bundle-card__time-quiz desktop-hide">
<p class="mins">20 - Mins</p>
<p class="quiz">5 - Quiz</p>
</div>
</div>
<div class="efl-bundle-card__view-bundles">
<a href="#" class="cta cta--efl" id="view-bundle-button" title="View Bundle of Bundle Two" tabindex="0">view
bundle</a>
</div>
</div>
</div>
<div class="efl-bundle-card ">
<div class="efl-bundle-card__gallery">
<img src="/assets/example-content/bundle-recommendation/bundle-img.svg" class="placeholder-img">
<div class="placeholder-img--1"></div>
<div class="placeholder-img--2"></div>
</div>
<div class="efl-bundle-card__info">
<div class="title">Bundle Three</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.</p>
<div class="efl-bundle-card__award-details">
<div class="efl-bundle-card__trophy">
<img src="/assets/example-content/bundle-recommendation/efl-bundle-trophy.svg" alt="">
<p>1 - Trophy awarded</p>
</div>
<div class="efl-bundle-card__time-quiz mob-hide">
<p class="mins">20 - Minutes</p>
<p class="quiz">5 - Quizzes</p>
</div>
<div class="efl-bundle-card__time-quiz desktop-hide">
<p class="mins">20 - Mins</p>
<p class="quiz">5 - Quiz</p>
</div>
</div>
<div class="efl-bundle-card__view-bundles">
<a href="#" class="cta cta--efl" id="view-bundle-button" title="View Bundle of Bundle Three" tabindex="0">view
bundle</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
No notes defined.
{
"section": [
{
"title": "Attacking Skills",
"activeBundle": true,
"hero-bundle": {
"title": "Headline",
"copy": "Try these bundles of sessions and articles aimed at anyone interested in taking a more active role in grassroots football."
},
"bundle": [
{
"image": "/assets/example-content/bundle-img-1.png",
"name": "Bundle One",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.",
"view-bundle": {
"href": "#",
"copy": "view bundle",
"id": "view-bundle-button"
}
},
{
"image": "/assets/example-content/bundle-img-1.png",
"name": "Bundle Two",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.",
"view-bundle": {
"href": "#",
"copy": "view bundle",
"id": "view-bundle-button"
}
},
{
"image": "/assets/example-content/bundle-img-1.png",
"name": "Bundle Three",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.",
"view-bundle": {
"href": "#",
"copy": "view bundle",
"id": "view-bundle-button"
},
"modifier": "completed"
}
]
},
{
"title": "Defending skills",
"activeBundle": false,
"hero-bundle": {
"title": "Headline",
"copy": "Try these bundles of sessions and articles aimed at anyone interested in taking a more active role in grassroots football."
},
"bundle": [
{
"image": "/assets/example-content/bundle-img-1.png",
"name": "Bundle One",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.",
"view-bundle": {
"href": "#",
"copy": "view bundle",
"id": "view-bundle-button"
}
},
{
"image": "/assets/example-content/bundle-img-1.png",
"name": "Bundle Two",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.",
"view-bundle": {
"href": "#",
"copy": "view bundle",
"id": "view-bundle-button"
}
},
{
"image": "/assets/example-content/bundle-img-1.png",
"name": "Bundle Three",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.",
"view-bundle": {
"href": "#",
"copy": "view bundle",
"id": "view-bundle-button"
}
}
]
},
{
"title": "Coaching skills",
"activeBundle": false,
"hero-bundle": {
"title": "Headline",
"copy": "Try these bundles of sessions and articles aimed at anyone interested in taking a more active role in grassroots football."
},
"bundle": [
{
"image": "/assets/example-content/bundle-img-1.png",
"name": "Bundle One",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.",
"view-bundle": {
"href": "#",
"copy": "view bundle",
"id": "view-bundle-button"
}
},
{
"image": "/assets/example-content/bundle-img-1.png",
"name": "Bundle Two",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.",
"view-bundle": {
"href": "#",
"copy": "view bundle",
"id": "view-bundle-button"
}
},
{
"image": "/assets/example-content/bundle-img-1.png",
"name": "Bundle Three",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tortor eratLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi.",
"view-bundle": {
"href": "#",
"copy": "view bundle",
"id": "view-bundle-button"
}
}
]
}
]
}
.efl-bundle-recommendations {
.accordion__panel {
background: $grey-light2;
}
.accordion__panel.open-accordion {
max-height: initial;
}
.accordion__content {
position: relative;
margin-bottom: 0;
&::after {
content: '';
position: absolute;
width: 100%;
bottom: 0;
height: 0.1rem;
background-color: $color-interface-light;
}
}
.accordion__trigger {
background: $blue;
border-radius: unset;
padding: 2.8rem 3.2rem;
margin: 0;
&:focus {
border: 0.2rem solid $white;
}
}
.accordion__trigger-icon {
background: url('/assets/example-content/bundle-recommendation/bundle-arrow-closed.svg')
no-repeat center;
width: 3.2rem;
height: 3.2rem;
max-width: none;
background-size: contain;
}
.accordion__trigger[aria-expanded='true'] > .accordion__trigger-icon {
background: url('/assets/example-content/bundle-recommendation/bundle-arrow-open.svg')
no-repeat center;
width: 3.2rem;
height: 3.2rem;
max-width: none;
background-size: contain;
}
.accordion__panel--aligncontent {
padding: 0;
}
.efl-hero-banner.article-session-index .efl-hero-banner__overlay--wrapper h1 {
color: $white;
margin-bottom: 2.4rem;
}
&__section {
@extend .efl-p-medium;
color: $white;
font-weight: 500;
font-size: 2rem;
letter-spacing: -0.01em;
}
&__bundle-section {
padding: 3.2rem 1.6rem;
}
@media screen and (min-width: $mq-medium) {
.accordion__trigger {
padding: 2.4rem calc(50vw - 35.25rem);
}
&__bundle-section {
padding: 4rem 0;
display: flex;
flex-direction: column;
align-items: center;
}
}
@media screen and (max-width: $mq-large) {
.accordion__trigger {
padding: 2.8rem 3.2rem;
}
}
@media screen and (min-width: 768px) and (max-width: 820px) {
.accordion__trigger {
padding: 2.8rem 1.6rem;
}
}
}
<div class="efl-bundle-recommendations" data-behaviour="accordion">
{{#each section}}
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="bundle-{{@index}}" aria-expanded="{{activeBundle}}"
aria-controls="bundle-{{@index}}-panel">
<div class="efl-bundle-recommendations__section">{{title}}</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel {{#if activeBundle}}open-accordion{{/if}}" id="bundle-{{@index}}-panel" role="region" aria-labelledby="bundle-{{@index}}">
<div class="accordion__panel--aligncontent" aria-hidden="true">
{{render '@efl-hero-banner--article-session-index-hero' hero-bundle merge='true'}}
<div class='efl-bundle-recommendations__bundle-section'>
{{#each bundle}}
{{render '@efl-bundle-card' this merge='true'}}
{{/each}}
</div>
</div>
</div>
</div>
{{/each}}
</div>