@comicrelief/component-library 7.39.0 → 7.40.0

package/dist/components/Atoms/Picture/Picture.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -7,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 require("lazysizes");
 require("lazysizes/plugins/blur-up/ls.blur-up");
 // Transparent pixel png
@@ -29,17 +31,52 @@ const Wrapper = _styledComponents.default.div.withConfig({
 const Image = _styledComponents.default.img.withConfig({
   displayName: "Picture__Image",
   componentId: "sc-1x3z81z-1"
-})(["width:", ";height:", ";display:block;object-fit:", ";", ";"], props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto', props => props.objectFit === 'none' && 'none' || props.objectFit === 'cover' && 'cover' || props.objectFit === 'contain' && 'contain', _ref3 => {
+})(["width:", ";height:", ";display:block;object-fit:", ";", ";", " ", " ", ""], props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto', props => props.objectFit === 'none' && 'none' || props.objectFit === 'cover' && 'cover' || props.objectFit === 'contain' && 'contain', _ref3 => {
   let {
     objectFit,
     objFitState
   } = _ref3;
   return objectFit !== 'none' && !objFitState && 'visibility: hidden;';
+}, _ref4 => {
+  let {
+    smallBreakpointRowLayout
+  } = _ref4;
+  return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";border-radius:", ";width:110px;height:110px;}@media ", "{padding:none;border-radius:none;width:", ";height:", ";}"], _ref5 => {
+    let {
+      theme
+    } = _ref5;
+    return theme.allBreakpoints('S');
+  }, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), _ref6 => {
+    let {
+      theme
+    } = _ref6;
+    return theme.allBreakpoints('M');
+  }, props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto');
+}, _ref7 => {
+  let {
+    mediumBreakpointRowLayout
+  } = _ref7;
+  return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";border-radius:", ";width:120px;height:120px;}"], _ref8 => {
+    let {
+      theme
+    } = _ref8;
+    return theme.allBreakpoints('M');
+  }, (0, _spacing.default)('sm'), (0, _spacing.default)('md'));
+}, _ref9 => {
+  let {
+    smallBreakpointRowLayout,
+    mediumBreakpointRowLayout
+  } = _ref9;
+  return (smallBreakpointRowLayout === true || mediumBreakpointRowLayout === true) && (0, _styledComponents.css)(["@media ", "{padding:none;border-radius:none;width:", ";height:", ";}"], _ref10 => {
+    let {
+      theme
+    } = _ref10;
+    return theme.allBreakpoints('L');
+  }, props => props.width ? props.width : '100%', props => props.height ? props.height : 'auto');
 });
 
 /** Responsive Picture */
-
-const Picture = _ref4 => {
+const Picture = _ref11 => {
   let {
     images,
     image,
@@ -49,8 +86,10 @@ const Picture = _ref4 => {
     objectFit,
     imageLow,
     isBackgroundImage,
+    smallBreakpointRowLayout,
+    mediumBreakpointRowLayout,
     ...rest
-  } = _ref4;
+  } = _ref11;
   const document = typeof window !== 'undefined' ? window.document : null;
   const [objFitState, setObjFitState] = (0, _react.useState)(true);
   let nonObjFitImage = null;
@@ -108,7 +147,9 @@ const Picture = _ref4 => {
     "data-sizes": "auto",
     "data-lowsrc": imageLow,
     className: "lazyload",
-    objFitState: objFitState
+    objFitState: objFitState,
+    smallBreakpointRowLayout: smallBreakpointRowLayout,
+    mediumBreakpointRowLayout: mediumBreakpointRowLayout
   }));
 };
 Picture.defaultProps = {
@@ -119,6 +160,8 @@ Picture.defaultProps = {
   width: '100%',
   height: 'auto',
   alt: '',
-  isBackgroundImage: false
+  isBackgroundImage: false,
+  smallBreakpointRowLayout: null,
+  mediumBreakpointRowLayout: null
 };
 var _default = exports.default = (0, _styledComponents.withTheme)(Picture);

package/dist/components/Atoms/Picture/Picture.test.js

@@ -6,7 +6,7 @@ require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _Picture = _interopRequireDefault(require("./Picture"));
 var _data = require("../../../styleguide/data/data");
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Picture.default, {
     images: _data.defaultData.images,
     image: _data.defaultData.image,
@@ -14,7 +14,7 @@ it('renders correctly', () => {
   })).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c1 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    <div\n      className=\"c0 lazyload\"\n      height=\"auto\"\n      width=\"100%\"\n    >\n      <img\n        alt=\"Test images\"\n        className=\"c1 lazyload\"\n        data-lowsrc={null}\n        data-sizes=\"auto\"\n        data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n        height=\"auto\"\n        src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n        srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n        width=\"100%\"\n      />\n    </div>\n  ");
 });
