diff --git a/src/assets/scripts/vam-scripts.js b/src/assets/scripts/vam-scripts.js index e0cdc4cf..2d9a4e6c 100644 --- a/src/assets/scripts/vam-scripts.js +++ b/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'); diff --git a/src/assets/styles/vam-style.scss b/src/assets/styles/vam-style.scss index e2497c69..a87ad862 100644 --- a/src/assets/styles/vam-style.scss +++ b/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"; diff --git a/src/components/base/icons/_icons.scss b/src/components/base/icons/_icons.scss index cffe1636..268b29aa 100644 --- a/src/components/base/icons/_icons.scss +++ b/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"); } diff --git a/src/components/blocks/icon-list/_icon-list.scss b/src/components/blocks/icon-list/_icon-list.scss index 531b392a..cb2ccedc 100644 --- a/src/components/blocks/icon-list/_icon-list.scss +++ b/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); + } + } } } diff --git a/src/components/blocks/list-promo/_list-promo.js b/src/components/blocks/list-promo/_list-promo.js new file mode 100644 index 00000000..65acc981 --- /dev/null +++ b/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; + }); +}); diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss new file mode 100644 index 00000000..aec1c3b3 --- /dev/null +++ b/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); + } + } +} diff --git a/src/components/blocks/list-promo/list-promo.config.js b/src/components/blocks/list-promo/list-promo.config.js new file mode 100644 index 00000000..8d91a0f5 --- /dev/null +++ b/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'] + } + } + ] +}; diff --git a/src/components/blocks/list-promo/list-promo.html b/src/components/blocks/list-promo/list-promo.html new file mode 100644 index 00000000..183bc4b2 --- /dev/null +++ b/src/components/blocks/list-promo/list-promo.html @@ -0,0 +1,44 @@ +
+
+ {% for img in promoItems %} +
+ {{ promoTitle }} +
+ {% endfor %} +
+ + +
+
+
+

{{ promoTitle }}

+

{{ promoDescription }}

+ + +
+