@comicrelief/component-library 7.38.0 → 7.40.0

package/dist/components/Organisms/Membership/Membership.style.js

@@ -9,7 +9,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Input = _interopRequireDefault(require("../../Atoms/Input/Input"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _size = require("../../../theme/shared/size");
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__Container",
@@ -49,7 +48,12 @@ const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.defaul
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__Wrapper",
   componentId: "sc-13acbel-2"
-})(["position:relative;max-width:320px;text-align:center;margin-bottom:50%;", "{margin:0 ", ";max-width:420px;}"], (0, _size.media)('medium'), (0, _spacing.default)('xxl'));
+})(["position:relative;max-width:320px;text-align:center;margin-bottom:50%;@media ", "{margin:0 ", ";max-width:420px;}"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('xxl'));
 const Header = exports.Header = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__Header",
   componentId: "sc-13acbel-3"
@@ -57,19 +61,24 @@ const Header = exports.Header = _styledComponents.default.div.withConfig({
 const FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__FormWrapper",
   componentId: "sc-13acbel-4"
-})(["background-color:", ";box-shadow:0px ", " ", " rgba(0,0,0,0.3);height:450px;", "{height:430px;}"], _ref6 => {
+})(["background-color:", ";box-shadow:0px ", " ", " rgba(0,0,0,0.3);height:450px;@media ", "{height:430px;}"], _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.color('white');
-}, (0, _spacing.default)('md'), (0, _spacing.default)('xl'), (0, _size.media)('medium'));
+}, (0, _spacing.default)('md'), (0, _spacing.default)('xl'), _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.allBreakpoints('L');
+});
 const Error = exports.Error = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Membershipstyle__Error",
   componentId: "sc-13acbel-5"
-})(["color:", ";font-size:", ";font-weight:500;"], _ref7 => {
+})(["color:", ";font-size:", ";font-weight:500;"], _ref9 => {
   let {
     theme
-  } = _ref7;
+  } = _ref9;
   return theme.color('red');
 }, (0, _spacing.default)('md'));
 const Form = exports.Form = _styledComponents.default.form.withConfig({
@@ -87,10 +96,10 @@ const Legend = exports.Legend = _styledComponents.default.legend.withConfig({
 const MoneyBuys = exports.MoneyBuys = _styledComponents.default.div.withConfig({
   displayName: "Membershipstyle__MoneyBuys",
   componentId: "sc-13acbel-9"
-})(["display:flex;justify-content:space-between;label{flex:0 0 30%;input{cursor:pointer;padding:", ";}:hover input{border-color:", ";}}"], (0, _spacing.default)('md'), _ref8 => {
+})(["display:flex;justify-content:space-between;label{flex:0 0 30%;input{cursor:pointer;padding:", ";}:hover input{border-color:", ";}}"], (0, _spacing.default)('md'), _ref10 => {
   let {
     theme
-  } = _ref8;
+  } = _ref10;
   return theme.color('red');
 });
 const FormFieldset = exports.FormFieldset = _styledComponents.default.div.withConfig({
@@ -104,21 +113,26 @@ const Label = exports.Label = (0, _styledComponents.default)(_Text.default).with
 const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "Membershipstyle__AmountField",
   componentId: "sc-13acbel-12"
-})(["position:relative;flex:0 0 50%;font-weight:400;display:block;", "{flex:0 0 60%;}span{position:absolute;padding:0px 15px;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;}input{border:2px solid ", ";background:transparent;padding:", " ", " ", " ", ";", " :focus{border:2px solid ", ";}}"], (0, _size.media)('medium'), _ref9 => {
+})(["position:relative;flex:0 0 50%;font-weight:400;display:block;@media ", "{flex:0 0 60%;}span{position:absolute;padding:0px 15px;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;}input{border:2px solid ", ";background:transparent;padding:", " ", " ", " ", ";", " :focus{border:2px solid ", ";}}"], _ref11 => {
   let {
     theme
-  } = _ref9;
+  } = _ref11;
+  return theme.allBreakpoints('L');
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.color('grey_medium');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref10 => {
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref13 => {
   let {
     inputBorderColor,
     theme
-  } = _ref10;
+  } = _ref13;
   return inputBorderColor && "border: 2px solid ".concat(theme.color('red'), ";");
-}, _ref11 => {
+}, _ref14 => {
   let {
     theme
-  } = _ref11;
+  } = _ref14;
   return theme.color('red');
 });
 const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withConfig({
@@ -128,25 +142,30 @@ const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withCo
 const Button = exports.Button = _styledComponents.default.button.withConfig({
   displayName: "Membershipstyle__Button",
   componentId: "sc-13acbel-14"
-})(["width:100%;color:", ";font-size:", ";font-weight:bold;cursor:pointer;padding:", " ", ";background:", ";border:none;border-radius:100px;:active,:focus,:hover{background-color:", ";}", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref12 => {
+})(["width:100%;color:", ";font-size:", ";font-weight:bold;cursor:pointer;padding:", " ", ";background:", ";border:none;border-radius:100px;:active,:focus,:hover{background-color:", ";}@media ", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref15 => {
   let {
     theme
-  } = _ref12;
+  } = _ref15;
   return theme.color('white');
-}, _ref13 => {
+}, _ref16 => {
   let {
     theme
-  } = _ref13;
+  } = _ref16;
   return theme.fontSize('s');
-}, (0, _spacing.default)('md'), (0, _spacing.default)('sm'), _ref14 => {
+}, (0, _spacing.default)('md'), (0, _spacing.default)('sm'), _ref17 => {
   let {
     theme,
     color
-  } = _ref14;
+  } = _ref17;
   return color ? theme.color(color) : theme.color('red');
-}, _ref15 => {
+}, _ref18 => {
   let {
     theme
-  } = _ref15;
+  } = _ref18;
   return theme.color('coral_dark');
-}, (0, _size.media)('medium'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
+}, _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.allBreakpoints('L');
+}, (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));

package/dist/index.js

@@ -328,6 +328,12 @@ Object.defineProperty(exports, "WYMDCarousel", {
     return _WYMDCarousel.default;
   }
 });