-it('renders correctly with custom props', () => {
+it("renders correctly with custom props", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Picture.default, {
     images: _data.defaultData.images,
     image: _data.defaultData.image,

package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -6,7 +6,7 @@ require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
 var _ArticleTeaser = _interopRequireDefault(require("./ArticleTeaser"));
 var _data = require("../../../styleguide/data/data");
-it('renders article teaser correctly', () => {
+it("renders article teaser correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
     href: "/test",
     images: _data.defaultData.images,
@@ -20,7 +20,7 @@ it('renders article teaser correctly', () => {
   })).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c4 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c6 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n    }\n\n    .c3 img {\n      border-radius: 1rem 1rem 0 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        -webkit-flex-direction: column;\n        -ms-flex-direction: column;\n        flex-direction: column;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c3 {\n        width: 45%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 0 0 1rem;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c3 {\n        width: 100%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 1rem 0 0;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c7 {\n        width: 55%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"100%\"\n            width=\"100%\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc={null}\n              data-sizes=\"auto\"\n              data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n              height=\"100%\"\n              src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"100%\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            News article\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
 });
-it('renders press realese correctly', () => {
+it("renders press realese correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
     href: "/test",
     category: "",

package/dist/components/Molecules/Card/Card.js

@@ -6,28 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
-var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "Card__Container",
-  componentId: "sc-15nltsw-0"
-})(["display:flex;position:relative;flex-direction:column;height:100%;border-radius:", ";overflow:hidden;background:", ";"], props => props.squaredCorners ? '0' : '1rem', _ref => {
-  let {
-    theme,
-    backgroundColor
-  } = _ref;
-  return theme.color(backgroundColor);
-});
-const Image = _styledComponents.default.div.withConfig({
-  displayName: "Card__Image",
-  componentId: "sc-15nltsw-1"
-})(["height:auto;"]);
-const Copy = _styledComponents.default.div.withConfig({
-  displayName: "Card__Copy",
-  componentId: "sc-15nltsw-2"
-})(["padding:", ";display:flex;flex-direction:column;"], (0, _spacing.default)('l'));
-const Card = _ref2 => {
+var _Card = require("./Card.style");
+const Card = _ref => {
   let {
     backgroundColor,
     imageLow,
@@ -38,20 +19,29 @@ const Card = _ref2 => {
     width,
     children,
     squaredCorners,
+    smallBreakpointRowLayout,
+    mediumBreakpointRowLayout,
     ...rest
-  } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_Card.Container, Object.assign({
     backgroundColor: backgroundColor,
-    squaredCorners: squaredCorners
-  }, rest), imageLow ? /*#__PURE__*/_react.default.createElement(Image, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
+    squaredCorners: squaredCorners,
+    smallBreakpointRowLayout: smallBreakpointRowLayout,
+    mediumBreakpointRowLayout: mediumBreakpointRowLayout
+  }, rest), imageLow ? /*#__PURE__*/_react.default.createElement(_Card.Wrapper, null, /*#__PURE__*/_react.default.createElement(_Picture.default, {
     alt: imageAltText,
     imageLow: imageLow,
     images: images,
     image: image,
     objectFit: "cover",
     width: width,
-    height: height
-  })) : null, children ? /*#__PURE__*/_react.default.createElement(Copy, null, children) : null);
+    height: height,
+    smallBreakpointRowLayout: smallBreakpointRowLayout,
+    mediumBreakpointRowLayout: mediumBreakpointRowLayout
+  })) : null, children ? /*#__PURE__*/_react.default.createElement(_Card.Copy, {
+    smallBreakpointRowLayout: smallBreakpointRowLayout,
+    mediumBreakpointRowLayout: mediumBreakpointRowLayout
+  }, children) : null);
 };
 Card.defaultProps = {
   backgroundColor: 'white',
@@ -62,6 +52,8 @@ Card.defaultProps = {
   imageAltText: '',
   width: '100%',
   height: '100%',
-  squaredCorners: false
+  squaredCorners: false,
+  smallBreakpointRowLayout: null,
+  mediumBreakpointRowLayout: null
 };
 var _default = exports.default = Card;

package/dist/components/Molecules/Card/Card.md

@@ -1,5 +1,4 @@
 # Card
-
 ```js
 const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
@@ -7,7 +6,7 @@ import Link from '../../Atoms/Link/Link';
 <Card
   imageLow={defaultData.image}
   images={defaultData.images}
-  backgroundColor="yellow"
+  backgroundColor="grey_light"
   height="auto"
 >
   <Text tag="h3" color="purple" size="xl">
@@ -17,9 +16,78 @@ import Link from '../../Atoms/Link/Link';
 </Card>;
 ```
 
+### Card - row layout on small breakpoint only
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.images}
+  backgroundColor="grey_light"
+  height="auto"
+  smallBreakpointRowLayout={true}
+  mediumBreakpointRowLayout={false}
+>
+  <Text tag="h3" color="purple" size="xl">
+    Title
+  </Text>
+  <Text tag="p">
+    Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
+  </Text>
+</Card>;
+```
+
+### Card - row layout on medium breakpoint only
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.images}
+  backgroundColor="grey_light"
+  height="auto"
+  smallBreakpointRowLayout={false}
+  mediumBreakpointRowLayout={true}
+>
+  <Text tag="h3" color="purple" size="xl">
+    Title
+  </Text>
+  <Text tag="p">
+    Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
+  </Text>
+</Card>;
+```
+
+### Card - row layout on small and medium breakpoints
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.images}
+  backgroundColor="grey_light"
+  height="auto"
+  smallBreakpointRowLayout={true}
+  mediumBreakpointRowLayout={true}
+>
+  <Text tag="h3" color="purple" size="xl">
+    Title
+  </Text>
+  <Text tag="p">
+    Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
+  </Text>
+</Card>;
+```
+
 ### Card no body
 
 ```js
 const defaultData = require('../../../styleguide/data/data').defaultData;
-<Card imageLow={defaultData.image} images={defaultData.image} />;
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.image}
+/>;
 ```

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Copy = exports.Container = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+const Container = exports.Container = _styledComponents.default.div.withConfig({
+  displayName: "Cardstyle__Container",
+  componentId: "sc-cxn4co-0"
+})(["position:relative;display:flex;@media ", "{flex-direction:", ";}@media ", "{flex-direction:", ";}@media ", "{flex-direction:column;}height:100%;border-radius:", ";overflow:hidden;background:", ";"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.allBreakpoints('S');
+}, props => props.smallBreakpointRowLayout === true ? 'row' : 'column', _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.allBreakpoints('M');
+}, props => props.mediumBreakpointRowLayout === true ? 'row' : 'column', _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.allBreakpoints('L');
+}, props => props.squaredCorners ? '0' : '1rem', _ref4 => {
+  let {
+    theme,
+    backgroundColor
+  } = _ref4;
+  return theme.color(backgroundColor);
+});
+const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "Cardstyle__Wrapper",
+  componentId: "sc-cxn4co-1"
+})(["height:auto;"]);
+const Copy = exports.Copy = _styledComponents.default.div.withConfig({
+  displayName: "Cardstyle__Copy",
+  componentId: "sc-cxn4co-2"
+})(["display:flex;flex-direction:column;padding:", ";", " ", " ", ""], (0, _spacing.default)('l'), _ref5 => {
+  let {
+    smallBreakpointRowLayout
+  } = _ref5;
+  return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1,h2,h3,h4,h5{margin:", ";}}"], _ref6 => {
+    let {
+      theme
+    } = _ref6;
+    return theme.allBreakpoints('S');
+  }, props => props.smallBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm')), props => props.smallBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm'), " 0 ").concat((0, _spacing.default)('sm')));
+}, _ref7 => {
+  let {
+    mediumBreakpointRowLayout
+  } = _ref7;
+  return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1,h2,h3,h4,h5{margin:", ";}}"], _ref8 => {
+    let {
+      theme
+    } = _ref8;
+    return theme.allBreakpoints('M');
+  }, props => props.mediumBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm')), props => props.mediumBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm'), " 0 ").concat((0, _spacing.default)('sm')));
+}, _ref9 => {
+  let {
+    smallBreakpointRowLayout,
+    mediumBreakpointRowLayout
+  } = _ref9;
+  return (smallBreakpointRowLayout === true || mediumBreakpointRowLayout === true) && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:0 0 1rem 0;}h2{margin-bottom:2rem;}h3,h4,h5{margin-bottom:1rem;}}"], _ref10 => {
+    let {
+      theme
+    } = _ref10;
+    return theme.allBreakpoints('L');
+  }, (0, _spacing.default)('l'));
+});

package/dist/components/Molecules/Card/Card.test.js

@@ -14,6 +14,16 @@ it('renders correctly', () => {
   }, /*#__PURE__*/_react.default.createElement("h2", null, "Title"), /*#__PURE__*/_react.default.createElement("p", null, "Description"))).toJSON();
   expect(tree).toMatchSnapshot();
 });
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Card.default, {
+    image: _data.defaultData.image,
+    images: _data.defaultData.image,
+    backgroundColor: "yellow",
+    smallBreakpointLayout: "Row",
+    mediumBreakpointLayout: "Row"
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "Title"), /*#__PURE__*/_react.default.createElement("p", null, "Text body copy description. Loads more text test. Loads more text test."))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
 it('renders correctly with no body', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Card.default, {
     imageLow: _data.defaultData.image,

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

@@ -2,14 +2,75 @@
 
 exports[`renders correctly 1`] = `
 .c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  border-radius: 1rem;
+  overflow: hidden;
+  background: #FFE400;
+}
+
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  padding: 2rem;
+}
+
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <h2>
+      Title
+    </h2>
+    <p>
+      Description
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders correctly 2`] = `
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   height: 100%;
   border-radius: 1rem;
   overflow: hidden;
