@comicrelief/component-library 8.48.1 → 8.48.2

package/dist/components/Molecules/CTAMultiCard/CTAMultiCard.js

@@ -31,7 +31,9 @@ const CTAMultiCard = _ref => {
     cards,
     backgroundColour: bgCards,
     layout,
-    carouselOfCards
+    carouselOfCards,
+    paddingAbove,
+    paddingBelow
   } = data;
   if (!cards || !Array.isArray(cards) || cards.length === 0) {
     return null;
@@ -44,7 +46,9 @@ const CTAMultiCard = _ref => {
   return /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsContainer, {
     backgroundColor: cardsBackground,
     columns: columns,
-    isCarousel: carouselOfCards
+    isCarousel: carouselOfCards,
+    paddingAbove: paddingAbove,
+    paddingBelow: paddingBelow
   }, cards.map(card => /*#__PURE__*/_react.default.createElement(_SingleCard.default, {
     key: card.id,
     card: card,

package/dist/components/Molecules/CTAMultiCard/CTAMultiCard.md

@@ -14,7 +14,7 @@ The component expects pre-rendered content to be passed in the `body` field of e
 
 ### CTAMultiCard: Desktop Grid View (3 columns)
 
-**NB: In mobile view, this example displays as a carousel.**
+**NB: In mobile view, this example displays as a carousel. This example also demonstrates no vertical padding via `paddingAbove` / `paddingBelow` set to `0rem`, so it will sit flush to the surrounding container.**
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -43,17 +43,19 @@ const data = {
   ...exampleData,
   cards: cardsWithRenderedBody,
   carouselOfCards: true,
-  backgroundColour: "transparent"
+  backgroundColour: "transparent",
+  paddingAbove: '0rem',
+  paddingBelow: '0rem'
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTAMultiCard data={data} />
 </div>;
 ```
 
 ### CTAMultiCard: Desktop Grid View (2 columns)
 
-**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).**
+**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.**
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -95,10 +97,12 @@ const dataWithLongText = {
   layout: "2 columns",
   carouselOfCards: false,
   backgroundColour: "Transparent",
-  cards: cardsWithRenderedBody
+  cards: cardsWithRenderedBody,
+  paddingAbove: '4rem',
+  paddingBelow: '4rem'
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTAMultiCard data={dataWithLongText} />
 </div>;
 ```

package/dist/components/Molecules/CTAMultiCard/CTAMultiCard.style.js

@@ -13,47 +13,47 @@ var _fontHelper = _interopRequireDefault(require("../../../theme/crTheme/fontHel
 const CardsContainer = exports.CardsContainer = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CardsContainer",
   componentId: "sc-qq5ca0-0"
-})(["display:flex;flex-direction:column;width:100%;background:", ";gap:1rem;", " ", " @media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:fit-content;max-width:100%;margin:0 auto;}@media ", "{display:grid;justify-content:center;grid-template-columns:", ";width:", ";margin:", ";max-width:100%;}"], _ref => {
+})(["padding-top:", ";padding-bottom:", ";display:flex;flex-direction:column;width:100%;background:", ";gap:1rem;", " @media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:fit-content;max-width:100%;margin:0 auto;}", " @media ", "{", "}"], _ref => {
   let {
-    theme,
-    backgroundColor
+    paddingAbove
   } = _ref;
-  return theme.color(backgroundColor);
+  return paddingAbove;
 }, _ref2 => {
   let {
-    isCarousel
+    paddingBelow
   } = _ref2;
-  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:row;flex-wrap:nowrap;overflow-x:visible;overflow-y:scroll;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0.75rem 0.5rem;margin-left:0.5rem;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}}"], _allBreakpoints.breakpointValues.M - 1);
+  return paddingBelow;
 }, _ref3 => {
   let {
-    isCarousel
+    theme,
+    backgroundColor
   } = _ref3;
-  return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:column;background:transparent;}"], _allBreakpoints.breakpointValues.M - 1);
+  return theme.color(backgroundColor);
 }, _ref4 => {
   let {
-    theme
+    isCarousel
   } = _ref4;
-  return theme.allBreakpoints('M');
+  return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:column;background:transparent;}"], _allBreakpoints.breakpointValues.M - 1);
 }, _ref5 => {
   let {
     theme
   } = _ref5;
-  return theme.allBreakpoints('XL');
+  return theme.allBreakpoints('M');
 }, _ref6 => {
   let {
-    columns
+    isCarousel
   } = _ref6;
-  return `repeat(${columns}, 1fr)`;
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;margin:0;max-width:100%;overflow-x:visible;overflow-y:scroll;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0.75rem 1rem;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}}"], _allBreakpoints.breakpointValues.L - 1);
 }, _ref7 => {
   let {
-    columns
+    theme
   } = _ref7;
-  return columns === 2 ? 'fit-content' : '100%';
+  return theme.allBreakpoints('XL');
 }, _ref8 => {
   let {
     columns
   } = _ref8;
-  return columns === 2 ? '0 auto' : '0';
+  return columns === 3 && (0, _styledComponents.css)(["display:grid;justify-content:center;align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:0 auto;max-width:100%;@media (min-width:1724px){grid-template-columns:repeat(3,564px);width:fit-content;}"]);
 });
 const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__ImageWrapper",
