diff --git a/src/components/Organisms/DonateBanner/DonateBanner.js b/src/components/Organisms/DonateBanner/DonateBanner.js
index 678931858..e3c576554 100644
--- a/src/components/Organisms/DonateBanner/DonateBanner.js
+++ b/src/components/Organisms/DonateBanner/DonateBanner.js
@@ -112,14 +112,13 @@ const DonateBanner = ({
         )}
 
         <Wrapper
-          donateOrientation={donateOrientation}
           aria-live="polite"
           noTitlesAtAll={noTitlesAtAll}
           hasTopImage={shouldRenderTopImage}
-          shouldShowTitleSection={shouldShowTitleSection}
+          showTitleSection={shouldShowTitleSection}
         >
           {shouldShowTitleSection && (
-          <TitleWrapperOuter donateOrientation={donateOrientation}>
+          <TitleWrapperOuter $orientation={donateOrientation}>
             <TitleWrapperInner>
               {showCopy && (
               <>
diff --git a/src/components/Organisms/DonateBanner/DonateBanner.style.js b/src/components/Organisms/DonateBanner/DonateBanner.style.js
index 2a0003c15..94574e1b8 100644
--- a/src/components/Organisms/DonateBanner/DonateBanner.style.js
+++ b/src/components/Organisms/DonateBanner/DonateBanner.style.js
@@ -5,112 +5,17 @@ import Text from '../../Atoms/Text/Text';
 import spacing from '../../../theme/shared/spacing';
 import zIndex from '../../../theme/shared/zIndex';
 import defaultBoxShadow from '../../../theme/shared/boxShadows';
-import { playPauseReveal } from '../../../theme/shared/animations';
 
-const Container = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: auto;
-  background-color: ${({ theme, pageBackgroundColour }) => theme.color(pageBackgroundColour)};
-  width: 100%;
-  padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('md')} ${paddingBelow} ${spacing('md')}`};
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('l')} ${paddingBelow} ${spacing('l')}`};
-  }
-`;
-
-const InnerContainer = styled.div`
-  position: relative;
-  background-color: ${({ theme, componentBackgroundColour }) => theme.color(componentBackgroundColour)};
-  border-radius: 1rem;
-  overflow: hidden;
-  padding: none;
-  width: 100%;
-  box-sizing: border-box;
- ${defaultBoxShadow()}
-
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    min-height: 700px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    max-width: 1500px;
-    margin-left: auto;
-    margin-right: auto;
-
-  ${playPauseReveal}
-`;
-
-const Wrapper = styled.div`
-  position: relative;
-  text-align: center;
-  align-items: center;
-  display: block;
-  width: 100%;
-  max-width: 1216px;
-  margin-left: auto;
-  margin-right: auto;
-
-  ${({ hasTopImage, shouldShowTitleSection }) => hasTopImage && !shouldShowTitleSection && css`
-    padding: 0;
-  `}
-
-  ${({ noTitlesAtAll }) => noTitlesAtAll === true && css`
-    justify-content: center;
-  `};
-
-
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    display: flex;
-    padding: ${spacing('l')};
-    gap: ${spacing('l')};
-    flex-direction: row;
-  }
-`;
-
-const TitleWrapperOuter = styled.div`
-  width: 100%;
-  display: flex;
-  font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
-  padding-bottom: ${spacing('l')};
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    flex: 1 1 0;
-    width: auto;
-    padding: 0;
-    align-items: center;
-    order: ${({ donateOrientation }) => (donateOrientation === 'left' ? 2 : 1)};
-  }
-`;
-
-const TitleWrapperInner = styled.div`
-  position: relative;
-  text-align: left;
-`;
-
-const FormWrapper = styled.div`
-  position: relative;
-  font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    flex: 1 1 0;
-    min-width: 0;
-    width: auto;
-    display: flex;
-    justify-content: ${({ donateOrientation }) => (
-    donateOrientation === 'left' ? 'flex-start' : 'flex-end'
-  )};
-    order: ${({ donateOrientation }) => (donateOrientation === 'left' ? 1 : 2)};
-  }
-`;
-
-const Error = styled(Text)`
-  color: ${({ theme }) => theme.color('red')};
-  font-size: ${({ theme }) => theme.fontSize('s')};
-  font-weight: 500;
-  margin-top: ${spacing('l')};
-`;
+import {
+  Container,
+  InnerContainer,
+  Wrapper,
+  TitleWrapperOuter,
+  TitleWrapperInner,
+  FormWrapper,
+  Error,
+  FormFieldset
+} from '../shared/Banner.styles';
 
 const Form = styled.form`
   position: relative;
