@visitscotland/component-library 5.76.1 → 5.78.0

package/dist/stories/pages/navigation-pages/NavigationPage.stories.js

@@ -0,0 +1,157 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.InfoFirstSecondary = exports.InfoFirstTop = exports.VisualImpact = void 0;
+var PageHeader_vue_1 = __importDefault(require("@/templates/PageHeader.vue"));
+var Breadcrumb_vue_1 = __importDefault(require("@/components/breadcrumb/Breadcrumb.vue"));
+var BreadcrumbItem_vue_1 = __importDefault(require("@/components/breadcrumb/components/BreadcrumbItem.vue"));
+var HeroSection_vue_1 = __importDefault(require("@/components/hero-section/HeroSection.vue"));
+var grid_1 = require("@/components/grid");
+var SpotlightSection_vue_1 = __importDefault(require("@/components/spotlight-section/SpotlightSection.vue"));
+var Megalinks_vue_1 = __importDefault(require("@/components/megalinks/Megalinks.vue"));
+var MegalinkMultiImage_vue_1 = __importDefault(require("@/components/megalinks/components/megalink-multi-image/MegalinkMultiImage.vue"));
+var Card_vue_1 = __importDefault(require("@/components/card/Card.vue"));
+var Heading_vue_1 = __importDefault(require("@/components/heading/Heading.vue"));
+var Img_vue_1 = __importDefault(require("@/components/img/Img.vue"));
+var Link_vue_1 = __importDefault(require("@/components/link/Link.vue"));
+var Icon_vue_1 = __importDefault(require("@/components/icon/Icon.vue"));
+var Body_vue_1 = __importDefault(require("@/components/body/Body.vue"));
+var Button_vue_1 = __importDefault(require("@/components/button/Button.vue"));
+var ArticleDetails_vue_1 = __importDefault(require("@/components/article-details/ArticleDetails.vue"));
+var Badge_vue_1 = __importDefault(require("@/components/badge/Badge.vue"));
+var Modal_vue_1 = __importDefault(require("@/components/modal/Modal.vue"));
+var Video_vue_1 = __importDefault(require("@/components/video/Video.vue"));
+var MediaCaption_vue_1 = __importDefault(require("@/components/media-caption/MediaCaption.vue"));
+var SectionHeader_vue_1 = __importDefault(require("@/components/section-header/SectionHeader.vue"));
+var ToggleButton_vue_1 = __importDefault(require("@/components/toggle-button/ToggleButton.vue"));
+var ContentSwiper_vue_1 = __importDefault(require("@/components/content-swiper/ContentSwiper.vue"));
+var ContentSwiperSlide_1 = __importDefault(require("@/components/content-swiper/components/ContentSwiperSlide"));
+var prefers_reduced_motion_1 = __importDefault(require("@/utils/prefers-reduced-motion"));
+var visual_impact_cards_json_1 = __importDefault(require("@/assets/fixtures/navigation-pages/visual-impact-cards.json"));
+var information_first_top_cards_json_1 = __importDefault(require("@/assets/fixtures/navigation-pages/information-first-top-cards.json"));
+var information_first_secondary_cards_json_1 = __importDefault(require("@/assets/fixtures/navigation-pages/information-first-secondary-cards.json"));
+var visual_impact_pattern_1 = __importDefault(require("./templates/visual-impact-pattern"));
+var info_first_top_pattern_1 = __importDefault(require("./templates/info-first-top-pattern"));
+var info_first_secondary_pattern_1 = __importDefault(require("./templates/info-first-secondary-pattern"));
+var components = {
+    VsPageHeader: PageHeader_vue_1["default"],
+    VsHeroSection: HeroSection_vue_1["default"],
+    VsBreadcrumb: Breadcrumb_vue_1["default"],
+    VsBreadcrumbItem: BreadcrumbItem_vue_1["default"],
+    VsCol: grid_1.VsCol,
+    VsContainer: grid_1.VsContainer,
+    VsRow: grid_1.VsRow,
+    VsCard: Card_vue_1["default"],
+    VsSectionHeader: SectionHeader_vue_1["default"],
+    VsSpotlightSection: SpotlightSection_vue_1["default"],
+    VsHeading: Heading_vue_1["default"],
+    VsImg: Img_vue_1["default"],
+    VsLink: Link_vue_1["default"],
+    VsIcon: Icon_vue_1["default"],
+    VsBody: Body_vue_1["default"],
+    VsButton: Button_vue_1["default"],
+    VsArticleDetails: ArticleDetails_vue_1["default"],
+    VsBadge: Badge_vue_1["default"],
+    VsMegalinks: Megalinks_vue_1["default"],
+    VsMegalinkMultiImage: MegalinkMultiImage_vue_1["default"],
+    VsModal: Modal_vue_1["default"],
+    VsVideo: Video_vue_1["default"],
+    VsMediaCaption: MediaCaption_vue_1["default"],
+    VsToggleButton: ToggleButton_vue_1["default"],
+    VsContentSwiper: ContentSwiper_vue_1["default"],
+    VsContentSwiperSlide: ContentSwiperSlide_1["default"]
+};
+var createStory = function (template, options) {
+    if (options === void 0) { options = {}; }
+    return ({
+        render: function () { return (__assign(__assign({ components: components, template: template }, options), { setup: function () {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                var cardListOverlay = ((_a = visual_impact_cards_json_1["default"].cardListOverlay) === null || _a === void 0 ? void 0 : _a.cards) || [];
+                var cardList1 = ((_b = visual_impact_cards_json_1["default"].cardList1) === null || _b === void 0 ? void 0 : _b.cards) || [];
+                var cardList2 = ((_c = visual_impact_cards_json_1["default"].cardList2) === null || _c === void 0 ? void 0 : _c.cards) || [];
+                var cardList3 = ((_d = visual_impact_cards_json_1["default"].cardList3) === null || _d === void 0 ? void 0 : _d.cards) || [];
+                var cardList4 = ((_e = visual_impact_cards_json_1["default"].cardList4) === null || _e === void 0 ? void 0 : _e.cards) || [];
+                var cardList5 = ((_f = visual_impact_cards_json_1["default"].cardList5) === null || _f === void 0 ? void 0 : _f.cards) || [];
+                var cardList6 = ((_g = visual_impact_cards_json_1["default"].cardList6) === null || _g === void 0 ? void 0 : _g.cards) || [];
+                var textCardList1 = ((_h = information_first_secondary_cards_json_1["default"].textCardList1) === null || _h === void 0 ? void 0 : _h.cards) || [];
+                var textCardList2 = ((_j = information_first_secondary_cards_json_1["default"].textCardList2) === null || _j === void 0 ? void 0 : _j.cards) || [];
+                var infoCardList1 = ((_k = information_first_top_cards_json_1["default"].infoCardList1) === null || _k === void 0 ? void 0 : _k.cards) || [];
+                var infoCardList2 = ((_l = information_first_top_cards_json_1["default"].infoCardList2) === null || _l === void 0 ? void 0 : _l.cards) || [];
+                var infoCardList3 = ((_m = information_first_top_cards_json_1["default"].infoCardList3) === null || _m === void 0 ? void 0 : _m.cards) || [];
+                var infoCardList4 = ((_o = information_first_top_cards_json_1["default"].infoCardList4) === null || _o === void 0 ? void 0 : _o.cards) || [];
+                var infoCardList5 = ((_p = information_first_top_cards_json_1["default"].infoCardList5) === null || _p === void 0 ? void 0 : _p.cards) || [];
+                return {
+                    cardListOverlay: cardListOverlay,
+                    cardList1: cardList1,
+                    cardList2: cardList2,
+                    cardList3: cardList3,
+                    cardList4: cardList4,
+                    cardList5: cardList5,
+                    cardList6: cardList6,
+                    textCardList1: textCardList1,
+                    textCardList2: textCardList2,
+                    infoCardList1: infoCardList1,
+                    infoCardList2: infoCardList2,
+                    infoCardList3: infoCardList3,
+                    infoCardList4: infoCardList4,
+                    infoCardList5: infoCardList5
+                };
+            } })); },
+        parameters: {
+            layout: 'fullscreen',
+            docs: {
+                source: {
+                    code: template
+                }
+            }
+        }
+    });
+};
+exports["default"] = {
+    title: 'Pages/Navigation'
+};
+/**
+ * Interactive story (video play/pause)
+ */
+exports.VisualImpact = createStory(visual_impact_pattern_1["default"], {
+    data: function () {
+        return {
+            isReducedMotion: (0, prefers_reduced_motion_1["default"])()
+        };
+    },
+    methods: {
+        /**
+         * Toggles the video in the video examples with the ref given
+         * using the exposed toggleVideo method in the video component
+         */
+        toggleVideo: function (refKey) {
+            var _a, _b;
+            (_b = (_a = this.$refs[refKey]) === null || _a === void 0 ? void 0 : _a.toggleVideo) === null || _b === void 0 ? void 0 : _b.call(_a);
+        },
+        /**
+         * Uses card toggle() method to toggle the video in the card.
+         * This allows the card overlay controls to work without needing
+         * to directly access the video component which can be an issue
+         * when using v-for to render multiple cards as in this pattern.
+         */
+        toggleCard: function (index) {
+            var _a;
+            (_a = this.$refs.overlayCard[index]) === null || _a === void 0 ? void 0 : _a.toggle();
+        }
+    }
+});
+exports.InfoFirstTop = __assign({}, createStory(info_first_top_pattern_1["default"]));
+exports.InfoFirstSecondary = __assign({}, createStory(info_first_secondary_pattern_1["default"]));

