Web 3144 list promo component

src/assets/scripts/vam-scripts.js

@@ -11,6 +11,7 @@ require('../../components/blocks/cookie-banner/_cookie-banner');
 require('../../components/blocks/image-carousel/_image-carousel');
 require('../../components/blocks/image-overlay-license-modal/_image-overlay-license-modal');
 require('../../components/blocks/image-row/_image-row');
+require('../../components/blocks/list-promo/_list-promo');
 require('../../components/blocks/object-details/object-details');
 require('../../components/blocks/object-shuffler/_object-shuffler');
 require('../../components/blocks/modal/_modal');

src/assets/styles/vam-style.scss

@@ -28,6 +28,7 @@
 @use "../../components/blocks/icon-list/icon-list";
 @use "../../components/blocks/image-carousel/image-carousel";
 @use "../../components/blocks/image-credit/image-credit";
+@use "../../components/blocks/list-promo/list-promo";
 @use "../../components/blocks/modal/modal";
 @use "../../components/blocks/image-overlay-license-modal/image-overlay-license-modal";
 @use "../../components/blocks/image-row/image-row";

src/components/base/icons/_icons.scss

@@ -1,7 +1,7 @@
 :root {
   --icon-svg-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M9.978 6.54c-.322 0-.594-.094-.816-.283-.211-.2-.317-.461-.317-.783s.106-.578.317-.767c.222-.2.494-.3.816-.3.356 0 .64.1.85.3.212.189.317.445.317.767s-.105.583-.317.783c-.21.189-.494.283-.85.283Zm.967 9.9h-1.9V7.774l1.9-.134v8.8Z'/%3E%3C/svg%3E");
   --icon-svg-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='currentColor'%3E%3Cpath d='M0 42.857v14.286h100V42.857z'/%3E%3C/svg%3E");
-  --icon-svg-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 21' fill='currentColor' fill-rule='evenodd'%3E%3Cpath d='M14.186 4.005a5.92 5.92 0 0 0-9.227 7.288L10 19.481l5.041-8.188a5.918 5.918 0 0 0-.855-7.288Zm-4.099 6.62a2.599 2.599 0 1 0 0-5.198 2.599 2.599 0 0 0 0 5.198Z'/%3E%3C/svg%3E");
+  --icon-svg-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M11.348 2.502a4.734 4.734 0 0 0-7.38 5.832L8 14.885l4.032-6.551a4.737 4.737 0 0 0-.684-5.832ZM8.07 7.8a2.079 2.079 0 1 0 0-4.158 2.079 2.079 0 0 0 0 4.158Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='currentColor'%3E%3Cpath d='M42.857 42.857H0v14.286h42.857V100h14.286V57.143H100V42.857H57.143V0H42.857z'/%3E%3C/svg%3E");
   --icon-svg-point-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='currentColor'%3E%3Cpath d='M70.173 12.294 57.446.174l-47.62 50 47.62 50 12.727-12.122-36.075-37.879z'/%3E%3C/svg%3E");
   --icon-svg-signpost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' fill='currentColor'%3E%3Cpath d='M9.719 2.747h1.562v1.25h5.005L18 5.247l-1.714 1.25h-5.005v3.75h3.779l1.807 1.25-1.807 1.25H11.28v3.437h6.77v1.563H2.963v-1.563H9.72V8.997H4.813L3 7.747l1.813-1.25h4.906v-3.75Z'/%3E%3C/svg%3E");
@@ -15,10 +15,10 @@
   --icon-svg-loud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M12.607 13.85A9.294 9.294 0 0 0 14.667 8a9.295 9.295 0 0 0-2.117-5.92l-.934.702A8.133 8.133 0 0 1 13.5 8c0 1.94-.677 3.723-1.807 5.124l.914.725Zm-2.09-1.658A6.64 6.64 0 0 0 12 8a6.64 6.64 0 0 0-1.585-4.315l-.935.702A5.479 5.479 0 0 1 10.833 8c0 1.314-.46 2.521-1.23 3.467l.914.725Zm-3.85-8.859L3.333 6h-2v4h2l3.334 2.667V3.333Zm1.416 2.334H9.25l-.167 2.666H8.25l-.167-2.666Zm1.25 4a.667.667 0 1 1-1.333 0 .667.667 0 0 1 1.333 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-strong-smells: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M14.083 0h1.167l-.167 2.667h-.833L14.083 0Zm1.25 4A.667.667 0 1 1 14 4a.667.667 0 0 1 1.333 0ZM4.966 2.901l.28-2.234H6.42l-.297 2.379a4.4 4.4 0 0 1-2.398 3.39l-.13.064a1.906 1.906 0 0 0-1.054 1.705c0 1.247 1.086 2.113 1.5 2.276l-.268.74-.298-.1a3.073 3.073 0 0 1-.402-5.664l.13-.065a3.233 3.233 0 0 0 1.762-2.49Zm6.682 6.047a.574.574 0 0 1 .371.223l.459-.267a2.057 2.057 0 0 0-3.471.159l-.111.193a1.032 1.032 0 0 1-1.792 0l-.11-.193a2.057 2.057 0 0 0-3.472-.16l.493.268a.557.557 0 0 1 .335-.216.494.494 0 0 0-.017.128c0 .415.523.75 1.167.75.195 0 .38-.03.541-.085l.05.087c.844 1.477 2.974 1.477 3.818 0l.05-.087c.162.054.346.085.541.085.644 0 1.167-.335 1.167-.75a.498.498 0 0 0-.02-.135ZM5.42 12.222l-.705-.64.449-.494.704.64a1.23 1.23 0 0 1 0 1.82.563.563 0 0 0-.014.82l.752.731-.465.478-.752-.732a1.23 1.23 0 0 1 .03-1.79.563.563 0 0 0 0-.833Zm2.358.57-.655-.534.42-.516.656.533a1.045 1.045 0 0 1 0 1.62.379.379 0 0 0-.01.58l.697.607-.438.502-.697-.607a1.045 1.045 0 0 1 .027-1.598.379.379 0 0 0 0-.587Zm1.625-1.21.704.64a.563.563 0 0 1 0 .833 1.23 1.23 0 0 0-.03 1.79l.751.732.465-.478-.751-.732a.563.563 0 0 1 .014-.82 1.23 1.23 0 0 0 0-1.818l-.705-.64-.448.493ZM10.754.667l.28 2.234a3.232 3.232 0 0 0 1.762 2.49l.13.066a3.073 3.073 0 0 1-.402 5.664l-.298.1-.268-.74c.414-.163 1.5-1.029 1.5-2.276 0-.722-.408-1.382-1.053-1.705l-.13-.065a4.4 4.4 0 0 1-2.399-3.39L9.58.668h1.175Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-induction-loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M13.454 1.333h1.213v1.212l-1.83 1.83a4.47 4.47 0 0 0-.95-1.475l1.567-1.567ZM1.335 14.667h1.211l4.592-4.592-1.212-1.212-4.592 4.591v1.213Zm13.2-2.863v-.5h-3.08v.496h1.116v2.867h.848v-2.863h1.116Zm-8.894.556-.825.825a2.783 2.783 0 0 0 4.551-.934l.285-.711a3.914 3.914 0 0 1 1.056-1.492l.472-.413a4.372 4.372 0 0 0 1.488-3.286c0-2.393-1.94-4.35-4.334-4.35A4.333 4.333 0 0 0 4 6.334h1.167a3.167 3.167 0 0 1 3.166-3.166c1.744 0 3.167 1.428 3.167 3.182 0 .922-.399 1.804-1.09 2.408l-.47.413a5.08 5.08 0 0 0-1.372 1.936l-.285.711a1.616 1.616 0 0 1-2.643.543ZM9 8.57a2.334 2.334 0 1 0-3-2.237h1.167A1.167 1.167 0 1 1 9 7.291V8.57Z' clip-rule='evenodd'/%3E%3C/svg%3E");
-  --icon-svg-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 17'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M6.125 1.707h-1.25v1.949H2v3.897h12V3.656h-2.875v-1.95h-1.25v1.95h-3.75v-1.95Zm3.75 1.949h1.25v2.599h-1.25v-2.6ZM14 8.528H2v5.849h12v-5.85ZM6.125 3.656v2.599h-1.25v-2.6h1.25Z' clip-rule='evenodd'/%3E%3C/svg%3E");
-  --icon-svg-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M10.75 7a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Zm-.684 3.95a5 5 0 1 1 .884-.884l3.496 3.497-.757 1.01-3.623-3.623Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  --icon-svg-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M6.125 1.707h-1.25v1.949H2v3.897h12V3.656h-2.875v-1.95h-1.25v1.95h-3.75v-1.95Zm3.75 1.949h1.25v2.599h-1.25v-2.6ZM14 8.528H2v5.849h12v-5.85ZM6.125 3.656v2.599h-1.25v-2.6h1.25Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='m11.736 9.715-1.318 1.07a.796.796 0 0 1-.878.094 10.882 10.882 0 0 1-4.48-4.534.797.797 0 0 1 .059-.82L6.167 4l-1.2-2.667H3.679a.833.833 0 0 0-.59.245l-.607.607c-.549.549-.826 1.325-.654 2.082a13.186 13.186 0 0 0 9.905 9.905c.757.172 1.534-.105 2.083-.654l.607-.607a.833.833 0 0 0 .244-.59v-1.287l-2.93-1.32Z'/%3E%3C/svg%3E");
   --icon-svg-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M7.375 8.376 5.141 5.904l-.927.837 3.322 3.678.464.513.464-.513 3.322-3.678-.927-.837-2.234 2.472V2.119h-1.25v6.257ZM14 12.375v1.25H2v-1.25h12Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='m7.834 9.804-.186-.186a2.084 2.084 0 0 1-.346-2.49.849.849 0 0 0-1.159.018l-.277.277a3.33 3.33 0 0 0 .898 3.079l.186.185a3.333 3.333 0 0 0 4.714 0L14.3 8.052a3.333 3.333 0 0 0 0-4.714l-.186-.186a3.333 3.333 0 0 0-4.714 0l-.61.61c.366.195.711.442 1.025.743l.469-.47a2.083 2.083 0 0 1 2.946 0l.186.187a2.083 2.083 0 0 1 0 2.946L10.78 9.804a2.083 2.083 0 0 1-2.946 0ZM6.007 11.38l-.215.215A2.075 2.075 0 1 1 2.858 8.66l2.35-2.35a2.075 2.075 0 0 1 3.435 2.126l.016.017c.325.325.796.416 1.203.273a3.324 3.324 0 0 0-5.537-3.3l-2.351 2.35a3.325 3.325 0 0 0 4.701 4.702l.301-.301c-.293-.182-.57-.4-.825-.654l-.144-.144Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --icon-svg-person-one: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8 1.927c-1.312 0-2.375.962-2.375 2.149v.452c0 1.187 1.063 2.15 2.375 2.15s2.375-.963 2.375-2.15v-.452c0-1.187-1.063-2.15-2.375-2.15ZM4.145 8.71c-.586.26-.975.781-1.023 1.37l-.36 4.517h10.476l-.36-4.517c-.047-.589-.437-1.11-1.023-1.37L9.31 7.583H6.69L4.146 8.71Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  --icon-svg-object: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M5.204 1.03h5.591l-.174.7h-.408l-.194.232a2.46 2.46 0 0 0-.56 1.752l1.587-.828c1.572-.82 3.355.66 2.838 2.356l-.8 2.633H2.916l-.802-2.633C1.6 3.546 3.382 2.066 4.954 2.886l1.586.828a2.46 2.46 0 0 0-.56-1.752l-.193-.232h-.408l-.175-.7ZM3.138 9.126a8.907 8.907 0 0 0 1.922 4.828l.843 1.055h4.194l.843-1.055a8.906 8.906 0 0 0 1.921-4.828H3.138Zm8.938-2.233a1.765 1.765 0 0 0-.127-.075l-.34-.181a4.386 4.386 0 0 1-1.754-1.718l1.77-.923a.75.75 0 0 1 1.064.883l-.613 2.014ZM6.144 4.918a4.386 4.386 0 0 1-1.753 1.718l-.34.181a1.784 1.784 0 0 0-.127.075l-.613-2.014a.75.75 0 0 1 1.065-.883l1.768.923Z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }

src/components/blocks/icon-list/_icon-list.scss

@@ -209,5 +209,11 @@
         mask-image: var(--icon-svg-person-one);
       }
     }