@@ -210,13 +115,6 @@ const MoneyBuys = styled.div`
   }
 `;
 
-const FormFieldset = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-`;
-
 const Label = styled(Text)`
   margin-bottom: ${spacing('sm')};
 `;
diff --git a/src/components/Organisms/DonateBanner/Form/Form.js b/src/components/Organisms/DonateBanner/Form/Form.js
index 607231535..0e580b884 100644
--- a/src/components/Organisms/DonateBanner/Form/Form.js
+++ b/src/components/Organisms/DonateBanner/Form/Form.js
@@ -200,12 +200,8 @@ const Signup = ({
   const titleTag = donateWidgetIsTextOnly ? 'h1' : 'p';
 
   return (
-    <FormWrapper
-      donateOrientation={donateOrientation}
-      shouldShowTitleSection={shouldShowTitleSection}
-    >
+    <FormWrapper $orientation={donateOrientation}>
       <Form
-        donateOrientation={donateOrientation}
         hasTopImage={hasTopImage}
         shouldShowTitleSection={shouldShowTitleSection}
         onSubmit={e => submitDonation(
diff --git a/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap b/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap
index 7b3bc9c6f..2a486ac1d 100644
--- a/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap
+++ b/src/components/Organisms/DonateBanner/__snapshots__/DonateBanner.test.js.snap
@@ -176,6 +176,13 @@ exports[`Monthly donation renders correctly 1`] = `
   box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