@@ -96,7 +96,7 @@ const ArrowIconWrapper = exports.ArrowIconWrapper = _styledComponents.default.di
 const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
   displayName: "CTAMultiCardstyle__CardLink",
   componentId: "sc-qq5ca0-5"
-})(["display:flex;position:relative;flex-direction:column;width:100%;height:100%;background:transparent;border-radius:1rem;box-shadow:0 0 1rem rgba(0,0,0,0.15);text-decoration:none;overflow:hidden;cursor:pointer;img{transform:scale(1.02);transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");}@media ", "{", ";&:hover{box-shadow:0 0 1.5rem rgba(0,0,0,0.25);", " img{transform:scale(1.1);}", "{color:", ";text-decoration:none;}", "{opacity:1;}", "{background:", ";}}}"], 0.4, -1.15, 2.35, _ref13 => {
+})(["display:flex;position:relative;flex-direction:column;width:100%;flex:1 1 auto;background:transparent;border-radius:1rem;box-shadow:0 0 1rem rgba(0,0,0,0.15);text-decoration:none;overflow:hidden;cursor:pointer;img{transform:scale(1.02);transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");}@media ", "{", ";&:hover{box-shadow:0 0 1.5rem rgba(0,0,0,0.25);", " img{transform:scale(1.1);}", "{color:", ";text-decoration:none;}", "{opacity:1;}", "{background:", ";}}}"], 0.4, -1.15, 2.35, _ref13 => {
   let {
     theme
   } = _ref13;
@@ -115,11 +115,11 @@ const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
 const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CardWrapper",
   componentId: "sc-qq5ca0-6"