+
+    &--object {
+      &::before {
+        mask-image: var(--icon-svg-object);
+      }
+    }
   }
 }

src/components/blocks/list-promo/_list-promo.js

@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', () => {
+  Array.from(document.querySelectorAll('.b-list-promo'), (promo) => {
+    const listImgs = promo.querySelectorAll('.b-list-promo__image-list-item');
+
+    /* Promo logic only required if > 1 promo img present */
+    if (listImgs.length > 1) {
+      const listItems = promo.querySelectorAll('.b-list-promo__list-item');
+
+      /* set initial item active state */
+      let activeIndex = 0;
+      listItems[activeIndex].classList.add('b-list-promo__list-item--active');
+
+      /* fn to set active item classes */
+      const setActiveItem = (itemIndex) => {
+        promo.querySelector('.b-list-promo__image-list-item--active').classList.remove('b-list-promo__image-list-item--active');
+        listImgs[itemIndex].classList.add('b-list-promo__image-list-item--active');
+        promo.querySelector('.b-list-promo__list-item--active').classList.remove('b-list-promo__list-item--active');
+        listItems[itemIndex].classList.add('b-list-promo__list-item--active');
+      };
+
+      /* promo ctrls can be shown */
+      const ctrls = promo.querySelector('.b-list-promo__ctrls');
+      ctrls.classList.add('b-list-promo__ctrls--active');
+
+      /* promo controls setup */
+      const prev = ctrls.querySelector('.js-list-promo__ctrls-btn--prev');
+      const next = ctrls.querySelector('.js-list-promo__ctrls-btn--next');
+      prev.setAttribute('disabled', 'true');
+
+      /* promo controls logic */
+      ctrls.addEventListener('click', (e) => {
+        if (e.target === prev) {
+          activeIndex -= 1;
+          next.removeAttribute('disabled');
+          if (activeIndex === 0) prev.setAttribute('disabled', 'true');
+        } else if (e.target === next) {
+          activeIndex += 1;
+          prev.removeAttribute('disabled');
+          if (activeIndex === listImgs.length - 1) next.setAttribute('disabled', 'true');
+        }
+        setActiveItem(activeIndex);
+      });
+    }
+
+    return true;
+  });
+});