package/dist/stories/pages/navigation-pages/templates/info-first-secondary-pattern.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var linkCardContentSwiper_1 = __importDefault(require("../../partials/linkCardContentSwiper"));
+exports["default"] = "\n    <VsPageHeader menu-type=\"b2c\">\n        <template #breadcrumb>\n            <VsContainer class=\"mt-075 mt-lg-200\">\n                <VsRow>\n                    <VsCol\n                        cols=\"10\"\n                        lg=\"8\"\n                    >\n                        <VsBreadcrumb>\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Home\"\n                            />\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Sustainability\"\n                                active\n                            />\n                        </VsBreadcrumb>\n                    </VsCol>\n                </VsRow>\n            </VsContainer>\n        </template>\n\n        <template #heroSection>\n            <VsContainer>\n                <VsRow>\n                    <VsCol>\n                        <VsHeroSection\n                            heading=\"Sustainability\"\n                            lede=\"Sustainably grow your tourism or events business with actionable green strategies.\"\n                            img-src=\"https://2f1a7f9478.visitscotland.net/binaries/content/gallery/visitscotland/cms-images/2022/12/06/suidhe-viewpoint?size=lg\"\n                            img-caption=\"Suidhe Viewpoint\"\n                            img-credit=\"VisitScotland\"\n                            inset\n                        />\n                    </VsCol>\n                </VsRow>\n            </VsContainer>\n        </template>\n    </VsPageHeader>\n\n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper\n    ------------------------------------------------------------>\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"Understand sustainability\"\n    >\n        <template v-slot:section-header-lede>\n            <p>\n                Scotland's natural beauty, rich heritage, and vibrant communities make it a world-class destination \u2014 but with this comes the responsibility to protect it for future generations. As a tourism business, you play a vital role in shaping a more sustainable industry, ensuring visitors enjoy Scotland's wonders while minimising environmental impact and supporting local communities.\n            </p>\n        </template>\n    </VsSectionHeader>\n\n    ".concat((0, linkCardContentSwiper_1["default"])({
+    slidesVar: 'infoCardList1',
+    slidesKey: '1',
+    slidesPerViewXl: 3.4
+}), "\n\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n    <!------------------------------------------------------------\n    NEW SECTION - Spotlight section\n    ------------------------------------------------------------>\n    <VsContainer class=\"mt-500\">\n        <VsRow>\n            <VsCol>\n                <VsSpotlightSection \n                    heading=\"How to measure your climate impact\"\n                    description=\"Measure your emissions with the Climate Impact Guide. See what data to gather, and how to use the insights for a more sustainable business model.\"\n                    imageSrc=\"https://support.visitscotland.org/binaries/content/gallery/bsh/cms-images/2-dec/gleneagles-hotel-couple\"\n                    ctaLink=\"#\"\n                    ctaText=\"Read the guide\"\n                />\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n\n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper\n    ------------------------------------------------------------>\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"How to develop your sustainability journey\"\n    >\n        <template v-slot:section-header-lede>\n            <p>\n                Step-by-step guidance to help you measure your impact, create an action plan, and make meaningful improvements to your business.\n            </p>\n        </template>\n    </VsSectionHeader>\n\n    ").concat((0, linkCardContentSwiper_1["default"])({
+    slidesVar: 'infoCardList2',
+    slidesKey: '2',
+    slidesPerViewXl: 3.4
+}), "\n\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n    \n    <!------------------------------------------------------------\n    NEW SECTION - Video highlight\n    ------------------------------------------------------------>\n\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"Watch our climate action workbook webinar\"\n    >\n        <template v-slot:section-header-lede>\n            <p>\n                Join Tiom\u00F3id Foley, our Responsible Tourism - Net Zero Manager, to learn more about our climate action workbook in this webinar.\n            </p>\n        </template>\n    </VsSectionHeader>\n\n    <VsContainer>\n        <VsRow>\n            <VsCol>\n                <VsVideo \n                    video-id=\"Nz2iwpqsPlI\"\n                    error-message=\"Sorry, something's gone wrong. Please try again later\"\n                    no-js-message=\"You need Javascript enabled to see this video\"\n                    no-cookies-message=\"You need cookies enabled to see this video\"\n                    cookie-btn-text=\"Manage cookies\"\n                />\n                <VsMediaCaption \n                    video-id=\"Nz2iwpqsPlI\"\n                >\n                    <template v-slot:caption>\n                        A promotional film inviting viewers to rediscover Scotland's landscapes and culture.\n                    </template>\n                </VsMediaCaption>\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n    \n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n    \n    \n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper\n    ------------------------------------------------------------>\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"Guidance for sustainable tourism\"\n    >\n        <template v-slot:section-header-lede>\n            <p>\n                Explore practical resources, tips, and tools to support long-term sustainability across your tourism operations and promotions.\n            </p>\n        </template>\n    </VsSectionHeader>\n\n    ").concat((0, linkCardContentSwiper_1["default"])({
+    slidesVar: 'infoCardList3',
+    slidesKey: '3',
+    slidesPerViewXl: 3.4
+}), "\n\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n    <!------------------------------------------------------------\n    NEW SECTION - Spotlight section\n    ------------------------------------------------------------>\n    <VsContainer class=\"mt-500\">\n        <VsRow>\n            <VsCol>\n                <VsSpotlightSection \n                    heading=\"Carbon emissions calculator methodology statement\"\n                    description=\"Find out more on how our climate action workbook calculates your emissions.\"\n                    imageSrc=\"https://support.visitscotland.org/binaries/content/gallery/bsh/cms-images/03-mar/inversnaid-waterfall.jpg?size=md\"\n                    ctaLink=\"#\"\n                    ctaText=\"Read the guide\"\n                />\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n    <!------------------------------------------------------------\n    MEGALINKS MULTI VIDEO\n    ------------------------------------------------------------>\n    <VsMegalinks \n        title=\"Climate action case studies\"\n        variant=\"multi-image\" \n        theme=\"light\"\n    >\n        <template v-slot:vs-megalinks-intro>\n            <p>Watch our video case studies to learn the different ways Scottish tourism businesses are embracing sustainability to combat climate change.</p>\n        </template>\n        \n        <VsCol cols=\"10\" class=\"offset-1\">\n            <VsContainer>\n                <VsRow>\n                    <VsCol\n                        cols=\"12\"\n                        md=\"6\"\n                        xl=\"4\"\n                    >\n                        <VsMegalinkMultiImage\n                            theme=\"light\"\n                            img-src=\"https://support.visitscotland.org/binaries/content/gallery/bsh/cms-images/03-mar/glen-mhor_yt.jpg\"\n                            link-type=\"video\"\n                            link-url=\"#\"\n                            video-id=\"mKfYMgunKmU\"\n                            video-btn-text=\"Play Video\"\n                            error-message=\"We're sorry, there's been an error\"\n                        >\n                            <template v-slot:vs-multi-image-heading>\n                                Climate Action Case Study: Glen Mhor\n                            </template>\n\n                            <template v-slot:vs-multi-image-content>\n                                <p>Glen Mhor Hotel & Apartments and Distillery talk through their approach to creating a sustainable business.</p>\n                            </template>\n                        </VsMegalinkMultiImage>\n\n                        <VsModal\n                            modal-id=\"mKfYMgunKmU\"\n                            close-btn-text=\"Close\"\n                            :is-video-modal=\"true\"\n                        >\n                            <VsRow>\n                                <VsCol cols=\"12\">\n                                    <VsVideo\n                                        video-id=\"mKfYMgunKmU\"\n                                        class=\"mb-200\"\n                                        no-js-message=\"You need Javascript enabled\"\n                                        no-cookies-message=\"You need cookies enabled\"\n                                        cookie-btn-text=\"Cookie button\"\n                                    />\n                                </VsCol>\n                            </VsRow>\n                        </VsModal>\n                    </VsCol>\n\n                    <VsCol\n                        cols=\"12\"\n                        md=\"6\"\n                        xl=\"4\"\n                    >\n                        <VsMegalinkMultiImage\n                            theme=\"light\"\n                            img-src=\"https://support.visitscotland.org/binaries/content/gallery/bsh/cms-images/03-mar/wilderness-scotland_yt.jpg\"\n                            link-type=\"video\"\n                            link-url=\"#\"\n                            video-id=\"MvRTuU9nf6g\"\n                            video-btn-text=\"Play Video\"\n                            error-message=\"We're sorry, there's been an error\"\n                        >\n                            <template v-slot:vs-multi-image-heading>\n                                Climate Case Study: Wilderness Scotland\n                            </template>\n\n                            <template v-slot:vs-multi-image-content>\n                                <p>Learn how Wilderness Scotland has adapted their business to prioritise sustainability.</p>\n                            </template>\n                        </VsMegalinkMultiImage>\n\n                        <VsModal\n                            modal-id=\"MvRTuU9nf6g\"\n                            close-btn-text=\"Close\"\n                            :is-video-modal=\"true\"\n                        >\n                            <VsRow>\n                                <VsCol cols=\"12\">\n                                    <VsVideo\n                                        video-id=\"MvRTuU9nf6g\"\n                                        class=\"mb-200\"\n                                        no-js-message=\"You need Javascript enabled\"\n                                        no-cookies-message=\"You need cookies enabled\"\n                                        cookie-btn-text=\"Cookie button\"\n                                    />\n                                </VsCol>\n                            </VsRow>\n                        </VsModal>\n                    </VsCol>\n\n                    <VsCol\n                        cols=\"12\"\n                        md=\"6\"\n                        xl=\"4\"\n                    >\n                        <VsMegalinkMultiImage\n                            theme=\"light\"\n                            img-src=\"https://support.visitscotland.org/binaries/content/gallery/bsh/cms-images/03-mar/crannog_yt.jpg\"\n                            link-type=\"video\"\n                            link-url=\"#\"\n                            video-id=\"U5ETXgcP1jE\"\n                            video-btn-text=\"Play Video\"\n                            error-message=\"We're sorry, there's been an error\"\n                        >\n                            <template v-slot:vs-multi-image-heading>\n                                Climate Action Case Study: The Scottish Crannog Centre\n                            </template>\n\n                            <template v-slot:vs-multi-image-content>\n                                <p>Find out how The Scottish Crannog Centre have put sustainability at the heart of their business.</p>\n                            </template>\n                        </VsMegalinkMultiImage>\n\n                        <VsModal\n                            modal-id=\"U5ETXgcP1jE\"\n                            close-btn-text=\"Close\"\n                            :is-video-modal=\"true\"\n                        >\n                            <VsRow>\n                                <VsCol cols=\"12\">\n                                    <VsVideo\n                                        video-id=\"U5ETXgcP1jE\"\n                                        class=\"mb-200\"\n                                        no-js-message=\"You need Javascript enabled\"\n                                        no-cookies-message=\"You need cookies enabled\"\n                                        cookie-btn-text=\"Cookie button\"\n                                    />\n                                </VsCol>\n                            </VsRow>\n                        </VsModal>\n                    </VsCol>\n                </VsRow>\n            </VsContainer>\n        </VsCol>\n    </VsMegalinks>\n\n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper\n    ------------------------------------------------------------>\n\n    <VsSectionHeader \n        class=\"mb-200 mb-xl-300\"\n        heading=\"Related pages\"\n    >\n        <template v-slot:section-header-lede>\n            <p>\n                Explore more guidance, tools and insights to support your tourism business. These pages offer practical advice tailored to different sectors and stages of growth.\n            </p>\n        </template>\n    </VsSectionHeader>\n\n    <div class=\"mb-500\">\n        ").concat((0, linkCardContentSwiper_1["default"])({
+    slidesVar: 'infoCardList4',
+    slidesKey: '4',
+    slidesPerViewXl: 4.4
+}), "\n    </div>\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n");

