<div class="page-wrapper efl-article-index-page">
<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">Guides & Resources</span></h1>
<div class="efl-hero-banner-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis.
</div>
</div>
</div>
</div>
</section>
<div class="efl-page-content__dynamic-placeholder">
<!-- below placeholders are dynamic we need to update based on component-->
<!-- full width column block -->
<div class="efl-column-layout efl-column-layout--one full-width">
<div class="efl-index-layout">
<div class="efl-index-layout--main">
<div class="efl-signpost-list--1">
<section class="signpost guides-resources-signpost ">
<a href="#" class="signpost__outer">
<div class="signpost__image-wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/guides-resources-1-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/guides-resources-1-desk.jpg">
<img src="/assets/example-content/guides-resources-1-desk.jpg" alt="" class="zoom-in">
</picture>
</div>
<div class="signpost__info">
<h3 class="signpost__heading">Coaching guides & resources</h3>
<p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat lectus nunc, at rhoncus felis pharetra.</p>
<hr />
<span class="cta cta--primary " tabindex="0">View All Coaching Articles & Resources</span>
</div>
</a href="#">
</section>
</div>
<div class="efl-signpost-list--2">
<section class="signpost guides-resources-signpost ">
<a href="#" class="signpost__outer">
<div class="signpost__image-wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/guides-resources-2-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/guides-resources-2-desk.jpg">
<img src="/assets/example-content/guides-resources-2-desk.jpg" alt="" class="zoom-in">
</picture>
</div>
<div class="signpost__info">
<h3 class="signpost__heading">Safeguarding resources</h3>
<p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat.</p>
<hr />
<span class="cta cta--primary " tabindex="0">View All Safeguarding Content</span>
</div>
</a href="#">
</section>
<section class="signpost guides-resources-signpost ">
<a href="#" class="signpost__outer">
<div class="signpost__image-wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/guides-resources-3-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/guides-resources-3-desk.jpg">
<img src="/assets/example-content/guides-resources-3-desk.jpg" alt="" class="zoom-in">
</picture>
</div>
<div class="signpost__info">
<h3 class="signpost__heading">External links</h3>
<p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat.</p>
<hr />
<span class="cta cta--primary " tabindex="0">View All Safeguarding Content</span>
</div>
</a href="#">
</section>
</div>
<div class="efl-signpost-list--3">
<section class="signpost guides-resources-signpost ">
<a href="#" class="signpost__outer">
<div class="signpost__image-wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/guides-resources-2-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/guides-resources-2-desk.jpg">
<img src="/assets/example-content/guides-resources-2-desk.jpg" alt="" class="zoom-in">
</picture>
</div>
<div class="signpost__info">
<h3 class="signpost__heading">Safeguarding resources</h3>
<p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat.</p>
<hr />
<span class="cta cta--primary " tabindex="0">View All Safeguarding Content</span>
</div>
</a href="#">
</section>
<section class="signpost guides-resources-signpost ">
<a href="#" class="signpost__outer">
<div class="signpost__image-wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/guides-resources-5-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/guides-resources-5-desk.jpg">
<img src="/assets/example-content/guides-resources-5-desk.jpg" alt="" class="zoom-in">
</picture>
</div>
<div class="signpost__info">
<h3 class="signpost__heading">Ongoing learning & CPD</h3>
<p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<hr />
<span class="cta cta--primary " tabindex="0">View All Ongoing learning & cpd content</span>
</div>
</a href="#">
</section>
<section class="signpost guides-resources-signpost ">
<a href="#" class="signpost__outer">
<div class="signpost__image-wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/guides-resources-5-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/guides-resources-5-desk.jpg">
<img src="/assets/example-content/guides-resources-5-desk.jpg" alt="" class="zoom-in">
</picture>
</div>
<div class="signpost__info">
<h3 class="signpost__heading">External links</h3>
<p class="signpost__subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<hr />
<span class="cta cta--primary " tabindex="0">View All External links</span>
</div>
</a href="#">
</section>
</div>
</div>
</div>
</div>
</div>
</div>
No notes defined.
{
"efl-hero-banner": {
"title": "Guides & Resources",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis."
},
"signpost-1": {
"variant": "guides-resources-signpost",
"heading": "Coaching guides & resources",
"twoimage": true,
"subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat lectus nunc, at rhoncus felis pharetra.",
"smallimage": "/assets/example-content/guides-resources-1-mob.jpg",
"bigimage": "/assets/example-content/guides-resources-1-desk.jpg",
"cta": {
"copy": "View All Coaching Articles & Resources",
"disabled": true
}
},
"signpost-2": {
"variant": "guides-resources-signpost",
"heading": "Safeguarding resources",
"twoimage": true,
"subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat.",
"smallimage": "/assets/example-content/guides-resources-2-mob.jpg",
"bigimage": "/assets/example-content/guides-resources-2-desk.jpg",
"cta": {
"copy": "View All Safeguarding Content",
"disabled": true
}
},
"signpost-3": {
"variant": "guides-resources-signpost",
"heading": "External links",
"twoimage": true,
"subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat.",
"smallimage": "/assets/example-content/guides-resources-3-mob.jpg",
"bigimage": "/assets/example-content/guides-resources-3-desk.jpg",
"cta": {
"copy": "View All Safeguarding Content",
"disabled": true
}
},
"signpost-4": {
"variant": "guides-resources-signpost",
"heading": "Safeguarding resources",
"twoimage": true,
"subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat.",
"smallimage": "/assets/example-content/guides-resources-2-mob.jpg",
"bigimage": "/assets/example-content/guides-resources-2-desk.jpg",
"cta": {
"copy": "View All Safeguarding Content",
"disabled": true
}
},
"signpost-5": {
"variant": "guides-resources-signpost",
"heading": "Ongoing learning & CPD",
"twoimage": true,
"subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"smallimage": "/assets/example-content/guides-resources-5-mob.jpg",
"bigimage": "/assets/example-content/guides-resources-5-desk.jpg",
"cta": {
"copy": "View All Ongoing learning & cpd content",
"disabled": true
}
},
"signpost-6": {
"variant": "guides-resources-signpost",
"heading": "External links",
"twoimage": true,
"subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"smallimage": "/assets/example-content/guides-resources-5-mob.jpg",
"bigimage": "/assets/example-content/guides-resources-5-desk.jpg",
"cta": {
"copy": "View All External links",
"disabled": true
}
}
}
<div class="page-wrapper efl-article-index-page">
{{render '@efl-hero-banner--article-session-index-hero' efl-hero-banner merge=true}}
<div class="efl-page-content__dynamic-placeholder">
<!-- below placeholders are dynamic we need to update based on component-->
<!-- full width column block -->
<div class="efl-column-layout efl-column-layout--one full-width">
<div class="efl-index-layout">
<div class="efl-index-layout--main">
<div class="efl-signpost-list--1">
{{render '@signpost' signpost-1 merge=true}}
</div>
<div class="efl-signpost-list--2">
{{render '@signpost' signpost-2 merge=true}}
{{render '@signpost' signpost-3 merge=true}}
</div>
<div class="efl-signpost-list--3">
{{render '@signpost' signpost-4 merge=true}}
{{render '@signpost' signpost-5 merge=true}}
{{render '@signpost' signpost-6 merge=true}}
</div>
</div>
</div>
</div>
</div>
</div>