<link media="all" rel="stylesheet" href="/assets/themes/default/css/card-collection.css?cb=">
<div class="card-collection card-collection--4-cards" data-module="cardCollection">
<div class="grid-container">
<div class="grid-x grid-padding-x card-collection__cards">
<div class="cell card-collection__card-wrapper card-collection__card-wrapper--page js-card-wrapper">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/standard-card.css?cb=">
<div class="card">
<div class="card__image-wrapper">
<a href="#">
<div class="card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<source media="(min-width: 841px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="Image alt text">
</picture>
</div>
</a>
</div>
<div class="card__details">
<a href="#">
<h2 class="card__title">Lorem Ipsum</h2>
<p class="card__subline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.</p>
</a>
<a href="#" data-module="cta" class="cta card__cta">
Click here
</a>
</div>
</div>
</div>
<div class="cell card-collection__card-wrapper card-collection__card-wrapper--page js-card-wrapper">
<div class="card">
<div class="card__image-wrapper">
<a href="#">
<div class="card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<source media="(min-width: 841px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="Image alt text">
</picture>
</div>
</a>
</div>
<div class="card__details">
<a href="#">
<h2 class="card__title">Lorem Ipsum</h2>
<p class="card__subline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.</p>
</a>
<a href="#" data-module="cta" class="cta card__cta">
Click here
</a>
</div>
</div>
</div>
<div class="cell card-collection__card-wrapper card-collection__card-wrapper--page js-card-wrapper">
<div class="card">
<div class="card__image-wrapper">
<a href="#">
<div class="card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<source media="(min-width: 841px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="Image alt text">
</picture>
</div>
</a>
</div>
<div class="card__details">
<a href="#">
<h2 class="card__title">Lorem Ipsum</h2>
<p class="card__subline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.</p>
</a>
<a href="#" data-module="cta" class="cta card__cta">
Click here
</a>
</div>
</div>
</div>
<div class="cell card-collection__card-wrapper card-collection__card-wrapper--page js-card-wrapper">
<div class="card">
<div class="card__image-wrapper">
<a href="#">
<div class="card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<source media="(min-width: 841px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="Image alt text">
</picture>
</div>
</a>
</div>
<div class="card__details">
<a href="#">
<h2 class="card__title">Lorem Ipsum</h2>
<p class="card__subline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.</p>
</a>
<a href="#" data-module="cta" class="cta card__cta">
Click here
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/card-collection.css?cb={{cacheBuster}}">
{{/if}}
{{#if cards.length}}
<div class="card-collection card-collection--{{cards.length}}-cards{{#if numberOfColumns}} card-collection--{{numberOfColumns}}-columns{{/if}}" data-module="cardCollection">
<div class="grid-container">
{{#if sectionHeader}}
<div class="grid-x grid-padding-x">
<div class="cell card-collection__section-header-wrapper">
{{> @section-header sectionHeader}}
</div>
</div>
{{/if}}
<div class="grid-x grid-padding-x card-collection__cards">
{{#each cards}}
<div class="cell card-collection__card-wrapper card-collection__card-wrapper--{{type}} js-card-wrapper">
{{#ifEquals type "events"}}
{{> @event-card theme=../theme }}
{{/ifEquals}}
{{#ifEquals type "blog"}}
{{> @blog-card theme=../theme }}
{{/ifEquals}}
{{#ifEquals type "merchant"}}
{{> @standard-card theme=../theme }}
{{/ifEquals}}
{{#ifEquals type "page"}}
{{> @standard-card theme=../theme }}
{{/ifEquals}}
{{#ifEquals type "property"}}
{{> @property-card theme=../theme }}
{{/ifEquals}}
</div>
{{/each}}
</div>
{{#if cta}}
<div class="card-collection__cta">
{{> @cta cta}}
</div>
{{/if}}
</div>
</div>
{{/if}}
{
"theme": "default",
"firstInstance": true,
"title": "default",
"cards": [
{
"firstInstance": true,
"image": {
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
"sources": [
{
"types": "image/jpeg",
"desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
}
],
"altText": "Image alt text"
},
"title": "Lorem Ipsum",
"type": "page",
"subline": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.",
"cta": {
"url": "#",
"text": "Click here"
}
},
{
"image": {
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
"sources": [
{
"types": "image/jpeg",
"desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
}
],
"altText": "Image alt text"
},
"title": "Lorem Ipsum",
"type": "page",
"subline": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.",
"cta": {
"url": "#",
"text": "Click here"
}
},
{
"image": {
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
"sources": [
{
"types": "image/jpeg",
"desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
}
],
"altText": "Image alt text"
},
"title": "Lorem Ipsum",
"type": "page",
"subline": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.",
"cta": {
"url": "#",
"text": "Click here"
}
},
{
"image": {
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
"sources": [
{
"types": "image/jpeg",
"desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
}
],
"altText": "Image alt text"
},
"title": "Lorem Ipsum",
"type": "page",
"subline": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.",
"cta": {
"url": "#",
"text": "Click here"
}
}
]
}
class CardCollection {
constructor(component) {
this.component = component;
this.init();
}
init() {
const config = {
root: null,
rootMargin: '0px',
threshold: 0.75,
};
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach((entry) => {
const element = entry.target;
if (entry.intersectionRatio > 0) {
element.classList.add('visible');
obs.unobserve(element);
}
});
}, config);
const cardWrappers = this.component.querySelectorAll('.js-card-wrapper');
cardWrappers.forEach((cardWrapper) => {
observer.observe(cardWrapper);
});
}
}
export default (component) => new CardCollection(component);
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.card-collection {
@extend %spacer-large;
.grid-layout & {
// Override the spacer (margin bottom) if the component is used as a grid editor
// rather than a fix component (such as related pages)
margin-bottom: 0;
}
.section-header {
@extend %spacer-large;
}
&__card-wrapper {
width: 100%;
@include breakpoint(medium) {
width: 25%;
.card-collection--2-columns & {
width: 50%;
}
.card-collection--3-columns & {
width: 33.33333%;
}
.card-collection--4-columns & {
width: 25%;
}
}
}
&__cta {
display: flex;
justify-content: center;
width: 100%;
}
}
No notes defined.