package/dist/stories/pages/navigation-pages/templates/info-first-top-pattern.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var linkCardContentSwiper_1 = __importDefault(require("../../partials/linkCardContentSwiper"));
+exports["default"] = "\n    <VsPageHeader menu-type=\"b2b\">\n        <template #breadcrumb>\n            <VsContainer class=\"mt-075 mt-lg-200\">\n                <VsRow>\n                    <VsCol\n                        cols=\"10\"\n                        lg=\"8\"\n                    >\n                        <VsBreadcrumb>\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Home\"\n                            />\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Advice and Support\"\n                                active\n                            />\n                        </VsBreadcrumb>\n                    </VsCol>\n                </VsRow>\n            </VsContainer>\n        </template>\n\n        <template #heroSection>\n            <VsContainer>\n                <VsRow>\n                    <VsCol>\n                        <VsHeroSection\n                            heading=\"Advice and Support\"\n                            lede=\"Check out our how to articles and case studies on everything from digital channels to travel distribution.\"\n                        />\n                    </VsCol>\n                </VsRow>\n            </VsContainer>\n        </template>\n    </VsPageHeader>\n\n    <!------------------------------------------------------------\n    NEW SECTION - Spotlight section\n    ------------------------------------------------------------>\n    <VsContainer class=\"mt-500\">\n        <VsRow>\n            <VsCol>\n                <VsSpotlightSection \n                    heading=\"Support by sector\"\n                    description=\"Find tailored advice and case studies for accommodation, active and outdoor, events and festivals, food and drink and visitor attraction sectors.\"\n                    imageSrc=\"https://support.visitscotland.org/binaries/content/gallery/bsh/cms-images/20-jan/cairnie-fruit-farm\"\n                    ctaLink=\"#\"\n                    ctaText=\"Find sector support\"\n                />\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n\n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper\n    ------------------------------------------------------------>\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"Advice for each stage of your journey\"\n    >\n        <template v-slot:section-header-lede>\n            <p>Whatever stage you're at - whether you just have an idea, or you've been welcoming customers for over 20 years, there's always room for sustainable growth.</p>\n        </template>\n    </VsSectionHeader>\n\n    ".concat((0, linkCardContentSwiper_1["default"])({
+    slidesVar: 'textCardList1',
+    slidesKey: '1',
+    slidesPerViewXl: 4.4
+}), "\n\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n    <!------------------------------------------------------------\n    NEW SECTION - Spotlight section\n    ------------------------------------------------------------>\n    <VsContainer class=\"mt-500\">\n        <VsRow>\n            <VsCol>\n                <VsSpotlightSection \n                    heading=\"Sustainability\"\n                    description=\"Sustainably grow your tourism or events business with actionable green strategies.\"\n                    imageSrc=\"https://support.visitscotland.org/binaries/content/gallery/bsh/cms-images/12-mar/loch-affric\"\n                    ctaLink=\"#\"\n                    ctaText=\"Explore sustainability\"\n                />\n            </VsCol>   \n        </VsRow>\n    </VsContainer>\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n\n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper\n    ------------------------------------------------------------>\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"Related pages\"\n    >\n    </VsSectionHeader>\n\n    ").concat((0, linkCardContentSwiper_1["default"])({
+    slidesVar: 'textCardList2',
+    slidesKey: '2',
+    slidesPerViewXl: 4.4
+}), "\n\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n    <!------------------------------------------------------------\n    NEW SECTION - Spotlight section\n    ------------------------------------------------------------>\n    <VsContainer class=\"mt-500 mb-500\">\n        <VsRow>\n            <VsCol>\n                <VsSpotlightSection \n                    heading=\"Sign up for the latest advice\"\n                    description=\"Get expert tips, case studies, and business advice straight to your inbox with our monthly Business Support newsletter.\"\n                    ctaLink=\"#\"\n                    ctaText=\"Join the newsletter\"\n                    compact\n                />\n            </VsCol>   \n        </VsRow>\n    </VsContainer>\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>          \n");