@@ -17,7 +78,6 @@ exports[`renders correctly 1`] = `
 }
 
 .c1 {
-  padding: 2rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,6 +85,31 @@ exports[`renders correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  padding: 2rem;
+}
+
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
 }
 
 <div
@@ -37,7 +122,7 @@ exports[`renders correctly 1`] = `
       Title
     </h2>
     <p>
-      Description
+      Text body copy description. Loads more text test. Loads more text test.
     </p>
   </div>
 </div>
@@ -59,14 +144,11 @@ exports[`renders correctly with no body 1`] = `
 }
 
 .c0 {
+  position: relative;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
   height: 100%;
   border-radius: 1rem;
   overflow: hidden;
@@ -77,6 +159,30 @@ exports[`renders correctly with no body 1`] = `
   height: auto;
 }
 
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
 <div
   className="c0"
 >

package/dist/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -7,7 +7,7 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
 var _PartnerLink = _interopRequireDefault(require("./PartnerLink"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _data = require("../../../styleguide/data/data");
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_PartnerLink.default, {
     link: "https://www.comicrelief.com"
   }, /*#__PURE__*/_react.default.createElement(_Picture.default, {

package/package.json

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

package/src/components/Atoms/Picture/Picture.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import styled, { withTheme } from 'styled-components';
+import styled, { css, withTheme } from 'styled-components';
 import PropTypes from 'prop-types';
+import spacing from '../../../theme/shared/spacing';
 
 import 'lazysizes';
 import 'lazysizes/plugins/blur-up/ls.blur-up';
@@ -23,12 +24,48 @@ const Image = styled.img`
   display: block;
   object-fit: ${props => (props.objectFit === 'none' && 'none')
     || (props.objectFit === 'cover' && 'cover')
-    || (props.objectFit === 'contain' && 'contain')};  
+    || (props.objectFit === 'contain' && 'contain')};
   ${({ objectFit, objFitState }) => (objectFit !== 'none' && !objFitState) && 'visibility: hidden;'}; // Allows image to provide the container height, but make it invisible
