@comicrelief/component-library 8.51.6 → 8.51.8

package/dist/components/Molecules/CTA/shared/CTACard.style.js

@@ -110,7 +110,7 @@ const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
   let {
     isInteractive
   } = _ref16;
-  return isInteractive && (0, _styledComponents.css)(["img{transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);}@media ", "{", ";&:hover{box-shadow:0 0 1.5rem rgba(0,0,0,0.25);", " img{transform:scale(1.11);}", "{text-decoration:none;@media (min-width:", "px){color:", ";}}", "{opacity:1;}", "{@media (min-width:", "px){background:", ";}}}}"], _ref17 => {
+  return isInteractive && (0, _styledComponents.css)(["img{transition:transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);}@media ", "{", ";transition:transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);&:hover{box-shadow:0 0 1.5rem rgba(0,0,0,0.25);", " img{transform:scale(1.06);}", "{text-decoration:none;@media (min-width:", "px){color:", ";}}", "{opacity:1;}", "{@media (min-width:", "px){background:", ";}}}}"], _ref17 => {
     let {
       theme
     } = _ref17;
@@ -156,7 +156,7 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
     isCarousel,
     isFullWidth
   } = _ref24;
-  return !isCarousel && !isFullWidth && (0, _styledComponents.css)(["@media (max-width:", "px){width:100%;max-width:100%;margin:0;}@media (min-width:", "px) and (max-width:", "px){align-self:stretch;", "}", ""], _allBreakpoints.breakpointValues.M - 1, _allBreakpoints.breakpointValues.M, _allBreakpoints.breakpointValues.L - 1, _ref25 => {
+  return !isCarousel && !isFullWidth && (0, _styledComponents.css)(["@media (max-width:", "px){width:100%;max-width:100%;margin:0;}@media (min-width:", "px) and (max-width:", "px){align-self:stretch;", " ", "}"], _allBreakpoints.breakpointValues.M - 1, _allBreakpoints.breakpointValues.M, _allBreakpoints.breakpointValues.L - 1, _ref25 => {
     let {
       columns
     } = _ref25;
@@ -165,55 +165,45 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
     let {
       columns
     } = _ref26;
-    return columns === 3 ? (0, _styledComponents.css)(["@container cta-multi-card (max-width:633px){width:100%;max-width:100%;flex:1 1 100%;}"]) : (0, _styledComponents.css)(["@container cta-multi-card (max-width:705px){width:100%;max-width:100%;flex:1 1 100%;}"]);
+    return columns === 2 && (0, _styledComponents.css)(["@container cta-multi-card (max-width:705px){flex:0 0 100%;width:min(100%,345px);max-width:345px;margin-inline:auto;}"]);
   });
 }, _ref27 => {
   let {
     isFullWidth
   } = _ref27;
-  return !isFullWidth && (0, _styledComponents.css)(["@media (min-width:", "px) and (max-width:", "px){", " align-self:stretch;}@media ", "{", "}"], _allBreakpoints.breakpointValues.L, _allBreakpoints.breakpointValues.XL - 1, _ref28 => {
+  return !isFullWidth && (0, _styledComponents.css)(["@media (min-width:", "px){", " align-self:stretch;}"], _allBreakpoints.breakpointValues.L, _ref28 => {
     let {
       columns
     } = _ref28;
     return columns === 3 ? (0, _styledComponents.css)(["flex:0 1 auto;width:clamp(286px,calc((100% - 4rem) / 3),363px);"]) : (0, _styledComponents.css)(["flex:0 1 auto;width:100%;"]);
-  }, _ref29 => {
-    let {
-      theme
-    } = _ref29;
-    return theme.allBreakpoints('XL');
-  }, _ref30 => {
-    let {
-      columns
-    } = _ref30;
-    return columns === 3 && (0, _styledComponents.css)(["width:100%;max-width:363px;"]);
   });
 });
 const CopyAndLinkSection = exports.CopyAndLinkSection = _styledComponents.default.div.withConfig({
   displayName: "CTACardstyle__CopyAndLinkSection",
   componentId: "sc-si8xx1-6"
-})(["width:100%;background:", ";display:flex;flex-direction:column;padding:2rem;flex:1;min-height:0;border-radius:0 0 1rem 1rem;", ""], _ref31 => {
+})(["width:100%;background:", ";display:flex;flex-direction:column;padding:2rem;flex:1;min-height:0;border-radius:0 0 1rem 1rem;", ""], _ref29 => {
   let {
     theme
-  } = _ref31;
+  } = _ref29;
   return theme.color('white');
-}, _ref32 => {
+}, _ref30 => {
   let {
     isSingleCard
-  } = _ref32;
-  return isSingleCard && (0, _styledComponents.css)(["@media ", "{width:calc(200% / 3);min-width:384px;max-width:650px;flex:1;border-radius:0 1rem 1rem 0;}@media ", "{min-width:541px;max-width:790px;}@media ", "{width:789px;}"], _ref33 => {
+  } = _ref30;
+  return isSingleCard && (0, _styledComponents.css)(["@media ", "{width:calc(200% / 3);min-width:384px;max-width:650px;flex:1;border-radius:0 1rem 1rem 0;}@media ", "{min-width:541px;max-width:790px;}@media ", "{width:789px;}"], _ref31 => {
     let {
       theme
-    } = _ref33;
+    } = _ref31;
     return theme.breakpoints2026('M');
-  }, _ref34 => {
+  }, _ref32 => {
     let {
       theme
-    } = _ref34;
+    } = _ref32;
     return theme.breakpoints2026('L');
-  }, _ref35 => {
+  }, _ref33 => {
     let {
       theme
-    } = _ref35;
+    } = _ref33;
     return theme.breakpoints2026('XL');
   });
 });
@@ -224,15 +214,15 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
 const CardLabel = exports.CardLabel = _styledComponents.default.div.withConfig({
   displayName: "CTACardstyle__CardLabel",
   componentId: "sc-si8xx1-8"
-})(["font-family:", ";font-size:14px;color:", ";"], _ref36 => {
+})(["font-family:", ";font-size:14px;color:", ";"], _ref34 => {
   let {
     theme
-  } = _ref36;
+  } = _ref34;
   return theme.fontFamilies('Montserrat');
-}, _ref37 => {
+}, _ref35 => {
   let {
     theme
-  } = _ref37;
+  } = _ref35;
   return theme.color('grey_3');
 });
 const CTA = exports.CTA = _styledComponents.default.div.withConfig({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.51.6",
+  "version": "8.51.8",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js

@@ -56,9 +56,8 @@ const CTAMultiCard = ({ data }) => {
         backgroundColor={cardsBackground}
         paddingAbove={paddingAbove}
         paddingBelow={paddingBelow}
-        isCarousel={carouselOfCards}
       >
-        <CardsInner isCarousel={carouselOfCards}>
+        <CardsInner>
           <CardsContainer
             columns={columns}
             isCarousel={carouselOfCards}
@@ -69,8 +68,12 @@ const CTAMultiCard = ({ data }) => {
                 options={{
                   arrows: false,
                   pagination: false,
-                  drag: true,
-                  dragMinThreshold: 10,
+                  // Reduce swipe "throw" as Matt felt the defaults are too much
+                  // See https://splidejs.com/guides/options/
+                  drag: 'free',
+                  flickPower: 50,
+                  perMove: 1,
+                  dragMinThreshold: { mouse: 50, touch: 50 },
                   gap: '1rem',
                   fixedWidth: '309px',
                   padding: { left: '0px', right: '0px' }

package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md

@@ -39,9 +39,23 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
   external: null
 }));
 
+const cardsFour = [
+  ...cardsWithRenderedBody,
+  {
+    ...cardsWithRenderedBody[0],
+    id: 'example-4th-card',
+    title: 'Fourth card',
+    body: (
+      <Text tag="p">
+        Fourth card (added for layout testing)
+      </Text>
+    )
+  }
+];
+
 const data = {
   ...exampleData,
-  cards: cardsWithRenderedBody,
+  cards: cardsFour,
   layout: "3 columns",
   carouselOfCards: true,
   backgroundColour: "grey_medium",
@@ -54,9 +68,51 @@ const data = {
 </div>;
 ```
 
+### CTAMultiCard: Carousel with just 2 cards (2 columns layout)
+
+```js
+import CTAMultiCard from './CTAMultiCard';
+import Text from '../../../Atoms/Text/Text';
+import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
+const exampleData = require('./example_data.json');
+
+// Map cards to include pre-rendered body content and processed image/link data
+const cardsWithRenderedBody = exampleData.cards.map(card => ({
+  ...card,
+  body: (
+    <Text tag="p">
+      {card.body}
+    </Text>
+  ),
+  fallback: challengeExampleImage,
+  imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
+  images: `${challengeExampleImage} 678w`,
+  bgColour: "white",
+  description: "",
+  target: "self",
+  external: null
+}));
+
+const cardsTwo = cardsWithRenderedBody.slice(0, 2);
+
+const dataTwoCards = {
+  ...exampleData,
+  cards: cardsTwo,
+  layout: "2 columns",
+  carouselOfCards: true,
+  backgroundColour: "grey_medium",
+  paddingAbove: '0rem',
+  paddingBelow: '0rem'
+};
+
+<div style={{ background: '#E1E2E3', width: '100%' }}>
+  <CTAMultiCard data={dataTwoCards} />
+</div>;
+```
+
 ### CTAMultiCard: Desktop Grid View (2 columns) with large padding
 
-**NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a vertical stack (non-carousel). This example also demonstrates larger vertical padding via `paddingAbove` / `paddingBelow` set to `4rem`, so it will appear with more space above and below the cards.**
+**NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a carousel. This example also demonstrates larger vertical padding via `paddingAbove` / `paddingBelow` set to `4rem`, so it will appear with more space above and below the cards.**
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -96,7 +152,7 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
 const dataWithLongText = {
   ...exampleData,
   layout: "2 columns",
-  carouselOfCards: false,
+  carouselOfCards: true,
   backgroundColour: "Transparent",
   cards: cardsWithRenderedBody,
   paddingAbove: '4rem',
@@ -108,7 +164,7 @@ const dataWithLongText = {
 </div>;
 ```
 
-### CTAMultiCard: Wrap behaviour (3 columns, non-carousel)
+### CTAMultiCard: Wrap behaviour (3 columns)
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -133,12 +189,36 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
   external: null
 }));
 
+const cardsFive = [
+  ...cardsWithRenderedBody,
+  {
+    ...cardsWithRenderedBody[0],
+    id: 'wrap-example-3',
+    title: 'Fourth card',
+    body: (
+      <Text tag="p">
+        Short body text (4)
+      </Text>
+    )
+  },
+  {
+    ...cardsWithRenderedBody[1],
+    id: 'wrap-example-4',
+    title: 'Fifth card',
+    body: (
+      <Text tag="p">
+        Short body text (5)
+      </Text>
+    )
+  }
+];
+
 const dataWrapExample = {
   ...exampleData,
   layout: "3 columns",
-  carouselOfCards: false,
+  carouselOfCards: true,
   backgroundColour: "rnd_26_light_pink",
-  cards: cardsWithRenderedBody,
+  cards: cardsFive,
   paddingAbove: '2rem',
   paddingBelow: '2rem'
 };

package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js

@@ -16,25 +16,19 @@ export const CardsSection = styled.div`
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
   padding-top: ${({ paddingAbove }) => paddingAbove};
   padding-bottom: ${({ paddingBelow }) => paddingBelow};
+  padding-inline: 1rem;
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    padding-inline: 2rem;
+  }
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    padding-inline: 4rem;
+  }
 `;
 
 export const CardsInner = styled.div`
   width: 100%;
   max-width: 1152px;
   margin: 0 auto;
-
-  ${({ isCarousel }) => !isCarousel && css`
-    padding-inline: 1rem;
-    @media ${({ theme }) => theme.allBreakpoints('M')} {
-      padding-inline: 2rem;
-    }
-  `}
-
-  ${({ isCarousel }) => isCarousel && css`
-    @media ${({ theme }) => theme.allBreakpoints('L')} {
-      padding-inline: 2rem;
-    }
-  `}
 `;
 
 const CardsContainer = styled.div`
@@ -49,17 +43,15 @@ const CardsContainer = styled.div`
     flex-wrap: wrap;
     justify-content: center;
     align-items: stretch;
-    width: 100%;
-    max-width: 100%;
-    margin: 0 auto;
   }
 
   @media ${({ theme }) => theme.allBreakpoints('L')} {
     column-gap: 2rem;
+    row-gap: 2rem;
   }
 
-  /* Ensure 2-column layout behaves itself at L+ */
-  ${({ isCarousel, columns }) => !isCarousel && columns === 2 && css`
+  /* Ensure 2-column layout behaves itself at L+. Applies when Splide is not active. */
+  ${({ columns, useSplideCarousel }) => !useSplideCarousel && columns === 2 && css`
     @media (min-width: ${breakpointValues.L}px) {
       display: grid;
       grid-template-columns: repeat(2, minmax(443px, 560px));
@@ -87,15 +79,25 @@ const CardsContainer = styled.div`
         display: block;
         cursor: grab;
         width: 100%;
-        margin: 0;
         max-width: 100%;
-        padding: 0.75rem 1rem;
         gap: 0;
 
+        /* We need this so that the box shadows of the cards are not clipped off */
+        .splide,
+        .splide__track {
+          overflow: visible;
+        }
+
         .splide__list {
           align-items: stretch;
         }
 
+        /* Center slides when there is no overflow (e.g. only 1–2 cards in
+        a gap where we'd probably fit 3 or more). */
+        .splide:not(.is-overflow) .splide__list {
+          justify-content: center;
+        }
+
         .splide__slide {
           display: flex;
           height: auto;
@@ -105,13 +107,11 @@ const CardsContainer = styled.div`
         flex-wrap: nowrap;
         justify-content: flex-start;
         width: 100%;
-        margin: 0;
         max-width: 100%;
         overflow-x: auto;
-        overflow-y: hidden;
+        overflow-y: visible;
         -webkit-overflow-scrolling: touch;
         scroll-snap-type: x mandatory;
-        padding: 0.75rem 1rem;
 
         scrollbar-width: none;
         -ms-overflow-style: none;
@@ -122,17 +122,5 @@ const CardsContainer = styled.div`
     }
   `}
 
-  // Desktop grid layout for XL breakpoint - 3 columns
-  @media ${({ theme }) => theme.allBreakpoints('XL')} {
-    ${({ columns }) => columns === 3 && css`
-      display: grid;
-      justify-content: center;
-      align-items: stretch;
-      grid-template-columns: repeat(3, minmax(0, 363px));
-      width: 100%;
-      margin: 0 auto;
-      max-width: 100%;
-    `}
-  }
 `;
 export default CardsContainer;

package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap

@@ -5,19 +5,19 @@ exports[`handles data structure correctly 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 ehBqzi"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 kCDlNQ"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 cVaqKX"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 gAuYUa"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -95,7 +95,7 @@ exports[`handles data structure correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -141,10 +141,10 @@ exports[`handles data structure correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -222,10 +222,10 @@ exports[`handles data structure correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"
@@ -288,19 +288,19 @@ exports[`renders 2 columns layout correctly 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 kZJZoQ"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 jrSYsC"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -378,7 +378,7 @@ exports[`renders 2 columns layout correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -424,10 +424,10 @@ exports[`renders 2 columns layout correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -505,10 +505,10 @@ exports[`renders 2 columns layout correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"
@@ -571,19 +571,19 @@ exports[`renders carousel mode correctly 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 fEcgRr"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dhfXac"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -661,7 +661,7 @@ exports[`renders carousel mode correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -707,10 +707,10 @@ exports[`renders carousel mode correctly 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -788,10 +788,10 @@ exports[`renders carousel mode correctly 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"
@@ -854,19 +854,19 @@ exports[`renders correctly with data prop 1`] = `
   className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
 >
   <div
-    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
+    className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 cVaqKX"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -944,7 +944,7 @@ exports[`renders correctly with data prop 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <div
             className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -990,10 +990,10 @@ exports[`renders correctly with data prop 1`] = `
           </div>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test"
             rel={null}
             target="self"
@@ -1071,10 +1071,10 @@ exports[`renders correctly with data prop 1`] = `
           </a>
         </div>
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
+          className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
         >
           <a
-            className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
+            className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
             href="/test-no-image"
             rel={null}
             target="self"

package/src/components/Molecules/CTA/CTAMultiCard/example_data.json

@@ -5,7 +5,7 @@
   "layout": "3 columns",
   "columnsOnMd": false,
   "paddingOptions": "Both Off",
-  "carouselOfCards": false,
+  "carouselOfCards": true,
   "cards": [
         {
           "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14",