package/dist/stories/pages/navigation-pages/templates/visual-impact-pattern.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var splitCardContentSwiper_1 = __importDefault(require("../../partials/splitCardContentSwiper"));
+var categoryCardContentSwiper_1 = __importDefault(require("../../partials/categoryCardContentSwiper"));
+exports["default"] = "\n    <VsPageHeader menu-type=\"b2c\">\n        <template #breadcrumb>\n            <VsContainer class=\"mt-075 mt-lg-200\">\n                <VsRow>\n                    <VsCol\n                        cols=\"10\"\n                        lg=\"8\"\n                    >\n                        <VsBreadcrumb>\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Home\"\n                            />\n                            <VsBreadcrumbItem\n                                href=\"#\"\n                                text=\"Things to do\"\n                                active\n                            />\n                        </VsBreadcrumb>\n                    </VsCol>\n                </VsRow>\n            </VsContainer>\n        </template>\n\n        <template #heroSection>\n            <VsHeroSection\n                heading=\"Things to see & do in Scotland\"\n                lede=\"What unique and incredible things do you want to do in Scotland? Let the kids learn new stories in amazing attractions, take your friends to a new festival or spend some time relaxing at stunning nature spots.\"\n                img-src=\"https://2f1a7f9478.visitscotland.net/binaries/content/gallery/visitscotland/cms-images/2025/04/16/paisley-abbey-header-new.jpg\"\n                img-caption=\"Paisley Abbey\"\n                img-credit=\"VisitScotland\"\n            />\n        </template>\n    </VsPageHeader>\n\n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper (Overlay)\n    ------------------------------------------------------------>\n    <div class=\"mt-300\">\n        ".concat((0, categoryCardContentSwiper_1["default"])({
+    slidesVar: 'cardListOverlay'
+}), "\n    </div>\n\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n    \n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper (4 cards)\n    ------------------------------------------------------------>\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"Top things to do and experience in Scotland\"\n    >\n        <template v-slot:section-header-lede>\n            <p>Explore the top things to do in Scotland, including must-see attractions, exciting experiences, and inspiring ways to enjoy the outdoors.</p>\n        </template>\n    </VsSectionHeader>\n\n    ").concat((0, splitCardContentSwiper_1["default"])({
+    slidesVar: 'cardList1',
+    slidesKey: '1',
+    slidesPerViewXl: 4.4
+}), "\n\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n\n     <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper ( 3cards)\n    ------------------------------------------------------------>\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"Captivating Scottish events\"\n    >\n        <template v-slot:section-header-lede>\n            <p>Discover new musicians you'll love forever, watch incredible athletes compete for gold or spend some time with the locals at authentic community events. It's a packed calendar all year round!</p>\n        </template>\n    </VsSectionHeader>\n\n    ").concat((0, splitCardContentSwiper_1["default"])({
+    slidesVar: 'cardList2',
+    slidesKey: '2',
+    slidesPerViewXl: 3.4
+}), "\n\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n\n    <!------------------------------------------------------------\n    NEW SECTION - Spotlight section\n    ------------------------------------------------------------>\n    <VsContainer class=\"mt-500\">\n        <VsRow>\n            <VsCol>\n                <VsSpotlightSection \n                    heading=\"Slow travel and wellness retreats\"\n                    description=\"Slow down and explore Scotland's breathtaking scenery. Unplug, find moments of wellness, and savour every experience.\"\n                    imageSrc=\"fixtures/hero/images/lavendar-fields.jpg\"\n                    ctaLink=\"#\"\n                    ctaText=\"Explore slow travel adventures\"\n                >\n                    <template #vs-spotlight-section-media>\n                        <VsVideo\n                            ref=\"spotlightVideo\"\n                            video-type=\"html5\"\n                            poster-image-src=\"fixtures/hero/images/lavendar-fields.jpg\"\n                            video-src=\"fixtures/hero/video/lavendar-fields.mp4\"\n                            :show-toggle=\"false\"\n                            video-id=\"spotlight-video\"\n                            :lazy-load=\"true\"\n                        />\n                    </template>\n\n                    <template #vs-spotlight-section-overlay-controls>\n                        <VsToggleButton\n                            v-if=\"!isReducedMotion\"\n                            variant=\"overlay\"\n                            icon=\"vs-icon-control-pause\"\n                            pressed-icon=\"vs-icon-control-play\"\n                            label=\"Pause video\"\n                            pressed-label=\"Play video\"\n                            aria-controls=\"spotlight-video\"\n                            @click=\"(val) => toggleVideo('spotlightVideo')\"\n                        />\n                    </template>\n                </VsSpotlightSection>\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper ( 4 cards)\n    ------------------------------------------------------------>\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"Magical places to visit\"\n    >\n        <template v-slot:section-header-lede>\n            <p>Make new memories at some of our most popular attractions, uncover incredible film locations, or get up and close with Scotland's stunning landscapes and wildlife.</p>\n        </template>\n    </VsSectionHeader>\n\n    ").concat((0, splitCardContentSwiper_1["default"])({
+    slidesVar: 'cardList3',
+    slidesKey: '3',
+    slidesPerViewXl: 4.4
+}), "\n\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper ( 3 cards)\n    ------------------------------------------------------------>\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"Plan your trip\"\n    >\n        <template v-slot:section-header-lede>\n            <p>\n                Choose from inspiring tours and itineraries to help you make the most of your time in Scotland \u2014 whether it's a road trip, city break or scenic adventure.\n            </p>\n        </template>\n    </VsSectionHeader>\n\n    ").concat((0, splitCardContentSwiper_1["default"])({
+    slidesVar: 'cardList5',
+    slidesKey: '5',
+    slidesPerViewXl: 3.4
+}), "\n\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n\n    <!------------------------------------------------------------\n    NEW SECTION - Spotlight section\n    ------------------------------------------------------------>\n    <VsContainer class=\"mt-500\">\n        <VsRow>\n            <VsCol>\n                <VsSpotlightSection \n                    heading=\"Film & TV locations\"\n                    description=\"This country has produced its fair share of top Hollywood names, and there have been a surprising number of movies filmed in Scotland, too.\"\n                    imageSrc=\"https://2f1a7f9478.visitscotland.net/binaries/content/gallery/visitscotland/cms-images/2022/07/05/outlander-image\"\n                    ctaLink=\"#\"\n                    ctaText=\"See the Locations\"\n                />\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n    \n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper ( 4 cards)\n    ------------------------------------------------------------>\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"Make the most of your visit\"\n    >\n        <template v-slot:section-header-lede>\n            <p>\n                Sample Scotland's delicious local food and drink, shopping, and find the best passes and offers to make your trip even more rewarding.\n            </p>\n        </template>\n    </VsSectionHeader>\n\n    ").concat((0, splitCardContentSwiper_1["default"])({
+    slidesVar: 'cardList6',
+    slidesKey: '6',
+    slidesPerViewXl: 4.4
+}), "\n\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n\n\n    <!------------------------------------------------------------\n    NEW SECTION - Section header + content swiper ( 4 cards)\n    ------------------------------------------------------------>\n    <VsSectionHeader \n        class=\"mt-500 mb-200 mb-xl-300\"\n        heading=\"Top tips for travelling to Scotland\"\n    >\n        <template v-slot:section-header-lede>\n            <p>Find out everything you need to know before you explore Scotland.</p>\n        </template>\n\n        <template v-slot:section-header-actions>\n            <VsButton variant=\"secondary\" href=\"#\">\n                Plan your trip\n            </VsButton>\n        </template>\n    </VsSectionHeader>\n\n    <div class=\"mb-500\">\n        ").concat((0, splitCardContentSwiper_1["default"])({
+    slidesVar: 'cardList4',
+    slidesKey: '4',
+    slidesPerViewXl: 4.4
+}), "\n    </div>\n    <!------------------------------------------------------------\n    SECTION END\n    ------------------------------------------------------------>\n");