-})(["width:100%;flex-shrink:0;display:flex;flex-direction:column;align-self:stretch;", " ", " @media ", "{flex-basis:calc(50% - 1rem);max-width:564px;height:100%;align-self:stretch;}@media ", "{flex-basis:unset;max-width:564px;height:100%;align-self:stretch;}"], _ref16 => {
+})(["width:100%;flex-shrink:0;display:flex;flex-direction:column;align-self:stretch;", " ", " @media ", "{flex-basis:calc(50% - 1rem);max-width:564px;align-self:stretch;}@media ", "{flex-basis:unset;max-width:564px;align-self:stretch;}"], _ref16 => {
   let {
     isCarousel
   } = _ref16;
-  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){scroll-snap-align:start;flex:0 0 calc(100% - 1.5rem);min-width:calc(100% - 1.5rem);max-width:calc(100% - 1.5rem);flex-shrink:0;margin-right:0.5rem;&:first-child{padding-left:0.5rem;}&:last-child{margin-right:0;padding-right:0.5rem;}}"], _allBreakpoints.breakpointValues.M - 1);
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){scroll-snap-align:start;flex:0 0 calc(100% - 1.5rem);min-width:calc(100% - 1.5rem);max-width:calc(100% - 1.5rem);flex-shrink:0;}"], _allBreakpoints.breakpointValues.L - 1);
 }, _ref17 => {
   let {
     isCarousel
@@ -127,9 +127,10 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
   return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){width:100%;}"], _allBreakpoints.breakpointValues.M - 1);
 }, _ref18 => {
   let {
-    theme
+    theme,
+    isCarousel
   } = _ref18;
-  return theme.allBreakpoints('M');
+  return theme.allBreakpoints(isCarousel ? 'L' : 'M');
 }, _ref19 => {
   let {
     theme

package/dist/components/Molecules/CTAMultiCard/SingleCard.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
-var _ArrowIcon = _interopRequireDefault(require("./ArrowIcon"));
+var _ArrowIcon = _interopRequireDefault(require("./_ArrowIcon"));
 var _alt_cta_underline = _interopRequireDefault(require("../../../theme/shared/assets/alt_cta_underline.svg"));
 var _CTAMultiCard = require("./CTAMultiCard.style");
 const SingleCard = _ref => {

package/dist/components/Molecules/CTAMultiCard/{ArrowIcon.js → _ArrowIcon.js}

@@ -8,8 +8,8 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 const StyledArrowIcon = _styledComponents.default.svg.withConfig({
-  displayName: "ArrowIcon__StyledArrowIcon",
-  componentId: "sc-jxto1w-0"
+  displayName: "_ArrowIcon__StyledArrowIcon",
+  componentId: "sc-1xqghuh-0"
 })(["display:inline-block;color:", ";fill:currentColor;"], _ref => {
   let {
     theme

package/dist/components/Molecules/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap

@@ -99,7 +99,9 @@ exports[`handles data structure correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -242,9 +244,13 @@ exports[`handles data structure correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    grid-template-columns: repeat(3,1fr);
+    -webkit-align-items: stretch;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    grid-template-columns: repeat(3,minmax(0,1fr));
     width: 100%;
-    margin: 0;
+    margin: 0 auto;
     max-width: 100%;
   }
 }
@@ -311,7 +317,6 @@ exports[`handles data structure correctly 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -324,7 +329,6 @@ exports[`handles data structure correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -661,7 +665,9 @@ exports[`renders 2 columns layout correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -798,19 +804,7 @@ exports[`renders 2 columns layout correctly 1`] = `
 }
 
 @media (min-width:1440px) {
-  .c0 {
-    display: grid;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    grid-template-columns: repeat(2,1fr);
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    margin: 0 auto;
-    max-width: 100%;
-  }
+
 }
 
 @media (min-width:740px) {
@@ -875,7 +869,6 @@ exports[`renders 2 columns layout correctly 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -888,7 +881,6 @@ exports[`renders 2 columns layout correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -1225,7 +1217,9 @@ exports[`renders carousel mode correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -1328,7 +1322,31 @@ exports[`renders carousel mode correctly 1`] = `
   }
 }
 
-@media (max-width:739px) {
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: stretch;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width:1023px) {
   .c0 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -1336,6 +1354,13 @@ exports[`renders carousel mode correctly 1`] = `
     -webkit-flex-wrap: nowrap;
     -ms-flex-wrap: nowrap;
     flex-wrap: nowrap;
+    -webkit-box-pack: start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    width: 100%;
+    margin: 0;
+    max-width: 100%;
     overflow-x: visible;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
@@ -1343,8 +1368,7 @@ exports[`renders carousel mode correctly 1`] = `
     -moz-scroll-snap-type: x mandatory;
     -ms-scroll-snap-type: x mandatory;
     scroll-snap-type: x mandatory;
-    padding: 0.75rem 0.5rem;
-    margin-left: 0.5rem;
+    padding: 0.75rem 1rem;
     -webkit-scrollbar-width: none;
     -moz-scrollbar-width: none;
     -ms-scrollbar-width: none;
@@ -1357,14 +1381,9 @@ exports[`renders carousel mode correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1440px) {
   .c0 {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
+    display: grid;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -ms-flex-pack: center;
@@ -1373,24 +1392,9 @@ exports[`renders carousel mode correctly 1`] = `
     -webkit-box-align: stretch;
     -ms-flex-align: stretch;
     align-items: stretch;
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    max-width: 100%;
-    margin: 0 auto;
-  }
-}
-
-@media (min-width:1440px) {
-  .c0 {
-    display: grid;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    grid-template-columns: repeat(3,1fr);
+    grid-template-columns: repeat(3,minmax(0,1fr));
     width: 100%;
-    margin: 0;
+    margin: 0 auto;
     max-width: 100%;
   }
 }
@@ -1445,7 +1449,7 @@ exports[`renders carousel mode correctly 1`] = `
   }
 }
 
-@media (max-width:739px) {
+@media (max-width:1023px) {
   .c1 {
     -webkit-scroll-snap-align: start;
     -moz-scroll-snap-align: start;
@@ -1459,26 +1463,15 @@ exports[`renders carousel mode correctly 1`] = `
     -webkit-flex-shrink: 0;
     -ms-flex-negative: 0;
     flex-shrink: 0;
-    margin-right: 0.5rem;
-  }
-
-  .c1:first-child {
-    padding-left: 0.5rem;
-  }
-
-  .c1:last-child {
-    margin-right: 0;
-    padding-right: 0.5rem;
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c1 {
     -webkit-flex-basis: calc(50% - 1rem);
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -1491,7 +1484,6 @@ exports[`renders carousel mode correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -1828,7 +1820,9 @@ exports[`renders correctly with data prop 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -1971,9 +1965,13 @@ exports[`renders correctly with data prop 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    grid-template-columns: repeat(3,1fr);
+    -webkit-align-items: stretch;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    grid-template-columns: repeat(3,minmax(0,1fr));
     width: 100%;
-    margin: 0;
+    margin: 0 auto;
     max-width: 100%;
   }
 }
@@ -2040,7 +2038,6 @@ exports[`renders correctly with data prop 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -2053,7 +2050,6 @@ exports[`renders correctly with data prop 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;

package/package.json

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

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

@@ -25,7 +25,9 @@ const CTAMultiCard = ({ data }) => {
     cards,
     backgroundColour: bgCards,
     layout,
-    carouselOfCards
+    carouselOfCards,
+    paddingAbove,
+    paddingBelow
   } = data;
 
   if (!cards || !Array.isArray(cards) || cards.length === 0) {
@@ -43,6 +45,8 @@ const CTAMultiCard = ({ data }) => {
       backgroundColor={cardsBackground}
       columns={columns}
       isCarousel={carouselOfCards}
+      paddingAbove={paddingAbove}
+      paddingBelow={paddingBelow}
     >
       {cards.map(card => (
         <SingleCard
@@ -87,7 +91,9 @@ CTAMultiCard.propTypes = {
     ).isRequired,
     backgroundColour: PropTypes.string,
     layout: PropTypes.string,
-    carouselOfCards: PropTypes.bool
+    carouselOfCards: PropTypes.bool,
+    paddingAbove: PropTypes.string,
+    paddingBelow: PropTypes.string
   }).isRequired
 };
 

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

@@ -14,7 +14,7 @@ The component expects pre-rendered content to be passed in the `body` field of e
 
 ### CTAMultiCard: Desktop Grid View (3 columns)
 
-**NB: In mobile view, this example displays as a carousel.**
+**NB: In mobile view, this example displays as a carousel. This example also demonstrates no vertical padding via `paddingAbove` / `paddingBelow` set to `0rem`, so it will sit flush to the surrounding container.**
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -43,17 +43,19 @@ const data = {
   ...exampleData,
   cards: cardsWithRenderedBody,
   carouselOfCards: true,
-  backgroundColour: "transparent"
+  backgroundColour: "transparent",
+  paddingAbove: '0rem',
+  paddingBelow: '0rem'
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTAMultiCard data={data} />
 </div>;
 ```
 
 ### CTAMultiCard: Desktop Grid View (2 columns)
 
-**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).**
+**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.**
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -95,10 +97,12 @@ const dataWithLongText = {
   layout: "2 columns",
   carouselOfCards: false,
   backgroundColour: "Transparent",
-  cards: cardsWithRenderedBody
+  cards: cardsWithRenderedBody,
+  paddingAbove: '4rem',
+  paddingBelow: '4rem'
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTAMultiCard data={dataWithLongText} />
 </div>;
 ```

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

@@ -4,32 +4,14 @@ import { breakpointValues } from '../../../theme/shared/allBreakpoints';
 import fontHelper from '../../../theme/crTheme/fontHelper';
 
 const CardsContainer = styled.div`
+  padding-top: ${({ paddingAbove }) => paddingAbove};
+  padding-bottom: ${({ paddingBelow }) => paddingBelow};
   display: flex;
   flex-direction: column;
   width: 100%;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
   gap: 1rem;
 
-  // Mobile carousel mode - horizontal scroll container (only on mobile, below M breakpoint)
-  ${({ isCarousel }) => isCarousel && css`
-    @media (max-width: ${breakpointValues.M - 1}px) {
-      flex-direction: row;
-      flex-wrap: nowrap;
-      overflow-x: visible;
-      overflow-y: scroll;
-      -webkit-overflow-scrolling: touch;
-      scroll-snap-type: x mandatory;
-      padding: 0.75rem 0.5rem;
-      margin-left: 0.5rem;
-
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  `}
-
   // Mobile stack mode - vertical layout (only on mobile, below M breakpoint)
   ${({ isCarousel }) => !isCarousel && css`
     @media (max-width: ${breakpointValues.M - 1}px) {
@@ -38,7 +20,7 @@ const CardsContainer = styled.div`
     }
   `}
 
-  // Desktop flexbox layout - 2 columns with centered wrap
+  // Non-mobile layout (M and above) - consistent across carousel/non-carousel, as above M we only do stacked mode.
   @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: row;
     flex-wrap: wrap;
@@ -49,14 +31,49 @@ const CardsContainer = styled.div`
     margin: 0 auto;
   }
 
+  // Carousel mode - horizontal scroll container (M and below)
+  ${({ isCarousel }) => isCarousel && css`
+    @media (max-width: ${breakpointValues.L - 1}px) {
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      width: 100%;
+      margin: 0;
+      max-width: 100%;
+      overflow-x: visible;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      scroll-snap-type: x mandatory;
+      padding: 0.75rem 1rem;
+
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  `}
+
   // Desktop grid layout for XL breakpoint - 3 columns
   @media ${({ theme }) => theme.allBreakpoints('XL')} {
-    display: grid;
-    justify-content: center;
-    grid-template-columns: ${({ columns }) => `repeat(${columns}, 1fr)`};
-    width: ${({ columns }) => (columns === 2 ? 'fit-content' : '100%')};
-    margin: ${({ columns }) => (columns === 2 ? '0 auto' : '0')};
-    max-width: 100%;
+    ${({ columns }) => columns === 3 && css`
+      display: grid;
+      justify-content: center;
+      align-items: stretch;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      width: 100%;
+      margin: 0 auto;
+      max-width: 100%;
+
+      /*
+      Above 1724px (3 * 564px which is the card max-width + 2 * 1rem), this is to stop the visible "gaps" growing
+      between the cards on really wide screens (so the only space between cards is the gap (1rem)).
+       */
+      @media (min-width: 1724px) {
+        grid-template-columns: repeat(3, 564px);
+        width: fit-content;
+      }
+    `}
   }
 `;
 
@@ -116,7 +133,7 @@ const CardLink = styled.a`
   position: relative;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
@@ -164,24 +181,14 @@ const CardWrapper = styled.div`
   flex-direction: column;
   align-self: stretch;
 
-  // Mobile carousel mode - cards at normal width in horizontal scroll (only on mobile, below M breakpoint)
+  // Carousel mode - cards at normal width in horizontal scroll (Medium and below)
   ${({ isCarousel }) => isCarousel && css`
-    @media (max-width: ${breakpointValues.M - 1}px) {
+    @media (max-width: ${breakpointValues.L - 1}px) {
       scroll-snap-align: start;
       flex: 0 0 calc(100% - 1.5rem);
       min-width: calc(100% - 1.5rem);
       max-width: calc(100% - 1.5rem);
       flex-shrink: 0;
-      margin-right: 0.5rem;
-
-      &:first-child {
-        padding-left: 0.5rem;
-      }
-
-      &:last-child {
-        margin-right: 0;
-        padding-right: 0.5rem;
-      }
     }
   `}
 
@@ -193,10 +200,10 @@ const CardWrapper = styled.div`
   `}
 
   // Desktop M breakpoint - 2 columns layout
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
+  // - when isCarousel is true we only switch to "desktop" layout at L and above
+  @media ${({ theme, isCarousel }) => theme.allBreakpoints(isCarousel ? 'L' : 'M')} {
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     align-self: stretch;
   }
 
@@ -204,7 +211,6 @@ const CardWrapper = styled.div`
   @media ${({ theme }) => theme.allBreakpoints('XL')} {
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     align-self: stretch;
   }
 `;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Picture from '../../Atoms/Picture/Picture';
-import ArrowIcon from './ArrowIcon';
+import ArrowIcon from './_ArrowIcon';
 import altCtaUnderline from '../../../theme/shared/assets/alt_cta_underline.svg';
 import {
   CardLink,

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

@@ -99,7 +99,9 @@ exports[`handles data structure correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -242,9 +244,13 @@ exports[`handles data structure correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    grid-template-columns: repeat(3,1fr);
+    -webkit-align-items: stretch;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    grid-template-columns: repeat(3,minmax(0,1fr));
     width: 100%;
-    margin: 0;
+    margin: 0 auto;
     max-width: 100%;
   }
 }
@@ -311,7 +317,6 @@ exports[`handles data structure correctly 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -324,7 +329,6 @@ exports[`handles data structure correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -661,7 +665,9 @@ exports[`renders 2 columns layout correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -798,19 +804,7 @@ exports[`renders 2 columns layout correctly 1`] = `
 }
 
 @media (min-width:1440px) {
-  .c0 {
-    display: grid;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    grid-template-columns: repeat(2,1fr);
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    margin: 0 auto;
-    max-width: 100%;
-  }
+
 }
 
 @media (min-width:740px) {
@@ -875,7 +869,6 @@ exports[`renders 2 columns layout correctly 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -888,7 +881,6 @@ exports[`renders 2 columns layout correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -1225,7 +1217,9 @@ exports[`renders carousel mode correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -1328,7 +1322,31 @@ exports[`renders carousel mode correctly 1`] = `
   }
 }
 
-@media (max-width:739px) {
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: stretch;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width:1023px) {
   .c0 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -1336,6 +1354,13 @@ exports[`renders carousel mode correctly 1`] = `
     -webkit-flex-wrap: nowrap;
     -ms-flex-wrap: nowrap;
     flex-wrap: nowrap;
+    -webkit-box-pack: start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    width: 100%;
+    margin: 0;
+    max-width: 100%;
     overflow-x: visible;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
@@ -1343,8 +1368,7 @@ exports[`renders carousel mode correctly 1`] = `
     -moz-scroll-snap-type: x mandatory;
     -ms-scroll-snap-type: x mandatory;
     scroll-snap-type: x mandatory;
-    padding: 0.75rem 0.5rem;
-    margin-left: 0.5rem;
+    padding: 0.75rem 1rem;
     -webkit-scrollbar-width: none;
     -moz-scrollbar-width: none;
     -ms-scrollbar-width: none;
@@ -1357,14 +1381,9 @@ exports[`renders carousel mode correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1440px) {
   .c0 {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
+    display: grid;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -ms-flex-pack: center;
@@ -1373,24 +1392,9 @@ exports[`renders carousel mode correctly 1`] = `
     -webkit-box-align: stretch;
     -ms-flex-align: stretch;
     align-items: stretch;
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    max-width: 100%;
-    margin: 0 auto;
-  }
-}
-
-@media (min-width:1440px) {
-  .c0 {
-    display: grid;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    grid-template-columns: repeat(3,1fr);
+    grid-template-columns: repeat(3,minmax(0,1fr));
     width: 100%;
-    margin: 0;
+    margin: 0 auto;
     max-width: 100%;
   }
 }
@@ -1445,7 +1449,7 @@ exports[`renders carousel mode correctly 1`] = `
   }
 }
 
-@media (max-width:739px) {
+@media (max-width:1023px) {
   .c1 {
     -webkit-scroll-snap-align: start;
     -moz-scroll-snap-align: start;
@@ -1459,26 +1463,15 @@ exports[`renders carousel mode correctly 1`] = `
     -webkit-flex-shrink: 0;
     -ms-flex-negative: 0;
     flex-shrink: 0;
-    margin-right: 0.5rem;
-  }
-
-  .c1:first-child {
-    padding-left: 0.5rem;
-  }
-
-  .c1:last-child {
-    margin-right: 0;
-    padding-right: 0.5rem;
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c1 {
     -webkit-flex-basis: calc(50% - 1rem);
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -1491,7 +1484,6 @@ exports[`renders carousel mode correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -1828,7 +1820,9 @@ exports[`renders correctly with data prop 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -1971,9 +1965,13 @@ exports[`renders correctly with data prop 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    grid-template-columns: repeat(3,1fr);
+    -webkit-align-items: stretch;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    grid-template-columns: repeat(3,minmax(0,1fr));
     width: 100%;
-    margin: 0;
+    margin: 0 auto;
     max-width: 100%;
   }
 }
@@ -2040,7 +2038,6 @@ exports[`renders correctly with data prop 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -2053,7 +2050,6 @@ exports[`renders correctly with data prop 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;