diff --git a/src/components/AddImages/AddImages.example.js b/src/components/AddImages/AddImages.example.js
index 3d776bbe..24d6e9be 100644
--- a/src/components/AddImages/AddImages.example.js
+++ b/src/components/AddImages/AddImages.example.js
@@ -4,7 +4,7 @@ import findIndex from 'lodash/findIndex';
 import uniqueId from 'lodash/uniqueId';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import AddImages from './AddImages';
-import css from './AddImages.example.css';
+import css from './AddImagesExample.css';
 
 const { UUID } = sdkTypes;
 
diff --git a/src/components/AddImages/AddImages.example.css b/src/components/AddImages/AddImagesExample.css
similarity index 100%
rename from src/components/AddImages/AddImages.example.css
rename to src/components/AddImages/AddImagesExample.css
diff --git a/src/components/BookingPanel/BookingPanel.example.js b/src/components/BookingPanel/BookingPanel.example.js
index 5cabada4..0acdc0b9 100644
--- a/src/components/BookingPanel/BookingPanel.example.js
+++ b/src/components/BookingPanel/BookingPanel.example.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { createListing } from '../../util/test-data';
 import { LISTING_STATE_CLOSED } from '../../util/types';
 import BookingPanel from './BookingPanel';
-import css from './BookingPanel.example.css';
+import css from './BookingPanelExample.css';
 
 export const Default = {
   component: BookingPanel,
diff --git a/src/components/BookingPanel/BookingPanel.example.css b/src/components/BookingPanel/BookingPanelExample.css
similarity index 100%
rename from src/components/BookingPanel/BookingPanel.example.css
rename to src/components/BookingPanel/BookingPanelExample.css
diff --git a/src/components/Button/Button.example.js b/src/components/Button/Button.example.js
index 8dfadf31..bba51b55 100644
--- a/src/components/Button/Button.example.js
+++ b/src/components/Button/Button.example.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { IconCheckmark } from '../../components';
 import Button, { PrimaryButton, SecondaryButton, InlineTextButton } from './Button';
 
-import css from './Button.example.css';
+import css from './ButtonExample.css';
 
 const preventDefault = e => {
   e.preventDefault();
diff --git a/src/components/Button/Button.example.css b/src/components/Button/ButtonExample.css
similarity index 100%
rename from src/components/Button/Button.example.css
rename to src/components/Button/ButtonExample.css
diff --git a/src/components/FieldTextInput/FieldTextInput.example.js b/src/components/FieldTextInput/FieldTextInput.example.js
index 68cd4e2e..dedc504e 100644
--- a/src/components/FieldTextInput/FieldTextInput.example.js
+++ b/src/components/FieldTextInput/FieldTextInput.example.js
@@ -5,7 +5,7 @@ import * as validators from '../../util/validators';
 import { Button } from '../../components';
 import FieldTextInput from './FieldTextInput';
 
-import css from './FieldTextInput.example.css';
+import css from './FieldTextInputExample.css';
 
 const FormComponent = props => (
   <FinalForm
diff --git a/src/components/FieldTextInput/FieldTextInput.example.css b/src/components/FieldTextInput/FieldTextInputExample.css
similarity index 100%
rename from src/components/FieldTextInput/FieldTextInput.example.css
rename to src/components/FieldTextInput/FieldTextInputExample.css
diff --git a/src/components/Footer/Footer.example.js b/src/components/Footer/Footer.example.js
index 4a7da2e8..d3d567b0 100644
--- a/src/components/Footer/Footer.example.js
+++ b/src/components/Footer/Footer.example.js
@@ -1,5 +1,5 @@
 import Footer from './Footer';
-import css from './Footer.example.css';
+import css from './FooterExample.css';
 
 export const Default = {
   component: Footer,
diff --git a/src/components/Footer/Footer.example.css b/src/components/Footer/FooterExample.css
similarity index 100%
rename from src/components/Footer/Footer.example.css
rename to src/components/Footer/FooterExample.css
diff --git a/src/components/ModalInMobile/ModalInMobile.example.js b/src/components/ModalInMobile/ModalInMobile.example.js
index 76a02ddb..dc39025b 100644
--- a/src/components/ModalInMobile/ModalInMobile.example.js
+++ b/src/components/ModalInMobile/ModalInMobile.example.js
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { Button } from '../../components';
 import ModalInMobile from './ModalInMobile';
-import css from './ModalInMobile.example.css';
+import css from './ModalInMobileExample.css';
 
 const onManageDisableScrolling = (componentId, scrollingDisabled = true) => {
   // We are just checking the value for now
@@ -48,6 +48,7 @@ class ModalInMobileWrapper extends Component {
 export const Empty = {
   component: ModalInMobileWrapper,
   useDefaultWrapperStyles: false,
+  description: 'Modal feature is visible if window’s width is less than 400px.',
   props: {
     id: 'ExampleModalInMobile',
     showAsModalMaxWidth: 400,
diff --git a/src/components/ModalInMobile/ModalInMobile.example.css b/src/components/ModalInMobile/ModalInMobileExample.css
similarity index 100%
rename from src/components/ModalInMobile/ModalInMobile.example.css
rename to src/components/ModalInMobile/ModalInMobileExample.css
diff --git a/src/components/ResponsiveImage/ResponsiveImage.example.js b/src/components/ResponsiveImage/ResponsiveImage.example.js
index 4c885107..87b698f3 100644
--- a/src/components/ResponsiveImage/ResponsiveImage.example.js
+++ b/src/components/ResponsiveImage/ResponsiveImage.example.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ResponsiveImage from './ResponsiveImage';
 import { types as sdkTypes } from '../../util/sdkLoader';
 
-import css from './ResponsiveImage.example.css';
+import css from './ResponsiveImageExample.css';
 
 const { UUID } = sdkTypes;
 
diff --git a/src/components/ResponsiveImage/ResponsiveImage.example.css b/src/components/ResponsiveImage/ResponsiveImageExample.css
similarity index 100%
rename from src/components/ResponsiveImage/ResponsiveImage.example.css
rename to src/components/ResponsiveImage/ResponsiveImageExample.css