package/dist/stories/pages/partials/categoryCardContentSwiper.js

@@ -0,0 +1,7 @@
+"use strict";
+exports.__esModule = true;
+function categoryCardContentSwiper(_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.slidesVar, slidesVar = _c === void 0 ? 'cardListOverlay' : _c, _d = _b.slidesKey, slidesKey = _d === void 0 ? '1' : _d;
+    return "\n        <VsContentSwiper\n            previousButtonLabel=\"Previous\"\n            nextButtonLabel=\"Next\"\n            :slidesPerViewXs=\"1.2\"\n            :slidesPerViewSm=\"2.2\"\n            :slidesPerViewLg=\"2.7\"\n            :slidesPerViewXl=\"4\"\n        >\n            <VsContentSwiperSlide\n                v-for=\"(card, index) in ".concat(slidesVar, "\"\n                :key=\"'card-overlay-").concat(slidesKey, "' + index\"\n            >\n                <VsCard\n                    card-style=\"overlay\"\n                    ref=\"overlayCard\"\n                >\n                    <template #vs-card-image>\n                        <VsVideo\n                            v-if=\"card.videoSrc\"\n                            :ref=\"'cardVideo-' + index\"\n                            video-type=\"html5\"\n                            :poster-image-src=\"card.image\"\n                            :video-src=\"card.videoSrc\"\n                            :show-toggle=\"false\"\n                            :video-id=\"'category-card-video-").concat(slidesKey, "-' + index\"\n                            :lazy-load=\"true\"\n                        />\n                        <VsImg \n                            v-else\n                            :src=\"card.image\" \n                            class=\"w-100 aspect-ratio-3-2 rounded-1 object-fit-cover img-zoom-on-hover\"\n                        />\n                    </template>\n\n                    <template #vs-card-overlay-controls>\n                        <VsToggleButton\n                            v-if=\"card.videoSrc && !isReducedMotion\"\n                            variant=\"overlay\"\n                            icon=\"vs-icon-control-pause\"\n                            pressed-icon=\"vs-icon-control-play\"\n                            label=\"Pause video\"\n                            pressed-label=\"Play video\"\n                            :aria-controls=\"'category-card-video-").concat(slidesKey, "-' + index\"\n                            @click=\"toggleCard(index)\"\n                        />\n                    </template>\n\n                    <template #vs-card-footer>\n                        <div class=\"px-125 pb-125\">\n                            <VsHeading\n                                level=\"2\"\n                                no-margins\n                                heading-style=\"heading-m\"\n                            >\n                                <VsLink\n                                    :href=\"card.link\"\n                                    class=\"stretched-link text-decoration-none\"\n                                    variant=\"on-dark\"\n                                >\n                                    {{ card.title }}\n                                </VsLink>\n                            </VsHeading>\n                        </div>\n                    </template>\n                </VsCard>\n            </VsContentSwiperSlide>\n        </VsContentSwiper>\n    ");
+}
+exports["default"] = categoryCardContentSwiper;

package/dist/stories/pages/partials/eventCardContentSwiper.js

