<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"
      }
    }
  ]
}
  • 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

No notes defined.