+
+  /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS and adjust styling for row view */
+  ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout === true) && css`
+    @media ${({ theme }) => theme.allBreakpoints('S')} {
+      padding: ${spacing('sm')};
+      border-radius: ${spacing('md')};
+      width: 110px;
+      height: 110px;
+    }
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      padding: none;
+      border-radius: none;
+      width: ${props => (props.width ? props.width : '100%')};
+      height: ${props => (props.height ? props.height : 'auto')};
+    }
+  `}
+
+  /* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS and adjust styling for row view */
+  ${({ mediumBreakpointRowLayout }) => (mediumBreakpointRowLayout === true) && css`
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      padding: ${spacing('sm')};
+      border-radius: ${spacing('md')};
+      width: 120px;
+      height: 120px;
+    }
+  `}
+
+  /* Check for Cards/smallBreakpointRowLayout or mediumBreakpointRowLayout prop coming from the CMS and adjust styling back to normal */
+  ${({ smallBreakpointRowLayout, mediumBreakpointRowLayout }) => ((smallBreakpointRowLayout === true) || (mediumBreakpointRowLayout === true)) && css`
+      @media ${({ theme }) => theme.allBreakpoints('L')} {
+        padding: none;
+        border-radius: none;
+        width: ${props => (props.width ? props.width : '100%')};
+        height: ${props => (props.height ? props.height : 'auto')};
+      }
+  `}
+
 `;
 
 /** Responsive Picture */
-
 const Picture = ({
   images,
   image,
@@ -38,6 +75,8 @@ const Picture = ({
   objectFit,
   imageLow,
   isBackgroundImage,
+  smallBreakpointRowLayout,
+  mediumBreakpointRowLayout,
   ...rest
 }) => {
   const document = typeof window !== 'undefined' ? window.document : null;
@@ -109,6 +148,8 @@ const Picture = ({
         data-lowsrc={imageLow}
         className="lazyload"
         objFitState={objFitState}
+        smallBreakpointRowLayout={smallBreakpointRowLayout}
+        mediumBreakpointRowLayout={mediumBreakpointRowLayout}
       />
     </Wrapper>
   );
@@ -128,7 +169,9 @@ Picture.propTypes = {
   ]),
   width: PropTypes.string,
   height: PropTypes.string,
-  isBackgroundImage: PropTypes.bool
+  isBackgroundImage: PropTypes.bool,
+  smallBreakpointRowLayout: PropTypes.bool,
+  mediumBreakpointRowLayout: PropTypes.bool
 };
 
 Picture.defaultProps = {
@@ -139,7 +182,9 @@ Picture.defaultProps = {
   width: '100%',
   height: 'auto',
   alt: '',
-  isBackgroundImage: false
+  isBackgroundImage: false,
+  smallBreakpointRowLayout: null,
+  mediumBreakpointRowLayout: null
 };
 
 export default withTheme(Picture);

package/src/components/Atoms/Picture/Picture.test.js

@@ -1,11 +1,15 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import Picture from './Picture';
-import { defaultData } from '../../../styleguide/data/data';
-it('renders correctly', () => {
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import Picture from "./Picture";
+import { defaultData } from "../../../styleguide/data/data";
+it("renders correctly", () => {
   const tree = renderWithTheme(
-    <Picture images={defaultData.images} image={defaultData.image} alt="Test images" />
+    <Picture
+      images={defaultData.images}
+      image={defaultData.image}
+      alt="Test images"
+    />
   ).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
@@ -44,7 +48,7 @@ it('renders correctly', () => {
   `);
 });
 