@@ -0,0 +1,7 @@
+"use strict";
+exports.__esModule = true;
+function eventCardContentSwiper(_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.slidesVar, slidesVar = _c === void 0 ? 'cardList4' : _c, _d = _b.slidesKey, slidesKey = _d === void 0 ? '4' : _d, _e = _b.slidesPerViewXl, slidesPerViewXl = _e === void 0 ? 3.4 : _e;
+    return "\n        <VsContentSwiper\n            previousButtonLabel=\"Previous\"\n            nextButtonLabel=\"Next\"\n            :slidesPerViewSm=\"2.4\"\n            :slidesPerViewXl=\"".concat(slidesPerViewXl, "\"\n        >\n            <VsContentSwiperSlide\n                v-for=\"(card, index) in ").concat(slidesVar, "\"\n                :key=\"'card-list-").concat(slidesKey, "-' + index\"\n            >\n                <VsCard>\n                    <template #vs-card-header>\n                        <div class=\"position-relative\">\n                            <VsImg\n                                v-if=\"card.image\"\n                                :src=\"card.image\"\n                                class=\"w-100 aspect-ratio-3-2 rounded-1 object-fit-cover img-zoom-on-hover\"\n                            />\n                            <div class=\"position-absolute bottom-0 start-0 end-0 d-flex justify-content-between\">\n                                <div class=\"d-flex\">\n                                    <VsBadge\n                                        v-if=\"card.price\"\n                                        variant=\"information\"\n                                        class=\"rounded-top-end rounded-bottom-start\"\n                                    >\n                                        {{ card.price }}\n                                    </VsBadge>\n\n                                    <VsBadge\n                                        v-if=\"card.date\"\n                                        variant=\"information\"\n                                        class=\"rounded-top-end rounded-top-start\"\n                                    >\n                                        {{ card.date }}\n                                    </VsBadge>\n                                </div>\n\n                                <VsBadge\n                                    v-if=\"card.type\"\n                                    variant=\"information\"\n                                    class=\"rounded-top-start rounded-bottom-end me-0\"\n                                >\n                                    {{ card.type }}\n                                </VsBadge>\n                            </div>\n                        </div>\n\n                    </template>\n\n                    <template #vs-card-body >\n                        <VsHeading\n                            level=\"3\"\n                            heading-style=\"heading-xs\"\n                        >\n                            <VsLink\n                                :href=\"card.link\"\n                                class=\"stretched-link\"\n                                variant=\"secondary\"\n                            >\n                                {{ card.title }}\n                            </VsLink>\n                        </VsHeading>\n\n                        <VsBody>\n                            <p class=\"truncate-2-lines\">\n                                {{ card.description }}\n                            </p>\n                        </VsBody>\n                    </template>\n\n                    <template #vs-card-footer>\n                        <div class=\"d-flex justify-content-between align-items-end\">\n                            <div \n                                v-if=\"card.location\"\n                                class=\"d-flex align-items-center\"\n                            >\n                                <VsIcon\n                                    icon=\"fa-solid fa-location-dot\"\n                                    variant=\"highlight\"\n                                    class=\"me-050\"\n                                    size=\"sm\"\n                                />\n                                <VsDetail\n                                    no-margins\n                                    color=\"tertiary\"\n                                >\n                                    {{ card.location }}\n                                </VsDetail>\n                            </div>\n\n                            <VsIcon \n                                v-if=\"card.isExternal\"\n                                icon=\"vs-icon-control-external-link\"\n                                variant=\"highlight\"\n                                size=\"sm\"\n                            />\n                        </div>\n                    </template>\n                </VsCard>\n            </VsContentSwiperSlide>\n    </VsContentSwiper>\n    ");
+}
+exports["default"] = eventCardContentSwiper;

package/dist/stories/pages/partials/imageContentSwiper.js

@@ -0,0 +1,7 @@
+"use strict";
+exports.__esModule = true;
+function imageContentSwiper(_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.slidesVar, slidesVar = _c === void 0 ? 'landscapeImages' : _c, _d = _b.contained, contained = _d === void 0 ? false : _d, _e = _b.slidesPerViewLg, slidesPerViewLg = _e === void 0 ? 1.4 : _e;
+    return "\n        <VsContentSwiper\n            previousButtonLabel=\"Previous\"\n            nextButtonLabel=\"Next\"\n            :contained=\"".concat(contained, "\"\n            :slidesPerViewLg=\"").concat(slidesPerViewLg, "\"\n        >\n            <VsContentSwiperSlide\n                v-for=\"(image, index) in ").concat(slidesVar, "\"\n                :key=\"'image-group-' + index\"\n            >\n                <figure class=\"w-100\">\n                    <VsImg \n                        v-if=\"image.image\"\n                        :src=\"image.image\"\n                        class=\"w-100\"\n                    />\n                    <figcaption>\n                        <VsMediaCaption>\n                            <template v-slot:caption>\n                                {{ image.caption }}\n                            </template>\n                            <template v-slot:credit>\n                                {{ image.credit }}\n                            </template>\n                        </VsMediaCaption>\n                    </figcaption>\n                </figure>\n            </VsContentSwiperSlide>\n    </VsContentSwiper>\n    ");
+}
+exports["default"] = imageContentSwiper;

package/dist/stories/pages/partials/imageWithCaptionPartial.js

@@ -0,0 +1,9 @@
+"use strict";
+exports.__esModule = true;
+function imageWithCaptionPartial(_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.imageSrc, imageSrc = _c === void 0 ? null : _c, _d = _b.imageCaption, imageCaption = _d === void 0 ? null : _d, _e = _b.imageCredit, imageCredit = _e === void 0 ? null : _e, _f = _b.hasArticleSpacing, hasArticleSpacing = _f === void 0 ? true : _f, _g = _b.addTopMargin, addTopMargin = _g === void 0 ? false : _g;
+    if (!imageSrc)
+        return '';
+    return "\n    <figure>\n        <VsImg \n            src=\"".concat(imageSrc, "\"\n            fluid\n            use-lazy-loading\n            class=\"rounded-2 w-100 ").concat(addTopMargin ? 'mt-175' : '', "\"\n        />\n        <figcaption>\n            <VsMediaCaption class=\"").concat(hasArticleSpacing ? 'mb-100' : '', "\">\n                <template v-slot:caption>\n                    ").concat(imageCaption !== null && imageCaption !== void 0 ? imageCaption : '', "\n                </template>\n                <template v-slot:credit>\n                    ").concat(imageCredit !== null && imageCredit !== void 0 ? imageCredit : '', "\n                </template>\n            </VsMediaCaption>\n        </figcaption>\n    </figure>\n    ");
+}
+exports["default"] = imageWithCaptionPartial;

package/dist/stories/pages/partials/linkCardContentSwiper.js

@@ -0,0 +1,7 @@
+"use strict";
+exports.__esModule = true;
+function linkCardContentSwiper(_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.slidesVar, slidesVar = _c === void 0 ? 'cardList4' : _c, _d = _b.slidesKey, slidesKey = _d === void 0 ? '4' : _d, _e = _b.slidesPerViewXl, slidesPerViewXl = _e === void 0 ? 4.4 : _e;
+    return "\n        <VsContentSwiper\n            previousButtonLabel=\"Previous\"\n            nextButtonLabel=\"Next\"\n            :slidesPerViewSm=\"2.4\"\n            :slidesPerViewXl=\"".concat(slidesPerViewXl, "\"\n        >\n            <VsContentSwiperSlide\n                v-for=\"(card, index) in ").concat(slidesVar, "\"\n                :key=\"'card-list-").concat(slidesKey, "-' + index\"\n            >\n                <VsCard\n                    :accent-bar=\"true\"\n                    :fill-color=\"'vs-color-background-primary'\"\n                    card-style=\"elevated\"\n                >\n                    <template #vs-card-header>\n                        <VsBadge\n                            v-if=\"card.badgeTitle\"\n                            variant=\"subtle\"\n                            class=\"mt-125 mx-075\"\n                        >\n                            {{ card.badgeTitle }}\n                        </VsBadge>\n                    </template>\n\n                    <template #vs-card-body>\n                        <div class=\"px-125\">\n                            <VsHeading\n                                level=\"3\"\n                                heading-style=\"heading-xs\"\n                            >\n                                <VsLink\n                                    :href=\"card.link\"\n                                    class=\"stretched-link\"\n                                    variant=\"secondary\"\n                                >\n                                    {{ card.title }}\n                                </VsLink>\n                            </VsHeading>\n\n                            <VsBody class=\"mb-150 truncate-3-lines\">\n                                {{ card.description }}\n                            </VsBody>\n                        </div>\n                    </template>\n\n                    <template #vs-card-footer>\n                        <VsArticleDetails\n                            v-if=\"card.metaData\"\n                            class=\"px-125 mb-150\"\n                            :article-read-time=\"card.metaData\"\n                        />\n                    </template>\n                </VsCard>\n            </VsContentSwiperSlide>\n    </VsContentSwiper>\n    ");
+}
+exports["default"] = linkCardContentSwiper;