+.c1:hover button[data-play-pause],
+.c1:focus-within button[data-play-pause] {
+  opacity: 0.8;
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+}
+
 .c2 {
   position: relative;
   text-align: center;
@@ -195,6 +202,24 @@ exports[`Monthly donation renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
+.c15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c4 {
   position: relative;
   width: 100%;
@@ -250,24 +275,6 @@ exports[`Monthly donation renders correctly 1`] = `
   margin: 0.5rem 0 !important;
 }
 
-.c15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c17 {
   margin-bottom: 0.5rem;
 }
@@ -532,13 +539,6 @@ exports[`Monthly donation renders correctly 1`] = `
     margin-left: auto;
     margin-right: auto;
   }
-
-  .c1:hover button[data-play-pause],
-  .c1:focus-within button[data-play-pause] {
-    opacity: 0.8;
-    -webkit-transition-delay: 0s;
-    transition-delay: 0s;
-  }
 }
 
 @media (min-width:1024px) {
@@ -1048,6 +1048,13 @@ exports[`Single donation renders correctly 1`] = `
   box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
+.c1:hover button[data-play-pause],
+.c1:focus-within button[data-play-pause] {
+  opacity: 0.8;
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+}
+
 .c2 {
   position: relative;
   text-align: center;
@@ -1067,6 +1074,24 @@ exports[`Single donation renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
+.c18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c4 {
   position: relative;
   width: 100%;
@@ -1149,24 +1174,6 @@ exports[`Single donation renders correctly 1`] = `
   padding: 0.5rem 1.5rem;
 }
 
-.c18 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c20 {
   margin-bottom: 0.5rem;
 }
@@ -1333,13 +1340,6 @@ exports[`Single donation renders correctly 1`] = `
     margin-left: auto;
     margin-right: auto;
   }
-
-  .c1:hover button[data-play-pause],
-  .c1:focus-within button[data-play-pause] {
-    opacity: 0.8;
-    -webkit-transition-delay: 0s;
-    transition-delay: 0s;
-  }
 }
 
 @media (min-width:1024px) {
@@ -1856,6 +1856,13 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
+.c1:hover button[data-play-pause],
+.c1:focus-within button[data-play-pause] {
+  opacity: 0.8;
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+}
+
 .c2 {
   position: relative;
   text-align: center;
@@ -1875,6 +1882,24 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c4 {
   position: relative;
   width: 100%;
@@ -1930,24 +1955,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   margin: 0.5rem 0 !important;
 }
 
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c12 {
   margin-bottom: 0.5rem;
 }
@@ -2086,13 +2093,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
     margin-left: auto;
     margin-right: auto;
   }
-
-  .c1:hover button[data-play-pause],
-  .c1:focus-within button[data-play-pause] {
-    opacity: 0.8;
-    -webkit-transition-delay: 0s;
-    transition-delay: 0s;
-  }
 }
 
 @media (min-width:1024px) {
@@ -2546,6 +2546,13 @@ exports[`Text-only donate widget renders correctly 1`] = `
   box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
+.c1:hover button[data-play-pause],
+.c1:focus-within button[data-play-pause] {
+  opacity: 0.8;
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+}
+
 .c2 {
   position: relative;
   text-align: center;
@@ -2565,6 +2572,24 @@ exports[`Text-only donate widget renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
+.c25 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c4 {
   position: relative;
   width: 100%;
@@ -2647,24 +2672,6 @@ exports[`Text-only donate widget renders correctly 1`] = `
   padding: 0.5rem 1.5rem;
 }
 
-.c25 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c27 {
   margin-bottom: 0.5rem;
 }
@@ -3039,13 +3046,6 @@ exports[`Text-only donate widget renders correctly 1`] = `
     margin-left: auto;
     margin-right: auto;
   }
-
-  .c1:hover button[data-play-pause],
-  .c1:focus-within button[data-play-pause] {
-    opacity: 0.8;
-    -webkit-transition-delay: 0s;
-    transition-delay: 0s;
-  }
 }
 
 @media (min-width:1024px) {
diff --git a/src/components/Organisms/EmailBanner/EmailBanner.js b/src/components/Organisms/EmailBanner/EmailBanner.js
index 17e9e18ce..1dd234fee 100644
--- a/src/components/Organisms/EmailBanner/EmailBanner.js
+++ b/src/components/Organisms/EmailBanner/EmailBanner.js
@@ -90,14 +90,13 @@ const EmailBanner = ({
         )}
 
         <Wrapper
-          orientation={orientation}
           aria-live="polite"
           noTitlesAtAll={noTitlesAtAll}
           hasTopImage={shouldRenderTopImage}
           showTitleSection={showTitleSection}
         >
           {showTitleSection && (
-          <TitleWrapperOuter orientation={orientation}>
+          <TitleWrapperOuter $orientation={orientation}>
             <TitleWrapperInner $copyColor={copyColor}>
               {title && (
                 <Text
diff --git a/src/components/Organisms/EmailBanner/EmailBanner.style.js b/src/components/Organisms/EmailBanner/EmailBanner.style.js
index 28d53e136..70f76fab5 100644
--- a/src/components/Organisms/EmailBanner/EmailBanner.style.js
+++ b/src/components/Organisms/EmailBanner/EmailBanner.style.js
@@ -4,113 +4,17 @@ import fontHelper from '../../../theme/crTheme/fontHelper';
 import Text from '../../Atoms/Text/Text';
 import spacing from '../../../theme/shared/spacing';
 import defaultBoxShadow from '../../../theme/shared/boxShadows';
-import { playPauseReveal } from '../../../theme/shared/animations';
 
-const Container = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: auto;
-  background-color: ${({ theme, pageBackgroundColour }) => theme.color(pageBackgroundColour)};
-  width: 100%;
-  padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('md')} ${paddingBelow} ${spacing('md')}`};
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('l')} ${paddingBelow} ${spacing('l')}`};
-  }
-`;
-
-const InnerContainer = styled.div`
-  position: relative;
-  background-color: ${({ theme, componentBackgroundColour }) => theme.color(componentBackgroundColour)};
-  border-radius: 1rem;
-  overflow: hidden;
-  padding: none;
-  width: 100%;
-  box-sizing: border-box;
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    padding: ${spacing('l')} clamp(${spacing('l')}, 3%, ${spacing('xxl')});
-    min-height: 700px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  @media ${({ theme }) => theme.allBreakpoints('XL')} {
-    padding-left: ${spacing('xxl')};
-    padding-right: ${spacing('xxl')};
-  }
-  max-width: 1500px;
-  margin-left: auto;
-  margin-right: auto;
-
-  ${playPauseReveal}
-`;
-
-const Wrapper = styled.div`
-  position: relative;
-  text-align: center;
-  align-items: center;
-  display: block;
-  width: 100%;
-
-  ${({ hasTopImage, showTitleSection }) => hasTopImage && !showTitleSection && css`
-    padding: 0;
-  `}
-
-  ${({ noTitlesAtAll }) => noTitlesAtAll === true && css`
-    justify-content: center;
-  `};
-
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    display: flex;
-    max-width: 1216px;
-    gap: ${spacing('l')};
-    flex-direction: row;
-  }
-`;
-
-const TitleWrapperOuter = styled.div`
-  width: 100%;
-  display: flex;
-  font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
-  padding-bottom: ${spacing('l')};
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    flex: 1 1 0;
-    width: auto;
-    padding: 0;
-    align-items: center;
-    order: ${({ orientation }) => (orientation === 'left' ? 2 : 1)};
-  }
-`;
-
-const TitleWrapperInner = styled.div`
-  position: relative;
-  text-align: left;
-  ${({ $copyColor, theme }) => $copyColor && `color: ${theme.color($copyColor)};`}
-`;
-
-const FormWrapper = styled.div`
-  position: relative;
-  font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    flex: 1 1 0;
-    min-width: 0;
-    width: auto;
-    display: flex;
-    justify-content: ${({ orientation }) => (
-    orientation === 'left' ? 'flex-start' : 'flex-end'
-  )};
-    order: ${({ orientation }) => (orientation === 'left' ? 1 : 2)};
-  }
-`;
-
-const Error = styled(Text)`
-  color: ${({ theme }) => theme.color('red')};
-  font-size: ${({ theme }) => theme.fontSize('s')};
-  font-weight: 500;
-  margin-top: ${spacing('l')};
-`;
+import {
+  Container,
+  InnerContainer,
+  Wrapper,
+  TitleWrapperOuter,
+  TitleWrapperInner,
+  FormWrapper,
+  Error,
+  FormFieldset
+} from '../shared/Banner.styles';
 
 const Form = styled.form`
   position: relative;
@@ -165,13 +69,6 @@ const PrimaryTitleText = styled(Text)`
   font-family: ${({ theme, $emailWidgetIsTextOnly }) => theme.fontFamilies(($emailWidgetIsTextOnly ? 'Anton' : 'Montserrat'))};
 `;
 
-const FormFieldset = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-`;
-
 const NameWrapper = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/components/Organisms/EmailBanner/Form/Form.js b/src/components/Organisms/EmailBanner/Form/Form.js
index 99ab7faf3..4fd2a4629 100644
--- a/src/components/Organisms/EmailBanner/Form/Form.js
+++ b/src/components/Organisms/EmailBanner/Form/Form.js
@@ -49,14 +49,10 @@ const EmailForm = ({
   );
 
   return (
-    <FormWrapper
-      orientation={orientation}
-      showTitleSection={showTitleSection}
-    >
+    <FormWrapper $orientation={orientation}>
       {isSubmitSuccessful && <Confetti trigger={isSubmitSuccessful} />}
 
       <Form
-        orientation={orientation}
         hasTopImage={hasTopImage}
         showTitleSection={showTitleSection}
         onSubmit={handleSubmit(onSubmit)}
diff --git a/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap b/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap
index a99d3fc3d..d78f51182 100644
--- a/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap
+++ b/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap
@@ -206,9 +206,7 @@ exports[`Image banner left orientation renders correctly 1`] = `
   padding: none;
   width: 100%;
   box-sizing: border-box;
-  max-width: 1500px;
-  margin-left: auto;
-  margin-right: auto;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
 .c1:hover button[data-play-pause],
@@ -227,6 +225,9 @@ exports[`Image banner left orientation renders correctly 1`] = `
   align-items: center;
   display: block;
   width: 100%;
+  max-width: 1216px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .c3 {
@@ -234,6 +235,24 @@ exports[`Image banner left orientation renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c4 {
   position: relative;
   width: 100%;
@@ -273,24 +292,6 @@ exports[`Image banner left orientation renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -422,7 +423,6 @@ exports[`Image banner left orientation renders correctly 1`] = `
 
 @media (min-width:1024px) {
   .c1 {
-    padding: 2rem clamp(2rem,3%,8rem);
     min-height: 700px;
     display: -webkit-box;
     display: -webkit-flex;
@@ -435,13 +435,9 @@ exports[`Image banner left orientation renders correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-  }
-}
-
-@media (min-width:1440px) {
-  .c1 {
-    padding-left: 8rem;
-    padding-right: 8rem;
+    max-width: 1500px;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
@@ -451,7 +447,7 @@ exports[`Image banner left orientation renders correctly 1`] = `
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
-    max-width: 1216px;
+    padding: 2rem;
     gap: 2rem;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -547,17 +543,14 @@ exports[`Image banner left orientation renders correctly 1`] = `
     <div
       aria-live="polite"
       className="c2"
-      orientation="left"
     >
       <div
         className="c3"
-        orientation="left"
       >
         <form
           className="c4"
           noValidate={true}
           onSubmit={[Function]}
-          orientation="left"
         >
           <fieldset
             className="c5"
@@ -946,9 +939,7 @@ exports[`Image banner renders correctly 1`] = `
   padding: none;
   width: 100%;
   box-sizing: border-box;
-  max-width: 1500px;
-  margin-left: auto;
-  margin-right: auto;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
 .c1:hover button[data-play-pause],
@@ -967,6 +958,9 @@ exports[`Image banner renders correctly 1`] = `
   align-items: center;
   display: block;
   width: 100%;
+  max-width: 1216px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .c3 {
@@ -974,6 +968,24 @@ exports[`Image banner renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c4 {
   position: relative;
   width: 100%;
@@ -1013,24 +1025,6 @@ exports[`Image banner renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1162,7 +1156,6 @@ exports[`Image banner renders correctly 1`] = `
 
 @media (min-width:1024px) {
   .c1 {
-    padding: 2rem clamp(2rem,3%,8rem);
     min-height: 700px;
     display: -webkit-box;
     display: -webkit-flex;
@@ -1175,13 +1168,9 @@ exports[`Image banner renders correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-  }
-}
-
-@media (min-width:1440px) {
-  .c1 {
-    padding-left: 8rem;
-    padding-right: 8rem;
+    max-width: 1500px;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
@@ -1191,7 +1180,7 @@ exports[`Image banner renders correctly 1`] = `
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
-    max-width: 1216px;
+    padding: 2rem;
     gap: 2rem;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -1287,17 +1276,14 @@ exports[`Image banner renders correctly 1`] = `
     <div
       aria-live="polite"
       className="c2"
-      orientation="right"
     >
       <div
         className="c3"
-        orientation="right"
       >
         <form
           className="c4"
           noValidate={true}
           onSubmit={[Function]}
-          orientation="right"
         >
           <fieldset
             className="c5"
@@ -1686,9 +1672,7 @@ exports[`Text-only email widget renders correctly 1`] = `
   padding: none;
   width: 100%;
   box-sizing: border-box;
-  max-width: 1500px;
-  margin-left: auto;
-  margin-right: auto;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
 .c1:hover button[data-play-pause],
@@ -1707,6 +1691,9 @@ exports[`Text-only email widget renders correctly 1`] = `
   align-items: center;
   display: block;
   width: 100%;
+  max-width: 1216px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .c3 {
@@ -1714,6 +1701,24 @@ exports[`Text-only email widget renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c4 {
   position: relative;
   width: 100%;
@@ -1753,24 +1758,6 @@ exports[`Text-only email widget renders correctly 1`] = `
   font-family: 'Anton',Impact,sans-serif;
 }
 
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1902,7 +1889,6 @@ exports[`Text-only email widget renders correctly 1`] = `
 
 @media (min-width:1024px) {
   .c1 {
-    padding: 2rem clamp(2rem,3%,8rem);
     min-height: 700px;
     display: -webkit-box;
     display: -webkit-flex;
@@ -1915,13 +1901,9 @@ exports[`Text-only email widget renders correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-  }
-}
-
-@media (min-width:1440px) {
-  .c1 {
-    padding-left: 8rem;
-    padding-right: 8rem;
+    max-width: 1500px;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
@@ -1931,7 +1913,7 @@ exports[`Text-only email widget renders correctly 1`] = `
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
-    max-width: 1216px;
+    padding: 2rem;
     gap: 2rem;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -2027,17 +2009,14 @@ exports[`Text-only email widget renders correctly 1`] = `
     <div
       aria-live="polite"
       className="c2"
-      orientation="right"
     >
       <div
         className="c3"
-        orientation="right"
       >
         <form
           className="c4"
           noValidate={true}
           onSubmit={[Function]}
-          orientation="right"
         >
           <fieldset
             className="c5"
@@ -2426,9 +2405,7 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
   padding: none;
   width: 100%;
   box-sizing: border-box;
-  max-width: 1500px;
-  margin-left: auto;
-  margin-right: auto;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
 }
 
 .c1:hover button[data-play-pause],
@@ -2447,6 +2424,9 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
   align-items: center;
   display: block;
   width: 100%;
+  max-width: 1216px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .c3 {
@@ -2454,6 +2434,24 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
 .c4 {
   position: relative;
   width: 100%;
@@ -2493,24 +2491,6 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
   font-family: 'Anton',Impact,sans-serif;
 }
 
-.c10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2642,7 +2622,6 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
 
 @media (min-width:1024px) {
   .c1 {
-    padding: 2rem clamp(2rem,3%,8rem);
     min-height: 700px;
     display: -webkit-box;
     display: -webkit-flex;
@@ -2655,13 +2634,9 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-  }
-}
-
-@media (min-width:1440px) {
-  .c1 {
-    padding-left: 8rem;
-    padding-right: 8rem;
+    max-width: 1500px;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
@@ -2671,7 +2646,7 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
-    max-width: 1216px;
+    padding: 2rem;
     gap: 2rem;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -2767,17 +2742,14 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
     <div
       aria-live="polite"
       className="c2"
-      orientation="right"
     >
       <div
         className="c3"
-        orientation="right"
       >
         <form
           className="c4"
           noValidate={true}
           onSubmit={[Function]}
-          orientation="right"
         >
           <fieldset
             className="c5"
diff --git a/src/components/Organisms/shared/Banner.styles.js b/src/components/Organisms/shared/Banner.styles.js
new file mode 100644
index 000000000..ebecae390
--- /dev/null
+++ b/src/components/Organisms/shared/Banner.styles.js
@@ -0,0 +1,134 @@
+import styled, { css } from 'styled-components';
+
+import Text from '../../Atoms/Text/Text';
+import spacing from '../../../theme/shared/spacing';
+import defaultBoxShadow from '../../../theme/shared/boxShadows';
+import { playPauseReveal } from '../../../theme/shared/animations';
+
+/**
+ * Shared banner styles, currently used by EmailBanner and DonateBanner.
+ */
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  background-color: ${({ theme, pageBackgroundColour }) => theme.color(pageBackgroundColour)};
+  width: 100%;
+  padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('md')} ${paddingBelow} ${spacing('md')}`};
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    padding: ${({ paddingAbove, paddingBelow }) => `${paddingAbove} ${spacing('l')} ${paddingBelow} ${spacing('l')}`};
+  }
+`;
+
+const InnerContainer = styled.div`
+  position: relative;
+  background-color: ${({ theme, componentBackgroundColour }) => theme.color(componentBackgroundColour)};
+  border-radius: 1rem;
+  overflow: hidden;
+  padding: none;
+  width: 100%;
+  box-sizing: border-box;
+  ${defaultBoxShadow()}
+
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    min-height: 700px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 1500px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  ${playPauseReveal}
+`;
+
+const Wrapper = styled.div`
+  position: relative;
+  text-align: center;
+  align-items: center;
+  display: block;
+  width: 100%;
+  max-width: 1216px;
+  margin-left: auto;
+  margin-right: auto;
+
+  ${({ hasTopImage, showTitleSection }) => hasTopImage && !showTitleSection && css`
+    padding: 0;
+  `}
+
+  ${({ noTitlesAtAll }) => noTitlesAtAll === true && css`
+    justify-content: center;
+  `}
+
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    display: flex;
+    padding: ${spacing('l')};
+    gap: ${spacing('l')};
+    flex-direction: row;
+  }
+`;
+
+const TitleWrapperOuter = styled.div`
+  width: 100%;
+  display: flex;
+  font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
+  padding-bottom: ${spacing('l')};
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    flex: 1 1 0;
+    width: auto;
+    padding: 0;
+    align-items: center;
+    order: ${({ $orientation }) => ($orientation === 'left' ? 2 : 1)};
+  }
+`;
+
+const TitleWrapperInner = styled.div`
+  position: relative;
+  text-align: left;
+  ${({ $copyColor, theme }) => $copyColor && `color: ${theme.color($copyColor)};`}
+`;
+
+const FormWrapper = styled.div`
+  position: relative;
+  font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    flex: 1 1 0;
+    min-width: 0;
+    width: auto;
+    display: flex;
+    justify-content: ${({ $orientation }) => (
+    $orientation === 'left' ? 'flex-start' : 'flex-end'
+  )};
+    order: ${({ $orientation }) => ($orientation === 'left' ? 1 : 2)};
+  }
+`;
+
+const Error = styled(Text)`
+  color: ${({ theme }) => theme.color('red')};
+  font-size: ${({ theme }) => theme.fontSize('s')};
+  font-weight: 500;
+  margin-top: ${spacing('l')};
+`;
+
+const FormFieldset = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+`;
+
+export {
+  Container,
+  InnerContainer,
+  Wrapper,
+  TitleWrapperOuter,
+  TitleWrapperInner,
+  FormWrapper,
+  Error,
+  FormFieldset
+};