+Object.defineProperty(exports, "allBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _allBreakpoints.default;
+  }
+});
 Object.defineProperty(exports, "allowListed", {
   enumerable: true,
   get: function () {
@@ -414,6 +420,7 @@ var _zIndex = _interopRequireDefault(require("./theme/shared/zIndex"));
 var _allowListed = _interopRequireDefault(require("./utils/allowListed"));
 var _spacing = _interopRequireDefault(require("./theme/shared/spacing"));
 var _breakpoint = _interopRequireDefault(require("./theme/shared/breakpoint"));
+var _allBreakpoints = _interopRequireDefault(require("./theme/shared/allBreakpoints"));
 var _size = require("./theme/shared/size");
 var _Text = _interopRequireDefault(require("./components/Atoms/Text/Text"));
 var _Logo = _interopRequireDefault(require("./components/Atoms/Logo/Logo"));

package/dist/theme/shared/allContainers.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const container = {
+  small: '880px',
+  medium: '1200px',
+  large: '1440px'
+};
+var _default = exports.default = container;

package/package.json

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

package/src/components/Atoms/Button/Button.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
-import media from '../../../theme/shared/breakpoint';
 
 const StyledButton = styled.button`
   display: inline-flex;
@@ -27,7 +26,7 @@ const StyledButton = styled.button`
     width: auto;
   }
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     width: auto;
     padding: ${spacing('md')} ${spacing('l')};
     margin: 0 auto ${spacing('l')};

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import Button from './Button';
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import Button from "./Button";
 
-it('renders a standard styled link correctly', () => {
+it("renders a standard styled link correctly", () => {
   const tree = renderWithTheme(
     <Button type="submit">A standard link</Button>
   ).toJSON();
@@ -49,15 +49,17 @@ it('renders a standard styled link correctly', () => {
       color: #FFFFFF;
     }
 
-    .c0 (min-width:1024px) {
-      width: auto;
-      padding: 1rem 2rem;
-      margin: 0 auto 2rem;
+    @media (min-width:740px) {
+      .c0 {
+        width: auto;
+      }
     }
 
-    @media (min-width:740px) {
+    @media (min-width:1024px) {
       .c0 {
         width: auto;
+        padding: 1rem 2rem;
+        margin: 0 auto 2rem;
       }
     }
 

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 };