Image List

Ready

HTML
View
Context
Assets
Info
Notes


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

<div class="image-list component" data-module="imageList">
    <h2 class="image-list__title">Image List</h2>
    <div class="image-list__images">
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
        <div class="image-list__image-container">

            <div class="image  ">
                <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>
        </div>
    </div>
</div>


        {{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/image-list.css?cb={{cacheBuster}}">
{{/if}}

<div class="image-list component{{#if spacer}} component--{{spacer}}-spacer{{/if}}" data-module="imageList">
    {{#if title}}
    <h2 class="image-list__title">{{title}}</h2>
    {{/if}}
    <div class="image-list__images">
    {{#each items}}
        <div class="image-list__image-container">
            {{#if this.link}}
            <a href="{{this.link.url}}" class="js-link" {{#if this.link.target}}target="{{this.link.target}}"{{/if}} {{#if this.link.addNoOpener}}rel="noopener"{{/if}}>
            <span>{{this.link.text}}</span>
            {{/if}}
            {{> @image image}}
            {{#if this.link}}
            </a>
            {{/if}}
        </div>
    {{/each}}
    </div>
</div>


        
            
            {
  "theme": "default",
  "firstInstance": true,
  "title": "Image List",
  "items": [
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    },
    {
      "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"
      }
    }
  ]
}

File:

Content:


                                import addToDataLayer from '../../../../js/utils/datalayer';

class ImageList {
    constructor(module) {
        const links = module.querySelectorAll('.js-link');
        links.forEach((link) => {
            link.addEventListener('click', () => {
                let text = link.querySelector('span').innerHTML;
                text = unescape(text).trim();
                ImageList.trackClick(text);
            });
        });
    }

    static trackClick(text) {
        addToDataLayer({
            'event': 'link.click',
            'linkName': text,
            'linkType': 'image list',
        });
    }
}

export default (module) => new ImageList(module);

URL: /components/raw/image-list/image-list.js
Filesystem Path: source/patterns/03-components/media/image-list/image-list.js
Size: 669 Bytes

Content:


                                @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.image-list {
    &__title {
        @extend %heading02;
    }

    &__images {
        display: block;

        @include breakpoint(medium) {
            display: flex;
            flex: 0 0;
            flex-wrap: wrap;
        }
    }

    &__image-container {
        width: 100%;

        @include breakpoint(medium) {
            align-items: center;
            display: flex;
            justify-content: center;
            padding: rem(20);
            width: 25%;
        }

        a {
            span {
                @extend %visually-hidden;
            }
        }
    }
}

URL: /components/raw/image-list/image-list.scss
Filesystem Path: source/patterns/03-components/media/image-list/image-list.scss
Size: 675 Bytes

Handle: @image-list
Preview:
- With layout
- Component only
Filesystem Path: source/patterns/03-components/media/image-list/image-list.hbs
References (1): @image

No notes defined.