diff --git a/docs/app/Examples/elements/Header/Content/HeaderIconPropExample.js b/docs/app/Examples/elements/Header/Content/HeaderExampleIconProp.js
similarity index 63%
rename from docs/app/Examples/elements/Header/Content/HeaderIconPropExample.js
rename to docs/app/Examples/elements/Header/Content/HeaderExampleIconProp.js
index 2e7e1ce8af..1232f5ce4a 100644
--- a/docs/app/Examples/elements/Header/Content/HeaderIconPropExample.js
+++ b/docs/app/Examples/elements/Header/Content/HeaderExampleIconProp.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Header } from 'semantic-ui-react'
 
-const HeaderIconExample = () => (
+const HeaderExampleIconProp = () => (
   <Header as='h2' icon='plug' content='Uptime Guarantee' />
 )
 
-export default HeaderIconExample
+export default HeaderExampleIconProp
diff --git a/docs/app/Examples/elements/Header/Content/HeaderImageExample.js b/docs/app/Examples/elements/Header/Content/HeaderExampleImage.js
similarity index 76%
rename from docs/app/Examples/elements/Header/Content/HeaderImageExample.js
rename to docs/app/Examples/elements/Header/Content/HeaderExampleImage.js
index e703b2aa90..e3e0351b55 100644
--- a/docs/app/Examples/elements/Header/Content/HeaderImageExample.js
+++ b/docs/app/Examples/elements/Header/Content/HeaderExampleImage.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Header, Image } from 'semantic-ui-react'
 
-const HeaderImageExample = () => (
+const HeaderExampleImage = () => (
   <Header as='h2'>
     <Image shape='circular' src='http://semantic-ui.com/images/avatar2/large/patrick.png' />
     {' '}Patrick
   </Header>
 )
 
-export default HeaderImageExample
+export default HeaderExampleImage
diff --git a/docs/app/Examples/elements/Header/Content/HeaderImagePropExample.js b/docs/app/Examples/elements/Header/Content/HeaderExampleImageProp.js
similarity index 70%
rename from docs/app/Examples/elements/Header/Content/HeaderImagePropExample.js
rename to docs/app/Examples/elements/Header/Content/HeaderExampleImageProp.js
index d8b5d8b1a8..93e96a5e7a 100644
--- a/docs/app/Examples/elements/Header/Content/HeaderImagePropExample.js
+++ b/docs/app/Examples/elements/Header/Content/HeaderExampleImageProp.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header } from 'semantic-ui-react'
 