package/dist/stories/pages/partials/splitCardContentSwiper.js

@@ -0,0 +1,7 @@
+"use strict";
+exports.__esModule = true;
+function splitCardContentSwiper(_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.slidesVar, slidesVar = _c === void 0 ? 'cardList4' : _c, _d = _b.slidesKey, slidesKey = _d === void 0 ? '4' : _d, _e = _b.slidesPerViewXl, slidesPerViewXl = _e === void 0 ? 4.4 : _e;
+    return "\n        <VsContentSwiper\n            previousButtonLabel=\"Previous\"\n            nextButtonLabel=\"Next\"\n            :slidesPerViewSm=\"2.4\"\n            :slidesPerViewXl=\"".concat(slidesPerViewXl, "\"\n        >\n            <VsContentSwiperSlide\n                v-for=\"(card, index) in ").concat(slidesVar, "\"\n                :key=\"'card-list-").concat(slidesKey, "-' + index\"\n            >\n                <VsCard>\n                    <template #vs-card-header>\n                        <VsImg\n                            v-if=\"card.image\"\n                            :src=\"card.image\"\n                            class=\"w-100 aspect-ratio-3-2 rounded-1 object-fit-cover img-zoom-on-hover\"\n                        />\n                    </template>\n\n                    <template #vs-card-body>\n                        <div>\n                            <VsHeading level=\"3\" heading-style=\"heading-xs\">\n                                <VsLink\n                                    :href=\"card.link\"\n                                    class=\"stretched-link\"\n                                    variant=\"secondary\"\n                                >\n                                    {{ card.title }}\n                                </VsLink>\n                            </VsHeading>\n\n                            <VsBody class=\"mb-150 truncate-2-lines\">\n                                {{ card.description }}\n                            </VsBody>\n                        </div>\n                    </template>\n\n                    <template \n                        v-if=\"card.isExternal\"\n                        #vs-card-footer\n                    >\n                        <div class=\"d-flex justify-content-end\">\n                            <VsIcon \n                                icon=\"vs-icon-control-external-link\"\n                                variant=\"highlight\"\n                                size=\"sm\"\n                            />\n                        </div>\n                    </template>\n                </VsCard>\n            </VsContentSwiperSlide>\n    </VsContentSwiper>\n    ");
+}
+exports["default"] = splitCardContentSwiper;

package/dist/stories/patterns/card-layout/CardLayout.stories.js

@@ -0,0 +1,111 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.MultipleRowGrid = exports.ExtendedCardCollection = exports.FourCardsPerRow = exports.ThreeCardsPerRow = void 0;
+var Card_vue_1 = __importDefault(require("@/components/card/Card.vue"));
+var Heading_vue_1 = __importDefault(require("@/components/heading/Heading.vue"));
+var Img_vue_1 = __importDefault(require("@/components/img/Img.vue"));
+var Link_vue_1 = __importDefault(require("@/components/link/Link.vue"));
+var Button_vue_1 = __importDefault(require("@/components/button/Button.vue"));
+var Body_vue_1 = __importDefault(require("@/components/body/Body.vue"));
+var Detail_vue_1 = __importDefault(require("@/components/detail/Detail.vue"));
+var ArticleDetails_vue_1 = __importDefault(require("@/components/article-details/ArticleDetails.vue"));
+var Badge_vue_1 = __importDefault(require("@/components/badge/Badge.vue"));
+var Icon_vue_1 = __importDefault(require("@/components/icon/Icon.vue"));
+var Video_vue_1 = __importDefault(require("@/components/video/Video.vue"));
+var ToggleButton_vue_1 = __importDefault(require("@/components/toggle-button/ToggleButton.vue"));
+var grid_1 = require("@/components/grid");
+var ContentSwiper_vue_1 = __importDefault(require("@/components/content-swiper/ContentSwiper.vue"));
+var ContentSwiperSlide_1 = __importDefault(require("@/components/content-swiper/components/ContentSwiperSlide"));
+var visual_impact_cards_json_1 = __importDefault(require("@/assets/fixtures/navigation-pages/visual-impact-cards.json"));
+var multiple_rows_grid_1 = __importDefault(require("./templates/multiple-rows-grid"));
+var _3_cards_per_row_1 = __importDefault(require("./templates/3-cards-per-row"));
+var _4_cards_per_row_1 = __importDefault(require("./templates/4-cards-per-row"));
+var extended_card_collection_1 = __importDefault(require("./templates/extended-card-collection"));
+var components = {
+    VsCard: Card_vue_1["default"],
+    VsHeading: Heading_vue_1["default"],
+    VsImg: Img_vue_1["default"],
+    VsLink: Link_vue_1["default"],
+    VsButton: Button_vue_1["default"],
+    VsBody: Body_vue_1["default"],
+    VsArticleDetails: ArticleDetails_vue_1["default"],
+    VsBadge: Badge_vue_1["default"],
+    VsIcon: Icon_vue_1["default"],
+    VsDetail: Detail_vue_1["default"],
+    VsVideo: Video_vue_1["default"],
+    VsToggleButton: ToggleButton_vue_1["default"],
+    VsCol: grid_1.VsCol,
+    VsRow: grid_1.VsRow,
+    VsContainer: grid_1.VsContainer,
+    VsContentSwiper: ContentSwiper_vue_1["default"],
+    VsContentSwiperSlide: ContentSwiperSlide_1["default"]
+};
+/**
+ * Generic helper for simple template stories
+ */
+var createStory = function (template, options) {
+    if (options === void 0) { options = {}; }
+    return ({
+        render: function () { return (__assign({ components: components, template: template }, options)); },
+        parameters: {
+            docs: {
+                source: {
+                    code: template
+                }
+            }
+        }
+    });
+};
+exports["default"] = {
+    title: 'Patterns/Card Layout'
+};
+exports.ThreeCardsPerRow = createStory(_3_cards_per_row_1["default"], {
+    setup: function () {
+        var _a;
+        var cardList2 = ((_a = visual_impact_cards_json_1["default"].cardList2) === null || _a === void 0 ? void 0 : _a.cards) || [];
+        return {
+            cardList2: cardList2
+        };
+    }
+});
+exports.FourCardsPerRow = createStory(_4_cards_per_row_1["default"], {
+    setup: function () {
+        var _a;
+        var cardList3 = ((_a = visual_impact_cards_json_1["default"].cardList3) === null || _a === void 0 ? void 0 : _a.cards) || [];
+        return {
+            cardList3: cardList3
+        };
+    }
+});
+exports.ExtendedCardCollection = createStory(extended_card_collection_1["default"], {
+    setup: function () {
+        var _a;
+        var cardListOverlay = ((_a = visual_impact_cards_json_1["default"].cardListOverlay) === null || _a === void 0 ? void 0 : _a.cards) || [];
+        return {
+            cardListOverlay: cardListOverlay
+        };
+    }
+});
+exports.MultipleRowGrid = createStory(multiple_rows_grid_1["default"], {
+    setup: function () {
+        var _a;
+        var cardListMultipleRows = ((_a = visual_impact_cards_json_1["default"].cardListMultipleRows) === null || _a === void 0 ? void 0 : _a.cards) || [];
+        return {
+            cardListMultipleRows: cardListMultipleRows
+        };
+    }
+});