src/components/blocks/list-promo/_list-promo.scss

@@ -0,0 +1,203 @@
+@use "../../mixins";
+@use "../../base";
+
+.b-list-promo {
+  display: flex;
+  flex-direction: column;
+
+  &--dark {
+    color: base.sitecolors-siteColor("vam-white");
+  }
+
+  @include mixins.breakpoints-bpMinSmall {
+    flex-direction: row;
+  }
+
+  &__info-container {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 10px 16px;
+
+    .b-list-promo--dark & {
+      background-color: base.sitecolors-siteColor("vam-black");
+    }
+
+    @include mixins.breakpoints-bpMinSmall {
+      flex: 1 1 0;
+      padding: 12px;
+    }
+
+    @include mixins.breakpoints-bpMinMedium {
+      padding: 12px 20px;
+    }
+
+    @include mixins.breakpoints-bpMinLarge {
+      padding: 20px 30px;
+    }
+  }
+
+  &__title {
+    @include base.typography-typeSetting(5, "bold");
+    @include base.typography-lineheight(5);
+
+    margin-bottom: 8px;
+
+    @include mixins.breakpoints-bpMinMedium {
+      @include base.typography-typeSetting(6, "bold");
+      @include base.typography-lineheight(6);
+
+      margin-bottom: 10px;
+    }
+  }
+
+  &__strapline {
+    @include base.typography-typeSetting(3);
+    @include base.typography-lineheight(3);
+
+    margin-bottom: 8px;
+
+    @include mixins.breakpoints-bpMinMedium {
+      @include base.typography-typeSetting(4);
+      @include base.typography-lineheight(4);
+
+      margin-bottom: 10px;
+    }
+  }
+
+  &__image-list-container {
+    min-height: 190px;
+    position: relative;
+
+    @include mixins.breakpoints-bpMinSmall {
+      flex: 1 1 0;
+      min-height: 296px;
+    }
+
+    @include mixins.breakpoints-bpMinMedium {
+      min-height: 390px;
+    }
+  }
+
+  &__image-list-item {
+    inset: 0;
+    opacity: 0;
+    position: absolute;
+    transition: opacity 0.3s ease-in;
+
+    &--active {
+      opacity: 1;
+    }
+  }
+
+  &__image {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  &__ctrls {
+    bottom: 10px;
+    display: none;
+    gap: 4px;
+    position: absolute;
+    right: 10px;
+
+    &--active {
+      display: flex;
+    }
+  }
+
+  &__ctrls-btn {
+    box-shadow: 1px 1px 12px 0 rgba(29, 30, 32, 50%), -1px -1px 12px 0 rgba(29, 30, 32, 50%);
+    height: 26px;
+    width: 26px;
+
+    @include mixins.breakpoints-bpMinSmall {
+      height: 34px;
+      width: 34px;
+    }
+  }
+
+  &__info-list {
+    @include mixins.unstyledelements-unstyledList;
+
+    margin-bottom: 20px;
+  }
+
+  &__list-item {
+    @include base.typography-typeSetting(3);
+    @include base.typography-lineheight(3);
+
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 8px;
+    padding-left: 2px;
+
+    @include mixins.breakpoints-bpMinMedium {
+      @include base.typography-typeSetting(4);
+      @include base.typography-lineheight(4);
+
+      margin-bottom: 10px;
+    }
+
+    &::before {
+      flex: 0 0 20px;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &--active {
+      font-variation-settings: "wght" 600;
+      padding-left: 0;
+
+      &::before {
+        color: base.sitecolors-siteColor("vam-white");
+        height: 16px;
+        left: 4px;
+        margin-right: 2px;
+        position: relative;
+        width: 16px;
+        z-index: 2;
+
+        .b-list-promo--dark & {
+          color: base.sitecolors-siteColor("vam-black");
+        }
+      }
+
+      &::after {
+        background-color: base.sitecolors-siteColor("vam-black");
+        border-radius: 50%;
+        content: "";
+        height: 24px;
+        position: absolute;
+        width: 24px;
+        z-index: 1;
+
+        .b-list-promo--dark & {
+          background-color: base.sitecolors-siteColor("vam-white");
+        }
+      }
+    }
+  }
+
+  &__cta-list {
+    @include mixins.unstyledelements-unstyledList;
+
+    display: flex;
+    gap: 10px;
+    margin-top: auto;
+  }
+
+  &__cta-btn {
+    @include base.typography-typeSetting(2);
+
+    margin: 0;
+    padding: 8px;
+
+    @include mixins.breakpoints-bpMinMedium {
+      @include base.typography-typeSetting(4);
+    }
+  }
+}

src/components/blocks/list-promo/list-promo.config.js

@@ -0,0 +1,68 @@
+module.exports = {
+  title: 'List Promotion',
+  label: 'List Promotion',
+  context: {
+    promoTitle: 'Order an Object',
+    promoDescription: 'Information about the service. Lorem ipsum dolor sit amet consectetur...',
+    urlPrimary: {
+      url: 'https://www.vam.ac.uk',
+      text: 'Choose your objects'
+    },
+    urlSecondary: {
+      url: 'https://www.vam.ac.uk',
+      text: 'Read more'
+    },
+    promoItems: [
+      {
+        listText: 'Choose your objects',
+        listIcon: 'object',
+        image: {
+          320: 'https://picsum.photos/id/51/320/240',
+          640: 'https://picsum.photos/id/51/640/480',
+          960: 'https://picsum.photos/id/51/960/720',
+          1280: 'https://picsum.photos/id/51/1280/960'
+        },
+      },
+      {
+        listText: 'Decide when you visit',
+        listIcon: 'calendar',
+        image: {
+          320: 'https://picsum.photos/id/44/320/240',
+          640: 'https://picsum.photos/id/44/640/480',
+          960: 'https://picsum.photos/id/44/960/720',
+          1280: 'https://picsum.photos/id/44/1280/960'
+        },
+      },
+      {
+        listText: 'Book a free appointment',
+        listIcon: 'clock',
+        image: {
+          320: 'https://picsum.photos/id/47/320/240',
+          640: 'https://picsum.photos/id/47/640/480',
+          960: 'https://picsum.photos/id/47/960/720',
+          1280: 'https://picsum.photos/id/47/1280/960'
+        },
+      },
+      {
+        listText: 'Arrive at your venue',
+        listIcon: 'pin',
+        image: {
+          320: 'https://picsum.photos/id/130/320/240',
+          640: 'https://picsum.photos/id/130/640/480',
+          960: 'https://picsum.photos/id/130/960/720',
+          1280: 'https://picsum.photos/id/130/1280/960'
+        },
+      }
+    ] 
+  },
+  variants: [
+    {
+      name: 'dark',
+      label: 'Dark',
+      context: {
+        previewClass: 'fr-bg--dark',
+        modifier: ['dark']
+      }
+    }
+  ]
+};