-it('renders correctly with custom props', () => {
+it("renders correctly with custom props", () => {
   const tree = renderWithTheme(
     <Picture
       images={defaultData.images}

package/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import ArticleTeaser from './ArticleTeaser';
-import { defaultData } from '../../../styleguide/data/data';
-it('renders article teaser correctly', () => {
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import ArticleTeaser from "./ArticleTeaser";
+import { defaultData } from "../../../styleguide/data/data";
+it("renders article teaser correctly", () => {
   const tree = renderWithTheme(
     <ArticleTeaser
       href="/test"
@@ -258,7 +258,7 @@ it('renders article teaser correctly', () => {
   `);
 });
 
-it('renders press realese correctly', () => {
+it("renders press realese correctly", () => {
   const tree = renderWithTheme(
     <ArticleTeaser
       href="/test"

package/src/components/Molecules/Card/Card.js

@@ -1,28 +1,7 @@
 import React from 'react';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Picture from '../../Atoms/Picture/Picture';
-import spacing from '../../../theme/shared/spacing';
-
-const Container = styled.div`
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  height: 100%;
-  border-radius: ${props => (props.squaredCorners ? '0' : '1rem')};
-  overflow: hidden;
-  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-`;
-
-const Image = styled.div`
-  height: auto;
-`;
-
-const Copy = styled.div`
-  padding: ${spacing('l')};
-  display: flex;
-  flex-direction: column;
-`;
+import { Container, Wrapper, Copy } from './Card.style';
 
 const Card = ({
   backgroundColor,
@@ -34,11 +13,19 @@ const Card = ({
   width,
   children,
   squaredCorners,
+  smallBreakpointRowLayout,
+  mediumBreakpointRowLayout,
   ...rest
 }) => (
-  <Container backgroundColor={backgroundColor} squaredCorners={squaredCorners} {...rest}>
+  <Container
+    backgroundColor={backgroundColor}
+    squaredCorners={squaredCorners}
+    smallBreakpointRowLayout={smallBreakpointRowLayout}
+    mediumBreakpointRowLayout={mediumBreakpointRowLayout}
+    {...rest}
+  >
     {imageLow ? (
-      <Image>
+      <Wrapper>
         <Picture
           alt={imageAltText}
           imageLow={imageLow}
@@ -47,10 +34,20 @@ const Card = ({
           objectFit="cover"
           width={width}
           height={height}
+          smallBreakpointRowLayout={smallBreakpointRowLayout}
+          mediumBreakpointRowLayout={mediumBreakpointRowLayout}
         />
-      </Image>
+      </Wrapper>
     ) : null}
-    {children ? <Copy>{children}</Copy> : null}
+    {children
+      ? (
+        <Copy
+          smallBreakpointRowLayout={smallBreakpointRowLayout}
+          mediumBreakpointRowLayout={mediumBreakpointRowLayout}
+        >
+          {children}
+        </Copy>
+      ) : null}
   </Container>
 );
 
@@ -63,7 +60,9 @@ Card.propTypes = {
   height: PropTypes.string,
   imageAltText: PropTypes.string,
   children: PropTypes.node,
-  squaredCorners: PropTypes.bool
+  squaredCorners: PropTypes.bool,
+  smallBreakpointRowLayout: PropTypes.bool,
+  mediumBreakpointRowLayout: PropTypes.bool
 };
 
 Card.defaultProps = {
@@ -75,7 +74,9 @@ Card.defaultProps = {
   imageAltText: '',
   width: '100%',
   height: '100%',
-  squaredCorners: false
+  squaredCorners: false,
+  smallBreakpointRowLayout: null,
+  mediumBreakpointRowLayout: null
 };
 
 export default Card;

package/src/components/Molecules/Card/Card.md

@@ -1,5 +1,4 @@
 # Card
-
 ```js
 const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
@@ -7,7 +6,7 @@ import Link from '../../Atoms/Link/Link';
 <Card
   imageLow={defaultData.image}
   images={defaultData.images}
-  backgroundColor="yellow"
+  backgroundColor="grey_light"
   height="auto"
 >
   <Text tag="h3" color="purple" size="xl">
@@ -17,9 +16,78 @@ import Link from '../../Atoms/Link/Link';
 </Card>;
 ```
 
+### Card - row layout on small breakpoint only
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.images}
+  backgroundColor="grey_light"
+  height="auto"
+  smallBreakpointRowLayout={true}
+  mediumBreakpointRowLayout={false}
+>
+  <Text tag="h3" color="purple" size="xl">
+    Title
+  </Text>
+  <Text tag="p">
+    Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
+  </Text>
+</Card>;
+```
+
+### Card - row layout on medium breakpoint only
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.images}
+  backgroundColor="grey_light"
+  height="auto"
+  smallBreakpointRowLayout={false}
+  mediumBreakpointRowLayout={true}
+>
+  <Text tag="h3" color="purple" size="xl">
+    Title
+  </Text>
+  <Text tag="p">
+    Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
+  </Text>
+</Card>;
+```
+
+### Card - row layout on small and medium breakpoints
+```js
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.images}
+  backgroundColor="grey_light"
+  height="auto"
+  smallBreakpointRowLayout={true}
+  mediumBreakpointRowLayout={true}
+>
+  <Text tag="h3" color="purple" size="xl">
+    Title
+  </Text>
+  <Text tag="p">
+    Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
+  </Text>
+</Card>;
+```
+
 ### Card no body
 
 ```js
 const defaultData = require('../../../styleguide/data/data').defaultData;
-<Card imageLow={defaultData.image} images={defaultData.image} />;
+<Card
+  imageLow={defaultData.image}
+  images={defaultData.image}
+/>;
 ```

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

@@ -0,0 +1,77 @@
+import styled, { css } from 'styled-components';
+import spacing from '../../../theme/shared/spacing';
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+
+  /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS, if so make horizontal layout */
+  @media ${({ theme }) => theme.allBreakpoints('S')} {
+    flex-direction: ${props => ((props.smallBreakpointRowLayout === true) ? 'row' : 'column')};
+  }
+
+  /* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS, if so make horizontal layout */
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    flex-direction: ${props => ((props.mediumBreakpointRowLayout === true) ? 'row' : 'column')};
+  }
+
+  /* Set desktop and upwards to normal vertical layout */
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    flex-direction: column;
+  }
+
+  height: 100%;
+  border-radius: ${props => (props.squaredCorners ? '0' : '1rem')};
+  overflow: hidden;
+  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+`;
+
+const Wrapper = styled.div`
+  height: auto;
+`;
+
+const Copy = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${spacing('l')};
+
+  /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS, adjust text spacing */
+  ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout
+    === true) && css`
+    @media ${({ theme }) => theme.allBreakpoints('S')} {
+      padding: ${props => ((props.smallBreakpointRowLayout === true) && `${spacing('sm')}`)};
+      h1, h2, h3, h4, h5 {
+        margin: ${props => ((props.smallBreakpointRowLayout === true) && `${spacing('sm')} 0 ${spacing('sm')}`)};
+      }
+    }
+  `}
+
+  /* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS, adjust text spacing */
+  ${({ mediumBreakpointRowLayout }) => (mediumBreakpointRowLayout
+    === true) && css`
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      padding: ${props => ((props.mediumBreakpointRowLayout === true) && `${spacing('sm')}`)};
+      h1, h2, h3, h4, h5 {
+        margin: ${props => ((props.mediumBreakpointRowLayout === true) && `${spacing('sm')} 0 ${spacing('sm')}`)};
+      }
+    }
+  `}
+
+  /* Check for Cards/smallBreakpointRowLayout or mediumBreakpointRowLayout prop coming from the CMS and adjust styling back to normal */
+  ${({ smallBreakpointRowLayout, mediumBreakpointRowLayout }) => ((smallBreakpointRowLayout === true) || (mediumBreakpointRowLayout === true)) && css`
+      @media ${({ theme }) => theme.allBreakpoints('L')} {
+        padding: ${spacing('l')};
+        h1 {
+          margin: 0 0 1rem 0;
+        }
+        h2 {
+          margin-bottom: 2rem;
+        }
+        h3, h4, h5 {
+          margin-bottom: 1rem;
+        }
+      }
+  `}
+`;
+
+export { Container, Wrapper, Copy };

package/src/components/Molecules/Card/Card.test.js

@@ -14,6 +14,23 @@ it('renders correctly', () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('renders correctly', () => {
+  const tree = renderWithTheme(
+    <Card
+      image={defaultData.image}
+      images={defaultData.image}
+      backgroundColor="yellow"
+      smallBreakpointLayout="Row"
+      mediumBreakpointLayout="Row"
+    >
+      <h2>Title</h2>
+      <p>Text body copy description. Loads more text test. Loads more text test.</p>
+    </Card>
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
 it('renders correctly with no body', () => {
   const tree = renderWithTheme(
     <Card imageLow={defaultData.image} images={defaultData.image} backgroundColor="yellow" />

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

@@ -2,14 +2,75 @@
 
 exports[`renders correctly 1`] = `
 .c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  border-radius: 1rem;
+  overflow: hidden;
+  background: #FFE400;
+}
+
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  padding: 2rem;
+}
+
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <h2>
+      Title
+    </h2>
+    <p>
+      Description
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders correctly 2`] = `
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   height: 100%;
   border-radius: 1rem;
   overflow: hidden;
@@ -17,7 +78,6 @@ exports[`renders correctly 1`] = `
 }
 
 .c1 {
-  padding: 2rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,6 +85,31 @@ exports[`renders correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  padding: 2rem;
+}
+
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
 }
 
 <div
@@ -37,7 +122,7 @@ exports[`renders correctly 1`] = `
       Title
     </h2>
     <p>
-      Description
+      Text body copy description. Loads more text test. Loads more text test.
     </p>
   </div>
 </div>
@@ -59,14 +144,11 @@ exports[`renders correctly with no body 1`] = `
 }
 
 .c0 {
+  position: relative;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
   height: 100%;
   border-radius: 1rem;
   overflow: hidden;
@@ -77,6 +159,30 @@ exports[`renders correctly with no body 1`] = `
   height: auto;
 }
 
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
 <div
   className="c0"
 >

package/src/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -1,14 +1,18 @@
-import React from 'react';
-import 'jest-styled-components';
+import React from "react";
+import "jest-styled-components";
 
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import PartnerLink from './PartnerLink';
-import Picture from '../../Atoms/Picture/Picture';
-import { defaultData } from '../../../styleguide/data/data';
-it('renders correctly', () => {
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import PartnerLink from "./PartnerLink";
+import Picture from "../../Atoms/Picture/Picture";
+import { defaultData } from "../../../styleguide/data/data";
+it("renders correctly", () => {
   const tree = renderWithTheme(
     <PartnerLink link="https://www.comicrelief.com">
-      <Picture alt="test Image" imageLow={defaultData.imageLow} images={defaultData.images} />
+      <Picture
+        alt="test Image"
+        imageLow={defaultData.imageLow}
+        images={defaultData.images}
+      />
     </PartnerLink>
   ).toJSON();