package/dist/stories/patterns/card-layout/templates/3-cards-per-row.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsContentSwiper\n        previousButtonLabel=\"Previous slide\"\n        nextButtonLabel=\"Next slide\"\n        :slidesPerViewSm=\"2.4\"\n        :slidesPerViewXl=\"3\"\n    >\n        <VsContentSwiperSlide\n            v-for=\"(card, index) in cardList2\"\n            :key=\"'card-list-' + index\"\n        >\n            <VsCard>\n                <template #vs-card-header>\n                    <VsImg\n                        v-if=\"card.image\"\n                        :src=\"card.image\"\n                        class=\"w-100 aspect-ratio-3-2 rounded-1 object-fit-cover img-zoom-on-hover\"\n                    />\n                </template>\n\n                <template #vs-card-body>\n                    <div>\n                        <VsHeading level=\"3\" heading-style=\"heading-xs\">\n                            <VsLink\n                                :href=\"card.link\"\n                                class=\"stretched-link\"\n                                variant=\"secondary\"\n                            >\n                                {{ card.title }}\n                            </VsLink>\n                        </VsHeading>\n\n                        <VsBody class=\"mb-150 truncate-2-lines\">\n                            {{ card.description }}\n                        </VsBody>\n                    </div>\n                </template>\n\n                <template \n                    v-if=\"card.isExternal\"\n                    #vs-card-footer\n                >\n                    <div class=\"d-flex justify-content-end\">\n                        <VsIcon \n                            icon=\"vs-icon-control-external-link\"\n                            variant=\"highlight\"\n                            size=\"sm\"\n                        />\n                    </div>\n                </template>\n            </VsCard>\n        </VsContentSwiperSlide>\n    </VsContentSwiper>\n";

package/dist/stories/patterns/card-layout/templates/4-cards-per-row.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsContentSwiper\n        previousButtonLabel=\"Previous slide\"\n        nextButtonLabel=\"Next slide\"\n        :slidesPerViewSm=\"2.4\"\n        :slidesPerViewXl=\"4\"\n    >\n        <VsContentSwiperSlide\n            v-for=\"(card, index) in cardList3\"\n            :key=\"'card-list-' + index\"\n        >\n            <VsCard>\n                <template #vs-card-header>\n                    <VsImg\n                        v-if=\"card.image\"\n                        :src=\"card.image\"\n                        class=\"w-100 aspect-ratio-3-2 rounded-1 object-fit-cover img-zoom-on-hover\"\n                    />\n                </template>\n\n                <template #vs-card-body>\n                    <div>\n                        <VsHeading level=\"3\" heading-style=\"heading-xs\">\n                            <VsLink\n                                :href=\"card.link\"\n                                class=\"stretched-link\"\n                                variant=\"secondary\"\n                            >\n                                {{ card.title }}\n                            </VsLink>\n                        </VsHeading>\n\n                        <VsBody class=\"mb-150 truncate-2-lines\">\n                            {{ card.description }}\n                        </VsBody>\n                    </div>\n                </template>\n\n                <template \n                    v-if=\"card.isExternal\"\n                    #vs-card-footer\n                >\n                    <div class=\"d-flex justify-content-end\">\n                        <VsIcon \n                            icon=\"vs-icon-control-external-link\"\n                            variant=\"highlight\"\n                            size=\"sm\"\n                        />\n                    </div>\n                </template>\n            </VsCard>\n        </VsContentSwiperSlide>\n    </VsContentSwiper>\n";

package/dist/stories/patterns/card-layout/templates/extended-card-collection.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsContentSwiper\n        previousButtonLabel=\"Previous slide\"\n        nextButtonLabel=\"Next slide\"\n        :slidesPerViewXs=\"1.2\"\n        :slidesPerViewSm=\"2.2\"\n        :slidesPerViewLg=\"2.7\"\n        :slidesPerViewXl=\"4\"\n    >\n        <VsContentSwiperSlide\n            v-for=\"(card, index) in cardListOverlay\"\n            :key=\"'card-list-' + index\"\n        >\n            <VsCard card-style=\"overlay\">\n                <template #vs-card-image>\n                    <VsImg \n                        :src=\"card.image\" \n                        class=\"w-100 aspect-ratio-3-2 rounded-1 object-fit-cover img-zoom-on-hover\"\n                    />\n                </template>\n\n                <template #vs-card-footer>\n                    <div class=\"px-125 pb-125\">\n                        <VsHeading\n                            level=\"2\"\n                            no-margins\n                            heading-style=\"heading-m\"\n                        >\n                            <VsLink\n                                href=\"#\"\n                                class=\"stretched-link text-decoration-none\"\n                                variant=\"on-dark\"\n                            >\n                                {{ card.title }}\n                            </VsLink>\n                        </VsHeading>\n                    </div>\n                </template>\n            </VsCard>\n        </VsContentSwiperSlide>\n    </VsContentSwiper>\n";

package/dist/stories/patterns/card-layout/templates/multiple-rows-grid.js

@@ -0,0 +1,3 @@
+"use strict";
+exports.__esModule = true;
+exports["default"] = "\n    <VsContainer class=\"mt-075 mt-lg-200 mb-200\">\n        <VsRow>\n            <VsCol \n                v-for=\"(card, index) in cardListMultipleRows\"\n                :key=\"'card-list-multiple-rows-' + index\"\n                cols=\"12\"\n                sm=\"6\"\n                lg=\"4\"\n                xl=\"3\"\n                class=\"mb-150\"\n            >\n                <VsCard card-style=\"outlined\">\n                    <template #vs-card-header>\n                        <VsImg\n                            v-if=\"card.image\"\n                            :src=\"card.image\"\n                            class=\"w-100 aspect-ratio-3-2 rounded-1 object-fit-cover img-zoom-on-hover\"\n                        />\n                    </template>\n\n                    <template #vs-card-body>\n                        <div class=\"px-075\">\n                            <VsHeading\n                                level=\"3\"\n                                heading-style=\"heading-xs\"\n                            >\n                                <VsLink\n                                    :href=\"card.link\"\n                                    class=\"stretched-link\"\n                                    variant=\"secondary\"\n                                >\n                                    {{ card.title }}\n                                </VsLink>\n                            </VsHeading>\n\n                            <VsBody class=\"mb-150\">\n                                <p class=\"truncate-2-lines\">\n                                    {{ card.description }}\n                                </p>\n                            </VsBody>\n                        </div>\n                    </template>\n                </VsCard>\n            </VsCol>\n        </VsRow>\n    </VsContainer>\n";