<section class="course-availability" data-behavior="course-availability">
<h2>Course Availability</h2>
<div class="course-availability_container">
<div class="course-availability_list">
<div class="course-availability-individual" data-behaviour="course-availability-item">
<header>
<a href="#" aria-level="expand" aria-expanded="false" data-show="Show Schedule" data-hide="Hide Schedule">
<p>Show Schedule</p>
</a>
</header>
<div class="course-availability-individual__inner">
<div class="course-availability-individual__information">
<div>
<p>Date</p>
<h3>Wednesday 12 Feb</h3>
</div>
<div class="course-availability-individual__price">£160</div>
</div>
<div aria-expanded="false" class="course-availability-individual__content">
<div class="course-availability-individual__days">
<h3>Day One</h3>
<p>
<span>Wednesday 12 Sep</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Two</h3>
<p>
<span>Sunday 12 Feb</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Three</h3>
<p>
<span>Saturday 12 Apr</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
</div>
<a href="/" class="cta cta--efl pre-req-global-access" tabindex="0">Sign in to book course</a>
</div>
<footer>
<h4>7 spaces left</h4>
</footer>
</div>
<div class="course-availability-individual" data-behaviour="course-availability-item">
<header>
<a href="#" aria-level="expand" aria-expanded="false" data-show="Show Schedule" data-hide="Hide Schedule">
<p>Show Schedule</p>
</a>
</header>
<div class="course-availability-individual__inner">
<div class="course-availability-individual__information">
<div>
<p>Date</p>
<h3>Wednesday 12 Feb</h3>
</div>
<div class="course-availability-individual__price">£160</div>
</div>
<div aria-expanded="false" class="course-availability-individual__content">
<div class="course-availability-individual__days">
<h3>Day One</h3>
<p>
<span>Wednesday 12 Sep</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Two</h3>
<p>
<span>Sunday 12 Feb</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Three</h3>
<p>
<span>Saturday 12 Apr</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
</div>
<a href="/" class="cta cta--efl pre-req-global-access" tabindex="0">Sign in to book course</a>
</div>
<footer>
<h4>7 spaces left</h4>
</footer>
</div>
<div class="course-availability-individual" data-behaviour="course-availability-item">
<header>
<a href="#" aria-level="expand" aria-expanded="false" data-show="Show Schedule" data-hide="Hide Schedule">
<p>Show Schedule</p>
</a>
</header>
<div class="course-availability-individual__inner">
<div class="course-availability-individual__information">
<div>
<p>Date</p>
<h3>Wednesday 12 Feb</h3>
</div>
<div class="course-availability-individual__price">£160</div>
</div>
<div aria-expanded="false" class="course-availability-individual__content">
<div class="course-availability-individual__days">
<h3>Day One</h3>
<p>
<span>Wednesday 12 Sep</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Two</h3>
<p>
<span>Sunday 12 Feb</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Three</h3>
<p>
<span>Saturday 12 Apr</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
</div>
<a href="/" class="cta cta--efl pre-req-global-access" tabindex="0">Sign in to book course</a>
</div>
<footer>
<h4>7 spaces left</h4>
</footer>
</div>
<div class="course-availability-individual" data-behaviour="course-availability-item">
<header>
<a href="#" aria-level="expand" aria-expanded="false" data-show="Show Schedule" data-hide="Hide Schedule">
<p>Show Schedule</p>
</a>
</header>
<div class="course-availability-individual__inner">
<div class="course-availability-individual__information">
<div>
<p>Date</p>
<h3>Wednesday 12 Feb</h3>
</div>
<div class="course-availability-individual__price">£160</div>
</div>
<div aria-expanded="false" class="course-availability-individual__content">
<div class="course-availability-individual__days">
<h3>Day One</h3>
<p>
<span>Wednesday 12 Sep</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Two</h3>
<p>
<span>Sunday 12 Feb</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Three</h3>
<p>
<span>Saturday 12 Apr</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
</div>
<a href="/" class="cta cta--efl pre-req-global-access" tabindex="0">Sign in to book course</a>
</div>
<footer>
<h4>7 spaces left</h4>
</footer>
</div>
<div class="course-availability-individual" data-behaviour="course-availability-item">
<header>
<a href="#" aria-level="expand" aria-expanded="false" data-show="Show Schedule" data-hide="Hide Schedule">
<p>Show Schedule</p>
</a>
</header>
<div class="course-availability-individual__inner">
<div class="course-availability-individual__information">
<div>
<p>Date</p>
<h3>Wednesday 12 Feb</h3>
</div>
<div class="course-availability-individual__price">£160</div>
</div>
<div aria-expanded="false" class="course-availability-individual__content">
<div class="course-availability-individual__days">
<h3>Day One</h3>
<p>
<span>Wednesday 12 Sep</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Two</h3>
<p>
<span>Sunday 12 Feb</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Three</h3>
<p>
<span>Saturday 12 Apr</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
</div>
<a href="/" class="cta cta--efl pre-req-global-access" tabindex="0">Sign in to book course</a>
</div>
<footer>
<h4>7 spaces left</h4>
</footer>
</div>
<div class="course-availability-individual" data-behaviour="course-availability-item">
<header>
<a href="#" aria-level="expand" aria-expanded="false" data-show="Show Schedule" data-hide="Hide Schedule">
<p>Show Schedule</p>
</a>
</header>
<div class="course-availability-individual__inner">
<div class="course-availability-individual__information">
<div>
<p>Date</p>
<h3>Wednesday 12 Feb</h3>
</div>
<div class="course-availability-individual__price">£160</div>
</div>
<div aria-expanded="false" class="course-availability-individual__content">
<div class="course-availability-individual__days">
<h3>Day One</h3>
<p>
<span>Wednesday 12 Sep</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Two</h3>
<p>
<span>Sunday 12 Feb</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Three</h3>
<p>
<span>Saturday 12 Apr</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
</div>
<a href="/" class="cta cta--efl pre-req-global-access" tabindex="0">Sign in to book course</a>
</div>
<footer>
<h4>7 spaces left</h4>
</footer>
</div>
<div class="course-availability-individual" data-behaviour="course-availability-item">
<header>
<a href="#" aria-level="expand" aria-expanded="false" data-show="Show Schedule" data-hide="Hide Schedule">
<p>Show Schedule</p>
</a>
</header>
<div class="course-availability-individual__inner">
<div class="course-availability-individual__information">
<div>
<p>Date</p>
<h3>Wednesday 12 Feb</h3>
</div>
<div class="course-availability-individual__price">£160</div>
</div>
<div aria-expanded="false" class="course-availability-individual__content">
<div class="course-availability-individual__days">
<h3>Day One</h3>
<p>
<span>Wednesday 12 Sep</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Two</h3>
<p>
<span>Sunday 12 Feb</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Three</h3>
<p>
<span>Saturday 12 Apr</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
</div>
<a href="/" class="cta cta--efl pre-req-global-access" tabindex="0">Sign in to book course</a>
</div>
<footer>
<h4>7 spaces left</h4>
</footer>
</div>
<div class="course-availability-individual" data-behaviour="course-availability-item">
<header>
<a href="#" aria-level="expand" aria-expanded="false" data-show="Show Schedule" data-hide="Hide Schedule">
<p>Show Schedule</p>
</a>
</header>
<div class="course-availability-individual__inner">
<div class="course-availability-individual__information">
<div>
<p>Date</p>
<h3>Wednesday 12 Feb</h3>
</div>
<div class="course-availability-individual__price">£160</div>
</div>
<div aria-expanded="false" class="course-availability-individual__content">
<div class="course-availability-individual__days">
<h3>Day One</h3>
<p>
<span>Wednesday 12 Sep</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Two</h3>
<p>
<span>Sunday 12 Feb</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Three</h3>
<p>
<span>Saturday 12 Apr</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
</div>
<a href="/" class="cta cta--efl pre-req-global-access" tabindex="0">Sign in to book course</a>
</div>
<footer>
<h4>7 spaces left</h4>
</footer>
</div>
<div class="course-availability-individual" data-behaviour="course-availability-item">
<header>
<a href="#" aria-level="expand" aria-expanded="false" data-show="Show Schedule" data-hide="Hide Schedule">
<p>Show Schedule</p>
</a>
</header>
<div class="course-availability-individual__inner">
<div class="course-availability-individual__information">
<div>
<p>Date</p>
<h3>Wednesday 12 Feb</h3>
</div>
<div class="course-availability-individual__price">£160</div>
</div>
<div aria-expanded="false" class="course-availability-individual__content">
<div class="course-availability-individual__days">
<h3>Day One</h3>
<p>
<span>Wednesday 12 Sep</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Two</h3>
<p>
<span>Sunday 12 Feb</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
<div class="course-availability-individual__days">
<h3>Day Three</h3>
<p>
<span>Saturday 12 Apr</span>
<span class="middle-seperator">|</span>
<span>5:00 PM - 6:00PM</span>
</p>
</div>
</div>
<a href="/" class="cta cta--efl pre-req-global-access" tabindex="0">Sign in to book course</a>
</div>
<footer>
<h4>7 spaces left</h4>
</footer>
</div>
</div>
<button class="course-availability_show-more" data-show="Show More" data-hide="Show less">Show More</button>
</div>
</section>
No notes defined.
{
"expanded": true,
"courses": [
{
"price": 160,
"fullDate": "Wednesday 12 February",
"spacesLeft": 7,
"signed-in-online-cta": {
"copy": "Sign in to book course",
"modifier": "tertiary"
}
},
{
"price": 160,
"fullDate": "Wednesday 12 February",
"spacesLeft": 7,
"signed-in-online-cta": {
"copy": "Sign in to book course",
"modifier": "tertiary"
}
},
{
"price": 160,
"fullDate": "Wednesday 12 February",
"spacesLeft": 7,
"signed-in-online-cta": {
"copy": "Sign in to book course",
"modifier": "tertiary"
}
},
{
"price": 160,
"fullDate": "Wednesday 12 February",
"spacesLeft": 7,
"signed-in-online-cta": {
"copy": "Sign in to book course",
"modifier": "tertiary"
}
},
{
"price": 160,
"fullDate": "Wednesday 12 February",
"spacesLeft": 7,
"signed-in-online-cta": {
"copy": "Sign in to book course",
"modifier": "tertiary"
}
},
{
"price": 160,
"fullDate": "Wednesday 12 February",
"spacesLeft": 7,
"signed-in-online-cta": {
"copy": "Sign in to book course",
"modifier": "tertiary"
}
},
{
"price": 160,
"fullDate": "Wednesday 12 February",
"spacesLeft": 7,
"signed-in-online-cta": {
"copy": "Sign in to book course",
"modifier": "tertiary"
}
},
{
"price": 160,
"fullDate": "Wednesday 12 February",
"spacesLeft": 7,
"signed-in-online-cta": {
"copy": "Sign in to book course",
"modifier": "tertiary"
}
},
{
"price": 160,
"fullDate": "Wednesday 12 February",
"spacesLeft": 7,
"signed-in-online-cta": {
"copy": "Sign in to book course",
"modifier": "tertiary"
}
}
]
}
<section class="course-availability" data-behavior="course-availability">
<h2>Course Availability</h2>
{{#unless no-course-available}}
<div class="course-availability_container">
<div class="course-availability_list">
{{#each courses}}
{{render '@course-availability-individual' }}
{{/each}}
</div>
<button class="course-availability_show-more" data-show="Show More" data-hide="Show less">Show More</button>
</div>
{{/unless}}
{{#if no-course-available}}
<div class="course-availability__no-course">
<div class="course-availability__no-course--block {{#if no-course-cta}}no-course-cta{{/if}}">
<h3>No Courses Found</h3>
<div class="course-availability__no-course--info">
<h4>There are currently no courses available</h4>
<p>Sign up to be kept up to date regarding this Course Programme and other relevant events.</p>
</div>
{{#unless no-course-cta}}
<div class="course-availability__no-course--cta">
{{#if logged-out}}
{{render '@cta' signin-cta merge="true"}}
{{/if}}
{{#if logged-in}}
<a class="notify-cta">
<span class="notify-cta__bell"></span>
<span class="notify-cta__title">
Notify me when this course is available
</span>
<span class="notify-cta__copy">
When a course is added you’ll be notified by email of the course and details
</span>
</a>
<a class="notify-cta notify-cta--acknowledgement hidden">
<span class="notify-cta__bell"></span>
<span class="notify-cta__title">
You will be notified me when this course is available
</span>
<span class="notify-cta__copy">
When a course is added you’ll be notified by email of the course and details
</span>
</a>
{{/if}}
</div>
{{/unless}}
</div>
</div>
{{/if}}
</section>