diff --git a/src/components/ImageCarousel/ImageCarousel.example.css b/src/components/ImageCarousel/ImageCarousel.example.css
new file mode 100644
index 00000000..a4187e9e
--- /dev/null
+++ b/src/components/ImageCarousel/ImageCarousel.example.css
@@ -0,0 +1,12 @@
+@import '../../marketplace.css';
+
+.root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+
+  @media (--viewportMedium) {
+    padding: 100px 10vw;
+  }
+}
diff --git a/src/components/ImageCarousel/ImageCarousel.example.js b/src/components/ImageCarousel/ImageCarousel.example.js
index 94229a49..3831dd8e 100644
--- a/src/components/ImageCarousel/ImageCarousel.example.js
+++ b/src/components/ImageCarousel/ImageCarousel.example.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import ImageCarousel from './ImageCarousel';
+import css from './ImageCarousel.example.css';
 
 const { UUID } = sdkTypes;
 
@@ -122,15 +123,15 @@ const ImageCarouselWrapper = props => {
 
 export const NoImages = {
   component: ImageCarouselWrapper,
-  props: { images: [] },
+  props: { images: [], rootClassName: css.root },
 };
 
 export const SingleImage = {
   component: ImageCarouselWrapper,
-  props: { images: [imageSquare] },
+  props: { images: [imageSquare], rootClassName: css.root },
 };
 
 export const MultipleImages = {
   component: ImageCarouselWrapper,
-  props: { images: [imageLandscape, imagePortrait, imageSquare] },
+  props: { images: [imageLandscape, imagePortrait, imageSquare], rootClassName: css.root },
 };