@comicrelief/component-library 8.51.5 → 8.51.7

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;
@@ -130,7 +130,7 @@ const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
 const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConfig({
   displayName: "CTACardstyle__CardWrapper",
   componentId: "sc-si8xx1-5"
-})(["width:100%;flex-shrink:0;display:flex;flex-direction:column;align-self:stretch;", " ", " ", " ", ""], _ref20 => {
+})(["width:auto;flex-shrink:0;display:flex;flex-direction:column;align-self:stretch;", " ", " ", " ", ""], _ref20 => {
   let {
     isFullWidth
   } = _ref20;
@@ -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 ", "{flex-basis:unset;width:", ";align-self:stretch;}"], _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-basis:calc(33.333% - 1rem);min-width:286px;max-width:363px;"]) : (0, _styledComponents.css)(["flex-basis:calc(50% - 1rem);min-width:443px;max-width:560px;"]);
-  }, _ref29 => {
-    let {
-      theme
-    } = _ref29;
-    return theme.allBreakpoints('XL');
-  }, _ref30 => {
-    let {
-      columns
-    } = _ref30;
-    return columns === 3 ? '363px' : '560px';
+    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%;"]);
   });
 });
 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:", ";margin-bottom:1rem;"], _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.5",
+  "version": "8.51.7",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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",
@@ -56,7 +70,7 @@ const data = {
 
 ### 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 +110,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 +122,7 @@ const dataWithLongText = {
 </div>;
 ```
 
-### CTAMultiCard: Wrap behaviour (3 columns, non-carousel)
+### CTAMultiCard: Wrap behaviour (3 columns)
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -133,12 +147,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

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
 import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
-import spacing from '../../../../theme/shared/spacing';
 
 export const CardsQueryWrapper = styled.div`
   /* Container for “single card per row” sizing.
@@ -24,11 +23,20 @@ export const CardsInner = styled.div`
   max-width: 1152px;
   margin: 0 auto;
 
-  /* Provide mobile gutters for non-carousel stack mode. */
   ${({ isCarousel }) => !isCarousel && css`
-    @media (max-width: ${breakpointValues.M - 1}px) {
-      padding-left: ${spacing('md')};
-      padding-right: ${spacing('md')};
+    padding-inline: 1rem;
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      padding-inline: 2rem;
+    }
+  `}
+
+  ${({ isCarousel }) => isCarousel && css`
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      padding-inline: 2rem;
+    }
+
+    @media (min-width: ${breakpointValues.XL}px) {
+      padding-inline: 0;
     }
   `}
 `;
@@ -45,7 +53,7 @@ const CardsContainer = styled.div`
     flex-wrap: wrap;
     justify-content: center;
     align-items: stretch;
-    width: fit-content;
+    width: 100%;
     max-width: 100%;
     margin: 0 auto;
   }
@@ -54,6 +62,28 @@ const CardsContainer = styled.div`
     column-gap: 2rem;
   }
 
+  /* 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));
+      justify-content: center;
+      align-items: stretch;
+      column-gap: 2rem;
+      row-gap: 2rem;
+      width: 100%;
+      max-width: 100%;
+      margin: 0;
+
+      /* if there's an odd "orphan" card on the last row, center it. */
+      & > *:last-child:nth-child(odd) {
+        grid-column: 1 / -1;
+        justify-self: center;
+        width: min(100%, 560px);
+      }
+    }
+  `}
+
   // Carousel mode - horizontal scroll container (M and below)
   ${({ isCarousel }) => isCarousel && css`
     @media (max-width: ${breakpointValues.L - 1}px) {
@@ -66,6 +96,12 @@ const CardsContainer = styled.div`
         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;
         }
@@ -82,7 +118,7 @@ const CardsContainer = styled.div`
         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;
@@ -96,17 +132,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

@@ -8,16 +8,16 @@ exports[`handles data structure correctly 1`] = `
     className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 ehBqzi"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 bvGqKF"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dneGvf"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 icRtAH"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          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 iHfpaV"
+          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 iHfpaV"
+          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 iHfpaV"
+          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"
@@ -291,16 +291,16 @@ exports[`renders 2 columns layout correctly 1`] = `
     className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 bvGqKF"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 jZvayd"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 bWeGAp"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iBfhjM"
+          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 iBfhjM"
+          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 iBfhjM"
+          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 iBfhjM"
+          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"
@@ -574,16 +574,16 @@ exports[`renders carousel mode correctly 1`] = `
     className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 bDNuWh"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 gPXAnw"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 hIVGPb"
+          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 hIVGPb"
+          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 hIVGPb"
+          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 hIVGPb"
+          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"
@@ -857,16 +857,16 @@ exports[`renders correctly with data prop 1`] = `
     className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
   >
     <div
-      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 bvGqKF"
+      className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
     >
       <div
-        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dneGvf"
+        className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
       >
         <div
-          className="CTACardstyle__CardWrapper-sc-si8xx1-5 iHfpaV"
+          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 iHfpaV"
+          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 iHfpaV"
+          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 iHfpaV"
+          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",

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

@@ -47,7 +47,7 @@ const exampleCard = {
   external: null
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTASingleCard data={{ card: exampleCard, backgroundColour: 'Transparent', paddingAbove: '1rem', paddingBelow: '2rem' }} />
 </div>;
 ```
@@ -63,7 +63,7 @@ const exampleCard = {
   label: 'Example Label',
   body: (
     <Text tag="p">
-      Single card with background colour set on the full-width section
+      Single card
     </Text>
   ),
   link: "/test",
@@ -76,7 +76,7 @@ const exampleCard = {
   external: null
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTASingleCard data={{ card: exampleCard, backgroundColour: 'grey_medium', paddingAbove: '1rem', paddingBelow: '2rem' }} />
 </div>;
 ```
@@ -95,7 +95,7 @@ const exampleCardWithLongText = {
   body: (
     <>
       <Text tag="p">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        Single card with background colour set on the full-width section
       </Text>
       <Text tag="p">
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

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

@@ -3,6 +3,13 @@ import styled from 'styled-components';
 export const SingleCardSection = styled.div`
   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;
+  }
   width: 100%;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
 `;