-const HeaderImageExample = () => (
+const HeaderExampleImageProp = () => (
   <Header
     as='h2'
     image='http://semantic-ui.com/images/icons/school.png'
@@ -9,4 +9,4 @@ const HeaderImageExample = () => (
   />
 )
 
-export default HeaderImageExample
+export default HeaderExampleImageProp
diff --git a/docs/app/Examples/elements/Header/Content/HeaderPlugIconExample.js b/docs/app/Examples/elements/Header/Content/HeaderExamplePlugIcon.js
similarity index 72%
rename from docs/app/Examples/elements/Header/Content/HeaderPlugIconExample.js
rename to docs/app/Examples/elements/Header/Content/HeaderExamplePlugIcon.js
index d19219236a..aca05f50e7 100644
--- a/docs/app/Examples/elements/Header/Content/HeaderPlugIconExample.js
+++ b/docs/app/Examples/elements/Header/Content/HeaderExamplePlugIcon.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header, Icon } from 'semantic-ui-react'
 
-const HeaderIconExample = () => (
+const HeaderExamplePlugIcon = () => (
   <Header as='h2'>
     <Icon name='plug' />
     <Header.Content>
@@ -10,4 +10,4 @@ const HeaderIconExample = () => (
   </Header>
 )
 
-export default HeaderIconExample
+export default HeaderExamplePlugIcon
diff --git a/docs/app/Examples/elements/Header/Content/HeaderSettingsIconExample.js b/docs/app/Examples/elements/Header/Content/HeaderExampleSettingsIcon.js
similarity index 77%
rename from docs/app/Examples/elements/Header/Content/HeaderSettingsIconExample.js
rename to docs/app/Examples/elements/Header/Content/HeaderExampleSettingsIcon.js
index fad007b993..6634db9b65 100644
--- a/docs/app/Examples/elements/Header/Content/HeaderSettingsIconExample.js
+++ b/docs/app/Examples/elements/Header/Content/HeaderExampleSettingsIcon.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header, Icon } from 'semantic-ui-react'
 
-const HeaderIconExample = () => (
+const HeaderExampleSettingsIcon = () => (
   <Header as='h2'>
     <Icon name='settings' />
     <Header.Content>
@@ -13,4 +13,4 @@ const HeaderIconExample = () => (
   </Header>
 )
 
-export default HeaderIconExample
+export default HeaderExampleSettingsIcon
diff --git a/docs/app/Examples/elements/Header/Content/HeaderSubheaderExample.js b/docs/app/Examples/elements/Header/Content/HeaderExampleSubheader.js
similarity index 75%
rename from docs/app/Examples/elements/Header/Content/HeaderSubheaderExample.js
rename to docs/app/Examples/elements/Header/Content/HeaderExampleSubheader.js
index 49160789bb..fba78ac94c 100644
--- a/docs/app/Examples/elements/Header/Content/HeaderSubheaderExample.js
+++ b/docs/app/Examples/elements/Header/Content/HeaderExampleSubheader.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header } from 'semantic-ui-react'
 
-const HeaderSubheaderExample = () => (
+const HeaderExampleSubheader = () => (
   <Header as='h2'>
     Account Settings
     <Header.Subheader>
@@ -10,4 +10,4 @@ const HeaderSubheaderExample = () => (
   </Header>
 )
 
-export default HeaderSubheaderExample
+export default HeaderExampleSubheader
diff --git a/docs/app/Examples/elements/Header/Content/HeaderSubheaderPropExample.js b/docs/app/Examples/elements/Header/Content/HeaderExampleSubheaderProp.js
similarity index 68%
rename from docs/app/Examples/elements/Header/Content/HeaderSubheaderPropExample.js
rename to docs/app/Examples/elements/Header/Content/HeaderExampleSubheaderProp.js
index 52356edc71..d284fd055f 100644
--- a/docs/app/Examples/elements/Header/Content/HeaderSubheaderPropExample.js
+++ b/docs/app/Examples/elements/Header/Content/HeaderExampleSubheaderProp.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Header } from 'semantic-ui-react'
 
-const HeaderSubheaderPropExample = () => (
+const HeaderExampleSubheaderProp = () => (
   <Header as='h2' content='Account Settings' subheader='Manage your account settings and set email preferences' />
 )
 
-export default HeaderSubheaderPropExample
+export default HeaderExampleSubheaderProp
diff --git a/docs/app/Examples/elements/Header/Content/index.js b/docs/app/Examples/elements/Header/Content/index.js
index 7e8920141f..3d7caa091f 100644
--- a/docs/app/Examples/elements/Header/Content/index.js
+++ b/docs/app/Examples/elements/Header/Content/index.js
@@ -6,33 +6,33 @@ const HeaderContentExamples = () => (
   <ExampleSection title='Content'>
     <ComponentExample
       title='Image'
-      description='A header may contain an image'
-      examplePath='elements/Header/Content/HeaderImageExample'
+      description='A header may contain an image.'
+      examplePath='elements/Header/Content/HeaderExampleImage'
     />
     <ComponentExample
-      description='You can also define an image with props'
-      examplePath='elements/Header/Content/HeaderImagePropExample'
+      description='You can also define an image with props.'
+      examplePath='elements/Header/Content/HeaderExampleImageProp'
     />
     <ComponentExample
       title='Icon'
-      description='A header may contain an icon'
-      examplePath='elements/Header/Content/HeaderPlugIconExample'
+      description='A header may contain an icon.'
+      examplePath='elements/Header/Content/HeaderExamplePlugIcon'
     />
     <ComponentExample
-      examplePath='elements/Header/Content/HeaderSettingsIconExample'
+      examplePath='elements/Header/Content/HeaderExampleSettingsIcon'
     />
     <ComponentExample
-      description='You can also define an icon with props'
-      examplePath='elements/Header/Content/HeaderIconPropExample'
+      description='You can also define an icon with props.'
+      examplePath='elements/Header/Content/HeaderExampleIconProp'
     />
     <ComponentExample
       title='Subheader'
-      description='Headers may contain subheaders'
-      examplePath='elements/Header/Content/HeaderSubheaderExample'
+      description='Headers may contain subheaders.'
+      examplePath='elements/Header/Content/HeaderExampleSubheader'
     />
     <ComponentExample
-      description='You can pass an Subheader content to the Header subheader prop'
-      examplePath='elements/Header/Content/HeaderSubheaderPropExample'
+      description='You can pass an Subheader content to the Header subheader prop.'
+      examplePath='elements/Header/Content/HeaderExampleSubheaderProp'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/elements/Header/States/HeaderDisabledExample.js b/docs/app/Examples/elements/Header/States/HeaderExampleDisabled.js
similarity index 63%
rename from docs/app/Examples/elements/Header/States/HeaderDisabledExample.js
rename to docs/app/Examples/elements/Header/States/HeaderExampleDisabled.js
index b3194e8b88..99aab795f9 100644
--- a/docs/app/Examples/elements/Header/States/HeaderDisabledExample.js
+++ b/docs/app/Examples/elements/Header/States/HeaderExampleDisabled.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Header } from 'semantic-ui-react'
 
-const HeaderDisabledExample = () => (
+const HeaderExampleDisabled = () => (
   <Header as='h2' disabled>
     Disabled Header
   </Header>
 )
 
-export default HeaderDisabledExample
+export default HeaderExampleDisabled
diff --git a/docs/app/Examples/elements/Header/States/index.js b/docs/app/Examples/elements/Header/States/index.js
index d0945ce4d0..b4d63e446e 100644
--- a/docs/app/Examples/elements/Header/States/index.js
+++ b/docs/app/Examples/elements/Header/States/index.js
@@ -6,8 +6,8 @@ const HeaderStatesExamples = () => (
   <ExampleSection title='States'>
     <ComponentExample
       title='Disabled'
-      description='A header can show that it is inactive'
-      examplePath='elements/Header/States/HeaderDisabledExample'
+      description='A header can show that it is inactive.'
+      examplePath='elements/Header/States/HeaderExampleDisabled'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/elements/Header/Types/HeaderContentHeadersExample.js b/docs/app/Examples/elements/Header/Types/HeaderExampleContent.js
similarity index 78%
rename from docs/app/Examples/elements/Header/Types/HeaderContentHeadersExample.js
rename to docs/app/Examples/elements/Header/Types/HeaderExampleContent.js
index 52f376585c..84fa05c8fd 100644
--- a/docs/app/Examples/elements/Header/Types/HeaderContentHeadersExample.js
+++ b/docs/app/Examples/elements/Header/Types/HeaderExampleContent.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header } from 'semantic-ui-react'
 
-const HeaderContentHeadersExample = () => (
+const HeaderExampleContent = () => (
   <div>
     <Header size='huge'>Huge Header</Header>
     <Header size='large'>Large Header</Header>
@@ -11,4 +11,4 @@ const HeaderContentHeadersExample = () => (
   </div>
 )
 
-export default HeaderContentHeadersExample
+export default HeaderExampleContent
diff --git a/docs/app/Examples/elements/Header/Types/HeaderPageHeadersExample.js b/docs/app/Examples/elements/Header/Types/HeaderExamplePage.js
similarity index 80%
rename from docs/app/Examples/elements/Header/Types/HeaderPageHeadersExample.js
rename to docs/app/Examples/elements/Header/Types/HeaderExamplePage.js
index dc6a1de027..0716b1edf3 100644
--- a/docs/app/Examples/elements/Header/Types/HeaderPageHeadersExample.js
+++ b/docs/app/Examples/elements/Header/Types/HeaderExamplePage.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header } from 'semantic-ui-react'
 
-const HeaderPageHeadersExamples = () => (
+const HeaderExamplePage = () => (
   <div>
     <Header as='h1'>First Header</Header>
     <Header as='h2'>Second Header</Header>
@@ -12,4 +12,4 @@ const HeaderPageHeadersExamples = () => (
   </div>
 )
 
-export default HeaderPageHeadersExamples
+export default HeaderExamplePage
diff --git a/docs/app/Examples/elements/Header/Types/HeaderSettingsIconHeaderExample.js b/docs/app/Examples/elements/Header/Types/HeaderExampleSettingsIcon.js
similarity index 76%
rename from docs/app/Examples/elements/Header/Types/HeaderSettingsIconHeaderExample.js
rename to docs/app/Examples/elements/Header/Types/HeaderExampleSettingsIcon.js
index d3dc9e5697..78bee12fcd 100644
--- a/docs/app/Examples/elements/Header/Types/HeaderSettingsIconHeaderExample.js
+++ b/docs/app/Examples/elements/Header/Types/HeaderExampleSettingsIcon.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header, Icon } from 'semantic-ui-react'
 
-const HeaderIconHeadersExample = () => (
+const HeaderExampleSettingsIcon = () => (
   <Header as='h2' icon>
     <Icon name='settings' />
     Account Settings
@@ -11,4 +11,4 @@ const HeaderIconHeadersExample = () => (
   </Header>
 )
 
-export default HeaderIconHeadersExample
+export default HeaderExampleSettingsIcon
diff --git a/docs/app/Examples/elements/Header/Types/HeaderSubHeadersExample.js b/docs/app/Examples/elements/Header/Types/HeaderExampleSubheaders.js
similarity index 64%
rename from docs/app/Examples/elements/Header/Types/HeaderSubHeadersExample.js
rename to docs/app/Examples/elements/Header/Types/HeaderExampleSubheaders.js
index 808910179e..7b2f67dc0a 100644
--- a/docs/app/Examples/elements/Header/Types/HeaderSubHeadersExample.js
+++ b/docs/app/Examples/elements/Header/Types/HeaderExampleSubheaders.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Header } from 'semantic-ui-react'
 
-const HeaderSubHeadersExample = () => (
+const HeaderExampleSubheaders = () => (
   <div>
     <Header sub>Price</Header>
     <span>$10.99</span>
   </div>
 )
 
-export default HeaderSubHeadersExample
+export default HeaderExampleSubheaders
diff --git a/docs/app/Examples/elements/Header/Types/HeaderUsersIconHeaderExample.js b/docs/app/Examples/elements/Header/Types/HeaderExampleUsersIcon.js
similarity index 81%
rename from docs/app/Examples/elements/Header/Types/HeaderUsersIconHeaderExample.js
rename to docs/app/Examples/elements/Header/Types/HeaderExampleUsersIcon.js
index 020a23e7cc..b55835b916 100644
--- a/docs/app/Examples/elements/Header/Types/HeaderUsersIconHeaderExample.js
+++ b/docs/app/Examples/elements/Header/Types/HeaderExampleUsersIcon.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header, Icon, Image } from 'semantic-ui-react'
 
-const HeaderIconHeadersExample = () => (
+const HeaderExampleUsersIcon = () => (
   <div>
     <Header as='h2' icon textAlign='center'>
       <Icon name='users' circular />
@@ -13,4 +13,4 @@ const HeaderIconHeadersExample = () => (
   </div>
 )
 
-export default HeaderIconHeadersExample
+export default HeaderExampleUsersIcon
diff --git a/docs/app/Examples/elements/Header/Types/index.js b/docs/app/Examples/elements/Header/Types/index.js
index 0eecb652b3..58ad92c50c 100644
--- a/docs/app/Examples/elements/Header/Types/index.js
+++ b/docs/app/Examples/elements/Header/Types/index.js
@@ -7,8 +7,8 @@ const HeaderTypesExamples = () => (
   <ExampleSection title='Types'>
     <ComponentExample
       title='Page Headers'
-      description='Headers may be oriented to give the hierarchy of a section in the context of the page'
-      examplePath='elements/Header/Types/HeaderPageHeadersExample'
+      description='Headers may be oriented to give the hierarchy of a section in the context of the page.'
+      examplePath='elements/Header/Types/HeaderExamplePage'
     >
       <Message info>
         Page headings are sized using <code>rem</code> and are not affected by surrounding content size.
@@ -16,8 +16,8 @@ const HeaderTypesExamples = () => (
     </ComponentExample>
     <ComponentExample
       title='Content Headers'
-      description='Headers may be oriented to give the importance of a section'
-      examplePath='elements/Header/Types/HeaderContentHeadersExample'
+      description='Headers may be oriented to give the importance of a section.'
+      examplePath='elements/Header/Types/HeaderExampleContent'
     >
       <Message info>
         Content headings are sized with <code>em</code> and are based on the font-size of their container.
@@ -25,16 +25,16 @@ const HeaderTypesExamples = () => (
     </ComponentExample>
     <ComponentExample
       title='Icon Headers'
-      description='A header can be formatted to emphasize an icon'
-      examplePath='elements/Header/Types/HeaderSettingsIconHeaderExample'
+      description='A header can be formatted to emphasize an icon.'
+      examplePath='elements/Header/Types/HeaderExampleSettingsIcon'
     />
     <ComponentExample
-      examplePath='elements/Header/Types/HeaderUsersIconHeaderExample'
+      examplePath='elements/Header/Types/HeaderExampleUsersIcon'
     />
     <ComponentExample
-      title='Sub Headers'
-      description='Headers may be formatted to label smaller or de-emphasized content'
-      examplePath='elements/Header/Types/HeaderSubHeadersExample'
+      title='Subheaders'
+      description='Headers may be formatted to label smaller or de-emphasized content.'
+      examplePath='elements/Header/Types/HeaderExampleSubheaders'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js b/docs/app/Examples/elements/Header/Variations/HeaderExampleAttached.js
similarity index 85%
rename from docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js
rename to docs/app/Examples/elements/Header/Variations/HeaderExampleAttached.js
index 1e336db878..b51ec5462b 100644
--- a/docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js
+++ b/docs/app/Examples/elements/Header/Variations/HeaderExampleAttached.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header, Segment } from 'semantic-ui-react'
 
-const HeaderAttachedExample = () => (
+const HeaderExampleAttached = () => (
   <div>
     <Header as='h2' attached='top'>
       Attached Header
@@ -14,4 +14,4 @@ const HeaderAttachedExample = () => (
   </div>
 )
 
-export default HeaderAttachedExample
+export default HeaderExampleAttached
diff --git a/docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js b/docs/app/Examples/elements/Header/Variations/HeaderExampleBlock.js
similarity index 64%
rename from docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js
rename to docs/app/Examples/elements/Header/Variations/HeaderExampleBlock.js
index a5960a9bb8..839de7e227 100644
--- a/docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js
+++ b/docs/app/Examples/elements/Header/Variations/HeaderExampleBlock.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Header } from 'semantic-ui-react'
 
-const HeaderBlockExample = () => (
+const HeaderExampleBlock = () => (
   <Header as='h3' block>
     Block Header
   </Header>
 )
 
-export default HeaderBlockExample
+export default HeaderExampleBlock
diff --git a/docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js b/docs/app/Examples/elements/Header/Variations/HeaderExampleColored.js
similarity index 90%
rename from docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js
rename to docs/app/Examples/elements/Header/Variations/HeaderExampleColored.js
index b72eabf138..688f8b0693 100644
--- a/docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js
+++ b/docs/app/Examples/elements/Header/Variations/HeaderExampleColored.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header } from 'semantic-ui-react'
 
-const HeaderColoredExample = () => (
+const HeaderExampleColored = () => (
   <div>
     <Header as='h4' color='red'>Red</Header>
     <Header as='h4' color='orange'>Orange</Header>
@@ -18,4 +18,4 @@ const HeaderColoredExample = () => (
   </div>
 )
 
-export default HeaderColoredExample
+export default HeaderExampleColored
diff --git a/docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js b/docs/app/Examples/elements/Header/Variations/HeaderExampleDividing.js
similarity index 63%
rename from docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js
rename to docs/app/Examples/elements/Header/Variations/HeaderExampleDividing.js
index 65dd75f528..d49a96e4c6 100644
--- a/docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js
+++ b/docs/app/Examples/elements/Header/Variations/HeaderExampleDividing.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Header } from 'semantic-ui-react'
 
-const HeaderDividingExample = () => (
+const HeaderExampleDividing = () => (
   <Header as='h3' dividing>
     Dividing Header
   </Header>
 )
 
-export default HeaderDividingExample
+export default HeaderExampleDividing
diff --git a/docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js b/docs/app/Examples/elements/Header/Variations/HeaderExampleFloating.js
similarity index 77%
rename from docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js
rename to docs/app/Examples/elements/Header/Variations/HeaderExampleFloating.js
index 1eb8b7a575..c1ad016823 100644
--- a/docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js
+++ b/docs/app/Examples/elements/Header/Variations/HeaderExampleFloating.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header, Segment } from 'semantic-ui-react'
 
-const HeaderFloatingExample = () => (
+const HeaderExampleFloating = () => (
   <Segment clearing>
     <Header as='h2' floated='right'>
       Float Right
@@ -12,4 +12,4 @@ const HeaderFloatingExample = () => (
   </Segment>
 )
 
-export default HeaderFloatingExample
+export default HeaderExampleFloating
diff --git a/docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js b/docs/app/Examples/elements/Header/Variations/HeaderExampleInverted.js
similarity index 91%
rename from docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js
rename to docs/app/Examples/elements/Header/Variations/HeaderExampleInverted.js
index b16d94e055..6df6e5ba27 100644
--- a/docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js
+++ b/docs/app/Examples/elements/Header/Variations/HeaderExampleInverted.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header, Segment } from 'semantic-ui-react'
 
-const HeaderInvertedExample = () => (
+const HeaderExampleInverted = () => (
   <Segment inverted>
     <Header as='h4' inverted color='red'>Red</Header>
     <Header as='h4' inverted color='orange'>Orange</Header>
@@ -18,4 +18,4 @@ const HeaderInvertedExample = () => (
   </Segment>
 )
 
-export default HeaderInvertedExample
+export default HeaderExampleInverted
diff --git a/docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js b/docs/app/Examples/elements/Header/Variations/HeaderExampleTextAlignment.js
similarity index 83%
rename from docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js
rename to docs/app/Examples/elements/Header/Variations/HeaderExampleTextAlignment.js
index f878763d7d..e86f35024c 100644
--- a/docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js
+++ b/docs/app/Examples/elements/Header/Variations/HeaderExampleTextAlignment.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Header, Segment } from 'semantic-ui-react'
 
-const HeaderTextAlignmentExample = () => (
+const HeaderExampleTextAlignment = () => (
   <Segment>
     <Header as='h3' textAlign='right'>
       Float Right
@@ -18,4 +18,4 @@ const HeaderTextAlignmentExample = () => (
   </Segment>
 )
 
-export default HeaderTextAlignmentExample
+export default HeaderExampleTextAlignment
diff --git a/docs/app/Examples/elements/Header/Variations/index.js b/docs/app/Examples/elements/Header/Variations/index.js
index 56c8a73bee..323af8bd38 100644
--- a/docs/app/Examples/elements/Header/Variations/index.js
+++ b/docs/app/Examples/elements/Header/Variations/index.js
@@ -7,41 +7,41 @@ const HeaderVariationsExamples = () => (
   <ExampleSection title='Variations'>
     <ComponentExample
       title='Dividing'
-      description='A header can be formatted to divide itself from the content below it'
-      examplePath='elements/Header/Variations/HeaderDividingExample'
+      description='A header can be formatted to divide itself from the content below it.'
+      examplePath='elements/Header/Variations/HeaderExampleDividing'
     />
     <ComponentExample
       title='Block'
-      description='A header can be formatted to appear inside a content block'
-      examplePath='elements/Header/Variations/HeaderBlockExample'
+      description='A header can be formatted to appear inside a content block.'
+      examplePath='elements/Header/Variations/HeaderExampleBlock'
     />
     <ComponentExample
       title='Attached'
-      description='A header can be attached to other content, like a segment'
-      examplePath='elements/Header/Variations/HeaderAttachedExample'
+      description='A header can be attached to other content, like a segment.'
+      examplePath='elements/Header/Variations/HeaderExampleAttached'
     />
     <ComponentExample
       title='Floating'
-      description='A header can sit to the left or right of other content'
-      examplePath='elements/Header/Variations/HeaderFloatingExample'
+      description='A header can sit to the left or right of other content.'
+      examplePath='elements/Header/Variations/HeaderExampleFloating'
     />
     <ComponentExample
       title='Text Alignment'
-      description='A header can have its text aligned to a side'
-      examplePath='elements/Header/Variations/HeaderTextAlignmentExample'
+      description='A header can have its text aligned to a side.'
+      examplePath='elements/Header/Variations/HeaderExampleTextAlignment'
     />
     <ComponentExample
       title='Colored'
-      description='A header can be formatted with different colors'
-      examplePath='elements/Header/Variations/HeaderColoredExample'
+      description='A header can be formatted with different colors.'
+      examplePath='elements/Header/Variations/HeaderExampleColored'
     />
     <ComponentExample
       title='Inverted'
-      description='A header can have its colors inverted for contrast'
-      examplePath='elements/Header/Variations/HeaderInvertedExample'
+      description='A header can have its colors inverted for contrast.'
+      examplePath='elements/Header/Variations/HeaderExampleInverted'
     >
       <Message warning>
-        Inverted headers use modified light versions of the site color scheme
+        Inverted headers use modified light versions of the site color scheme.
       </Message>
     </ComponentExample>
   </ExampleSection>