Card Collection: Related Pages 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/card-collection.css?cb=">

<div class="card-collection card-collection--3-cards card-collection--3-columns" data-module="cardCollection">
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell card-collection__section-header-wrapper">
                <link media="all" rel="stylesheet" href="/assets/themes/default/css/section-header.css?cb=">

                <div class="section-header">
                    <h2 class="section-header__title">You might also like</h2>

                </div>
            </div>
        </div>
        <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 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</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 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</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 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</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,
      "type": "page",
      "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"
      },
      "categories": "Category",
      "date": "20/02/2019",
      "title": "Lorem Ipsum",
      "subline": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
      "cta": {
        "url": "#",
        "text": "Click here"
      }
    },
    {
      "type": "page",
      "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"
      },
      "categories": "Category",
      "date": "20/02/2019",
      "title": "Lorem Ipsum",
      "subline": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
      "cta": {
        "url": "#",
        "text": "Click here"
      }
    },
    {
      "type": "page",
      "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"
      },
      "categories": "Category",
      "date": "20/02/2019",
      "title": "Lorem Ipsum",
      "subline": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
      "cta": {
        "url": "#",
        "text": "Click here"
      }
    }
  ],
  "sectionHeader": {
    "firstInstance": true,
    "theme": "default",
    "title": "You might also like"
  },
  "numberOfColumns": 3
}
  • Content: 
    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);
  • URL: /components/raw/card-collection/card-collection.js
  • Filesystem Path: source/patterns/03-components/card-collections/card-collection/card-collection.js
  • Size: 867 Bytes
  • Content: 
    @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%;
    }
}
  • URL: /components/raw/card-collection/card-collection.scss
  • Filesystem Path: source/patterns/03-components/card-collections/card-collection/card-collection.scss
  • Size: 885 Bytes

No notes defined.