diff --git a/src/components/Organisms/RichtextCarousel/RichtextCarousel.style.js b/src/components/Organisms/RichtextCarousel/RichtextCarousel.style.js index b0c4fbb3b..5410ae7f8 100644 --- a/src/components/Organisms/RichtextCarousel/RichtextCarousel.style.js +++ b/src/components/Organisms/RichtextCarousel/RichtextCarousel.style.js @@ -53,7 +53,17 @@ const CarouselWrapper = styled.div` margin: 0 auto; border-radius: 20px; - ${defaultBoxShadow()} + ${defaultBoxShadow()} + + > div:first-child { + * { + margin-top: 0; + } + + h1, h2, h3 { + margin-bottom: 1.5rem; + } + } .carousel { position: relative; @@ -236,6 +246,16 @@ const CarouselWrapper = styled.div` align-items: center; justify-content: flex-start; flex-direction: column; + + .slide-copy-wrapper { + font-size: 0.9rem; + line-height: 0.9rem; + + * { + font-size: inherit; + line-height: inherit; + } + } } } } diff --git a/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js b/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js index e84aa0f9e..8e4afc4e9 100644 --- a/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js +++ b/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js @@ -28,6 +28,16 @@ it('renders default padding version correctly', () => { box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } + .c1 > div:first-child * { + margin-top: 0; + } + + .c1 > div:first-child h1, + .c1 > div:first-child h2, + .c1 > div:first-child h3 { + margin-bottom: 1.5rem; + } + .c1 .carousel { position: relative; margin: 0 auto; @@ -122,6 +132,16 @@ it('renders default padding version correctly', () => { flex-direction: column; } + .c1 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide .slide-copy-wrapper { + font-size: 0.9rem; + line-height: 0.9rem; + } + + .c1 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide .slide-copy-wrapper * { + font-size: inherit; + line-height: inherit; + } + .c0 { background-color: #F4F3F5; padding: 2rem 0 2rem; @@ -285,6 +305,16 @@ it('renders custom padding + background colour version correctly', () => { box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; } + .c1 > div:first-child * { + margin-top: 0; + } + + .c1 > div:first-child h1, + .c1 > div:first-child h2, + .c1 > div:first-child h3 { + margin-bottom: 1.5rem; + } + .c1 .carousel { position: relative; margin: 0 auto; @@ -379,6 +409,16 @@ it('renders custom padding + background colour version correctly', () => { flex-direction: column; } + .c1 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide .slide-copy-wrapper { + font-size: 0.9rem; + line-height: 0.9rem; + } + + .c1 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide .slide-copy-wrapper * { + font-size: inherit; + line-height: inherit; + } + .c0 { background-color: #86E4E9; padding: 4rem 0 4rem;