diff --git a/docs/app/Examples/views/Item/Content/Contents.js b/docs/app/Examples/views/Item/Content/Contents.js
deleted file mode 100644
index 7418089335..0000000000
--- a/docs/app/Examples/views/Item/Content/Contents.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { Item } from 'semantic-ui-react'
-
-const { Content, Group, Image } = Item
-
-const Contents = () => (
-  <Group divided>
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-      <Content verticalAlign='middle'>Content A</Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-      <Content verticalAlign='middle'>Content B</Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-      <Content content='Content C' verticalAlign='middle' />
-    </Item>
-  </Group>
-)
-
-export default Contents
diff --git a/docs/app/Examples/views/Item/Content/Descriptions.js b/docs/app/Examples/views/Item/Content/Descriptions.js
deleted file mode 100644
index 1a966997c6..0000000000
--- a/docs/app/Examples/views/Item/Content/Descriptions.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import { Item } from 'semantic-ui-react'
-
-const { Content, Description, Group, Header, Image } = Item
-const description = [
-  'Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their',
-  'tiny stature, and even others for their massive size.',
-].join(' ')
-
-const Descriptions = () => (
-  <Group>
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content>
-        <Header as='a'>Cute Dog</Header>
-        <Description>
-          <p>{description}</p>
-          <p>
-            Many people also have their own barometers for what makes a cute dog.
-          </p>
-        </Description>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content>
-        <Header as='a'>Cute Dog</Header>
-        <Description content={description} />
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-      <Content header='Cute Dog' description={description} />
-    </Item>
-  </Group>
-)
-
-export default Descriptions
diff --git a/docs/app/Examples/views/Item/Content/ExtraContent.js b/docs/app/Examples/views/Item/Content/ExtraContent.js
deleted file mode 100644
index 77ea3f7ce1..0000000000
--- a/docs/app/Examples/views/Item/Content/ExtraContent.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react'
-import { Icon, Image as ImageComponent, Item } from 'semantic-ui-react'
-
-const { Content, Description, Extra, Group, Header, Image } = Item
-const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
-
-const ExtraContent = () => (
-  <Group>
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content>
-        <Header as='a'>Cute Dog</Header>
-        <Description>{paragraph}</Description>
-        <Extra>
-          <Icon name='green check' /> 121 Votes
-        </Extra>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content>
-        <Header as='a'>Cute Dog</Header>
-        <Description>{paragraph}</Description>
-        <Extra content='121 Votes' />
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-      <Content header='Cute Dog' extra='121 Votes' />
-    </Item>
-  </Group>
-)
-
-export default ExtraContent
diff --git a/docs/app/Examples/views/Item/Content/Headers.js b/docs/app/Examples/views/Item/Content/Headers.js
deleted file mode 100644
index f3753e1a06..0000000000
--- a/docs/app/Examples/views/Item/Content/Headers.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { Item } from 'semantic-ui-react'
-
-const { Content, Group, Header, Image } = Item
-
-const Headers = () => (
-  <Group>
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-      <Content verticalAlign='middle'>
-        <Header as='a'>12 Years a Slave</Header>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-      <Content verticalAlign='middle'>
-        <Header as='a' content='My Neighbor Totoro' />
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-      <Content header='Watchmen' verticalAlign='middle' />
-    </Item>
-  </Group>
-)
-
-export default Headers
diff --git a/docs/app/Examples/views/Item/Content/Images.js b/docs/app/Examples/views/Item/Content/Images.js
deleted file mode 100644
index c731effa11..0000000000
--- a/docs/app/Examples/views/Item/Content/Images.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import { Item } from 'semantic-ui-react'
-
-const { Group, Image } = Item
-
-const Images = () => (
-  <Group divided>
-    <Item>
-      <Image src='http://semantic-ui.com/images/wireframe/image.png' />
-    </Item>
-
-    <Item>
-      <Image src='http://semantic-ui.com/images/wireframe/image.png' />
-    </Item>
-
-    <Item image='http://semantic-ui.com/images/wireframe/image.png' />
-  </Group>
-)
-
-export default Images
diff --git a/docs/app/Examples/views/Item/Content/ItemExampleContents.js b/docs/app/Examples/views/Item/Content/ItemExampleContents.js
new file mode 100644
index 0000000000..f1ed4574f6
--- /dev/null
+++ b/docs/app/Examples/views/Item/Content/ItemExampleContents.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Item } from 'semantic-ui-react'
+
+const ItemExampleContents = () => (
+  <Item.Group divided>
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Item.Content verticalAlign='middle'>Content A</Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Item.Content verticalAlign='middle'>Content B</Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Item.Content content='Content C' verticalAlign='middle' />
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleContents
diff --git a/docs/app/Examples/views/Item/Content/ItemExampleDescriptions.js b/docs/app/Examples/views/Item/Content/ItemExampleDescriptions.js
new file mode 100644
index 0000000000..08684ebb87
--- /dev/null
+++ b/docs/app/Examples/views/Item/Content/ItemExampleDescriptions.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { Item } from 'semantic-ui-react'
+
+const description = [
+  'Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their',
+  'tiny stature, and even others for their massive size.',
+].join(' ')
+
+const ItemExampleDescriptions = () => (
+  <Item.Group>
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header as='a'>Cute Dog</Item.Header>
+        <Item.Description>
+          <p>{description}</p>
+          <p>
+            Many people also have their own barometers for what makes a cute dog.
+          </p>
+        </Item.Description>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header as='a'>Cute Dog</Item.Header>
+        <Item.Description content={description} />
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Item.Content header='Cute Dog' description={description} />
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleDescriptions
diff --git a/docs/app/Examples/views/Item/Content/ItemExampleExtraContent.js b/docs/app/Examples/views/Item/Content/ItemExampleExtraContent.js
new file mode 100644
index 0000000000..cea13527e4
--- /dev/null
+++ b/docs/app/Examples/views/Item/Content/ItemExampleExtraContent.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { Icon, Image as ImageComponent, Item } from 'semantic-ui-react'
+
+const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+
+const ItemExampleExtraContent = () => (
+  <Item.Group>
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header as='a'>Cute Dog</Item.Header>
+        <Item.Description>{paragraph}</Item.Description>
+        <Item.Extra>
+          <Icon name='green check' /> 121 Votes
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header as='a'>Cute Dog</Item.Header>
+        <Item.Description>{paragraph}</Item.Description>
+        <Item.Extra content='121 Votes' />
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Item.Content header='Cute Dog' extra='121 Votes' />
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleExtraContent
diff --git a/docs/app/Examples/views/Item/Content/ItemExampleHeaders.js b/docs/app/Examples/views/Item/Content/ItemExampleHeaders.js
new file mode 100644
index 0000000000..82c7ccdbc6
--- /dev/null
+++ b/docs/app/Examples/views/Item/Content/ItemExampleHeaders.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Item } from 'semantic-ui-react'
+
+const ItemExampleHeaders = () => (
+  <Item.Group>
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Item.Content verticalAlign='middle'>
+        <Item.Header as='a'>12 Years a Slave</Item.Header>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Item.Content verticalAlign='middle'>
+        <Item.Header as='a' content='My Neighbor Totoro' />
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Item.Content header='Watchmen' verticalAlign='middle' />
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleHeaders
diff --git a/docs/app/Examples/views/Item/Content/ItemExampleImages.js b/docs/app/Examples/views/Item/Content/ItemExampleImages.js
new file mode 100644
index 0000000000..62c631e6f4
--- /dev/null
+++ b/docs/app/Examples/views/Item/Content/ItemExampleImages.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Item } from 'semantic-ui-react'
+
+const ItemExampleImages = () => (
+  <Item.Group divided>
+    <Item>
+      <Item.Image src='http://semantic-ui.com/images/wireframe/image.png' />
+    </Item>
+
+    <Item>
+      <Item.Image src='http://semantic-ui.com/images/wireframe/image.png' />
+    </Item>
+
+    <Item image='http://semantic-ui.com/images/wireframe/image.png' />
+  </Item.Group>
+)
+
+export default ItemExampleImages
diff --git a/docs/app/Examples/views/Item/Content/ItemExampleLink.js b/docs/app/Examples/views/Item/Content/ItemExampleLink.js
new file mode 100644
index 0000000000..7b06920708
--- /dev/null
+++ b/docs/app/Examples/views/Item/Content/ItemExampleLink.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Image as ImageComponent, Item } from 'semantic-ui-react'
+
+const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+
+const ItemExampleLink = () => (
+  <Item.Group>
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header>Arrowhead Valley Camp</Item.Header>
+        <Item.Meta>
+          <span className='price'>$1200</span>
+          <span className='stay'>1 Month</span>
+        </Item.Meta>
+        <Item.Description>{paragraph}</Item.Description>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header>Buck's Homebrew Stayaway</Item.Header>
+        <Item.Meta content='$1000 2 Weeks' />
+        <Item.Description>{paragraph}</Item.Description>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Item.Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleLink
diff --git a/docs/app/Examples/views/Item/Content/ItemExampleMetadata.js b/docs/app/Examples/views/Item/Content/ItemExampleMetadata.js
new file mode 100644
index 0000000000..2259fdb7fe
--- /dev/null
+++ b/docs/app/Examples/views/Item/Content/ItemExampleMetadata.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Image as ImageComponent, Item } from 'semantic-ui-react'
+
+const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+
+const ItemExampleMetadata = () => (
+  <Item.Group>
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header>Arrowhead Valley Camp</Item.Header>
+        <Item.Meta>
+          <span className='price'>$1200</span>
+          <span className='stay'>1 Month</span>
+        </Item.Meta>
+        <Item.Description>{paragraph}</Item.Description>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header>Buck's Homebrew Stayaway</Item.Header>
+        <Item.Meta content='$1000 2 Weeks' />
+        <Item.Description>{paragraph}</Item.Description>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Item.Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleMetadata
diff --git a/docs/app/Examples/views/Item/Content/ItemExampleRatings.js b/docs/app/Examples/views/Item/Content/ItemExampleRatings.js
new file mode 100644
index 0000000000..789894841a
--- /dev/null
+++ b/docs/app/Examples/views/Item/Content/ItemExampleRatings.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Icon, Item } from 'semantic-ui-react'
+
+const ItemExampleRatings = () => (
+  <Item.Group>
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/avatar/large/jenny.jpg' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header>
+          <Icon name='like' />
+          Veronika Ossi
+        </Item.Header>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/avatar/large/justen.jpg' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header>
+          <Icon name='favorite' />
+          Justen Kitsune
+        </Item.Header>
+      </Item.Content>
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleRatings
diff --git a/docs/app/Examples/views/Item/Content/Link.js b/docs/app/Examples/views/Item/Content/Link.js
deleted file mode 100644
index 254ba28e2b..0000000000
--- a/docs/app/Examples/views/Item/Content/Link.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react'
-import { Image as ImageComponent, Item } from 'semantic-ui-react'
-
-const { Content, Description, Group, Header, Image, Meta } = Item
-const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
-
-const Link = () => (
-  <Group>
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content>
-        <Header>Arrowhead Valley Camp</Header>
-        <Meta>
-          <span className='price'>$1200</span>
-          <span className='stay'>1 Month</span>
-        </Meta>
-        <Description>{paragraph}</Description>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content>
-        <Header>Buck's Homebrew Stayaway</Header>
-        <Meta content='$1000 2 Weeks' />
-        <Description>{paragraph}</Description>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-      <Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
-    </Item>
-  </Group>
-)
-
-export default Link
diff --git a/docs/app/Examples/views/Item/Content/Metadata.js b/docs/app/Examples/views/Item/Content/Metadata.js
deleted file mode 100644
index e9aea0e3b9..0000000000
--- a/docs/app/Examples/views/Item/Content/Metadata.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react'
-import { Image as ImageComponent, Item } from 'semantic-ui-react'
-
-const { Content, Description, Group, Header, Image, Meta } = Item
-const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
-
-const Metadata = () => (
-  <Group>
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content>
-        <Header>Arrowhead Valley Camp</Header>
-        <Meta>
-          <span className='price'>$1200</span>
-          <span className='stay'>1 Month</span>
-        </Meta>
-        <Description>{paragraph}</Description>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content>
-        <Header>Buck's Homebrew Stayaway</Header>
-        <Meta content='$1000 2 Weeks' />
-        <Description>{paragraph}</Description>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-      <Content header='Arrowhead Valley Camp' meta='$1200 1 Month' />
-    </Item>
-  </Group>
-)
-
-export default Metadata
diff --git a/docs/app/Examples/views/Item/Content/Ratings.js b/docs/app/Examples/views/Item/Content/Ratings.js
deleted file mode 100644
index 7cd8ec2f16..0000000000
--- a/docs/app/Examples/views/Item/Content/Ratings.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import { Icon, Item } from 'semantic-ui-react'
-
-const { Content, Group, Header, Image } = Item
-
-const Ratings = () => (
-  <Group>
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/avatar/large/jenny.jpg' />
-
-      <Content verticalAlign='middle'>
-        <Header>
-          <Icon name='like' />
-          Veronika Ossi
-        </Header>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/avatar/large/justen.jpg' />
-
-      <Content verticalAlign='middle'>
-        <Header>
-          <Icon name='favorite' />
-          Justen Kitsune
-        </Header>
-      </Content>
-    </Item>
-  </Group>
-)
-
-export default Ratings
diff --git a/docs/app/Examples/views/Item/Content/index.js b/docs/app/Examples/views/Item/Content/index.js
index 1243990e84..623e3781d3 100644
--- a/docs/app/Examples/views/Item/Content/index.js
+++ b/docs/app/Examples/views/Item/Content/index.js
@@ -7,50 +7,50 @@ const Content = () => (
   <ExampleSection title='Content'>
     <ComponentExample
       title='Image'
-      description='An item can contain an image'
-      examplePath='views/Item/Content/Images'
+      description='An item can contain an image.'
+      examplePath='views/Item/Content/ItemExampleImages'
     />
 
     <ComponentExample
       title='Content'
-      description='An item can contain content'
-      examplePath='views/Item/Content/Contents'
+      description='An item can contain content.'
+      examplePath='views/Item/Content/ItemExampleContents'
     />
 
     <ComponentExample
       title='Header'
-      description='An item can contain a header'
-      examplePath='views/Item/Content/Headers'
+      description='An item can contain a header.'
+      examplePath='views/Item/Content/ItemExampleHeaders'
     />
 
     <ComponentExample
       title='Metadata'
-      description='An item can contain a header'
-      examplePath='views/Item/Content/Metadata'
+      description='An item can contain a header.'
+      examplePath='views/Item/Content/ItemExampleMetadata'
     />
 
     <ComponentExample
       title='Link'
-      description='An item can contain contain links as images, headers, or inside content'
-      examplePath='views/Item/Content/Link'
+      description='An item can contain contain links as images, headers, or inside content.'
+      examplePath='views/Item/Content/ItemExampleLink'
     />
 
     <ComponentExample
       title='Description'
-      description='An item can contain contain links as images, headers, or inside content'
-      examplePath='views/Item/Content/Descriptions'
+      description='An item can contain contain links as images, headers, or inside content.'
+      examplePath='views/Item/Content/ItemExampleDescriptions'
     />
 
     <ComponentExample
       title='Extra Content'
-      description='An item can contain contain links as images, headers, or inside content'
-      examplePath='views/Item/Content/ExtraContent'
+      description='An item can contain contain links as images, headers, or inside content.'
+      examplePath='views/Item/Content/ItemExampleExtraContent'
     />
 
     <ComponentExample
       title='Rating'
-      description='An item can contain icons signifying a "like" or "favorite" action'
-      examplePath='views/Item/Content/Ratings'
+      description='An item can contain icons signifying a "like" or "favorite" action.'
+      examplePath='views/Item/Content/ItemExampleRatings'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/views/Item/Types/Items.js b/docs/app/Examples/views/Item/Types/ItemExampleItems.js
similarity index 93%
rename from docs/app/Examples/views/Item/Types/Items.js
rename to docs/app/Examples/views/Item/Types/ItemExampleItems.js
index af17872755..c6aca0c90e 100644
--- a/docs/app/Examples/views/Item/Types/Items.js
+++ b/docs/app/Examples/views/Item/Types/ItemExampleItems.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Image, Item } from 'semantic-ui-react'
 
-const Items = () => (
+const ItemExampleItems = () => (
   <Item.Group>
     <Item>
       <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
@@ -31,4 +31,4 @@ const Items = () => (
   </Item.Group>
 )
 
-export default Items
+export default ItemExampleItems
diff --git a/docs/app/Examples/views/Item/Types/Props.js b/docs/app/Examples/views/Item/Types/ItemExampleProps.js
similarity index 88%
rename from docs/app/Examples/views/Item/Types/Props.js
rename to docs/app/Examples/views/Item/Types/ItemExampleProps.js
index ea4e324283..321e3ae8a8 100644
--- a/docs/app/Examples/views/Item/Types/Props.js
+++ b/docs/app/Examples/views/Item/Types/ItemExampleProps.js
@@ -20,8 +20,8 @@ const items = [
   },
 ]
 
-const Props = () => (
+const ItemExampleProps = () => (
   <Item.Group items={items} />
 )
 
-export default Props
+export default ItemExampleProps
diff --git a/docs/app/Examples/views/Item/Types/index.js b/docs/app/Examples/views/Item/Types/index.js
index e56d9c409f..91099e3bf6 100644
--- a/docs/app/Examples/views/Item/Types/index.js
+++ b/docs/app/Examples/views/Item/Types/index.js
@@ -7,10 +7,10 @@ const Types = () => (
   <ExampleSection title='Types'>
     <ComponentExample
       title='Items'
-      description='A group of items'
-      examplePath='views/Item/Types/Items'
+      description='A group of items.'
+      examplePath='views/Item/Types/ItemExampleItems'
     />
-    <ComponentExample examplePath='views/Item/Types/Props' />
+    <ComponentExample examplePath='views/Item/Types/ItemExampleProps' />
   </ExampleSection>
 )
 
diff --git a/docs/app/Examples/views/Item/Variations/Alignment.js b/docs/app/Examples/views/Item/Variations/Alignment.js
deleted file mode 100644
index 77f560b9a4..0000000000
--- a/docs/app/Examples/views/Item/Variations/Alignment.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import { Item } from 'semantic-ui-react'
-
-const { Content, Group, Header, Image } = Item
-
-const Alignment = () => (
-  <Group>
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='top'>
-        <Header>Top Aligned</Header>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='middle'>
-        <Header>Middle Aligned</Header>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='bottom'>
-        <Header>Bottom Aligned</Header>
-      </Content>
-    </Item>
-  </Group>
-)
-
-export default Alignment
diff --git a/docs/app/Examples/views/Item/Variations/Divided.js b/docs/app/Examples/views/Item/Variations/Divided.js
deleted file mode 100644
index 2fbb4c3372..0000000000
--- a/docs/app/Examples/views/Item/Variations/Divided.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react'
-import { Button, Icon, Image as ImageComponent, Item, Label } from 'semantic-ui-react'
-
-const { Content, Description, Extra, Group, Header, Image, Meta } = Item
-const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
-
-const Divided = () => (
-  <Group divided>
-    <Item>
-      <Image src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content>
-        <Header as='a'>12 Years a Slave</Header>
-        <Meta>
-          <span className='cinema'>Union Square 14</span>
-        </Meta>
-        <Description>{paragraph}</Description>
-        <Extra>
-          <Label>IMAX</Label>
-          <Label icon='globe' content='Additional Languages' />
-        </Extra>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content>
-        <Header as='a'>My Neighbor Totoro</Header>
-        <Meta>
-          <span className='cinema'>IFC Cinema</span>
-        </Meta>
-        <Description>{paragraph}</Description>
-        <Extra>
-          <Button primary floated='right'>
-            Buy tickets
-            <Icon name='right chevron' />
-          </Button>
-          <Label>Limited</Label>
-        </Extra>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content>
-        <Header as='a'>Watchmen</Header>
-        <Meta>
-          <span className='cinema'>IFC</span>
-        </Meta>
-        <Description>{paragraph}</Description>
-        <Extra>
-          <Button primary floated='right'>
-            Buy tickets
-            <Icon name='right chevron' />
-          </Button>
-        </Extra>
-      </Content>
-    </Item>
-  </Group>
-)
-
-export default Divided
diff --git a/docs/app/Examples/views/Item/Variations/Floated.js b/docs/app/Examples/views/Item/Variations/Floated.js
deleted file mode 100644
index 6537bacc9e..0000000000
--- a/docs/app/Examples/views/Item/Variations/Floated.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react'
-import { Button, Image as ImageComponent, Item } from 'semantic-ui-react'
-
-const { Content, Description, Extra, Group, Header, Image } = Item
-const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
-
-const Floated = () => (
-  <Group relaxed>
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='middle'>
-        <Header>Content A</Header>
-        <Description>{paragraph}</Description>
-        <Extra>
-          <Button floated='right'>
-            Action
-          </Button>
-        </Extra>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='middle'>
-        <Header>Content B</Header>
-        <Description>{paragraph}</Description>
-        <Extra>
-          <Button floated='right'>
-            Action
-          </Button>
-        </Extra>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='middle'>
-        <Header>Content C</Header>
-        <Description>{paragraph}</Description>
-        <Extra>
-          <Button floated='right'>
-            Action
-          </Button>
-        </Extra>
-      </Content>
-    </Item>
-  </Group>
-)
-
-export default Floated
diff --git a/docs/app/Examples/views/Item/Variations/ItemExampleAlignment.js b/docs/app/Examples/views/Item/Variations/ItemExampleAlignment.js
new file mode 100644
index 0000000000..3a8ecbfc7b
--- /dev/null
+++ b/docs/app/Examples/views/Item/Variations/ItemExampleAlignment.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Item } from 'semantic-ui-react'
+
+const ItemExampleAlignment = () => (
+  <Item.Group>
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='top'>
+        <Item.Header>Top Aligned</Item.Header>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header>Middle Aligned</Item.Header>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='bottom'>
+        <Item.Header>Bottom Aligned</Item.Header>
+      </Item.Content>
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleAlignment
diff --git a/docs/app/Examples/views/Item/Variations/ItemExampleDivided.js b/docs/app/Examples/views/Item/Variations/ItemExampleDivided.js
new file mode 100644
index 0000000000..695c8ba96e
--- /dev/null
+++ b/docs/app/Examples/views/Item/Variations/ItemExampleDivided.js
@@ -0,0 +1,63 @@
+import React from 'react'
+import { Button, Icon, Image as ImageComponent, Item, Label } from 'semantic-ui-react'
+
+const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+
+const ItemExampleDivided = () => (
+  <Item.Group divided>
+    <Item>
+      <Item.Image src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header as='a'>12 Years a Slave</Item.Header>
+        <Item.Meta>
+          <span className='cinema'>Union Square 14</span>
+        </Item.Meta>
+        <Item.Description>{paragraph}</Item.Description>
+        <Item.Extra>
+          <Label>IMAX</Label>
+          <Label icon='globe' content='Additional Languages' />
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header as='a'>My Neighbor Totoro</Item.Header>
+        <Item.Meta>
+          <span className='cinema'>IFC Cinema</span>
+        </Item.Meta>
+        <Item.Description>{paragraph}</Item.Description>
+        <Item.Extra>
+          <Button primary floated='right'>
+            Buy tickets
+            <Icon name='right chevron' />
+          </Button>
+          <Label>Limited</Label>
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content>
+        <Item.Header as='a'>Watchmen</Item.Header>
+        <Item.Meta>
+          <span className='cinema'>IFC</span>
+        </Item.Meta>
+        <Item.Description>{paragraph}</Item.Description>
+        <Item.Extra>
+          <Button primary floated='right'>
+            Buy tickets
+            <Icon name='right chevron' />
+          </Button>
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleDivided
diff --git a/docs/app/Examples/views/Item/Variations/ItemExampleFloated.js b/docs/app/Examples/views/Item/Variations/ItemExampleFloated.js
new file mode 100644
index 0000000000..8c3420dcbc
--- /dev/null
+++ b/docs/app/Examples/views/Item/Variations/ItemExampleFloated.js
@@ -0,0 +1,52 @@
+import React from 'react'
+import { Button, Image as ImageComponent, Item } from 'semantic-ui-react'
+
+const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+
+const ItemExampleFloated = () => (
+  <Item.Group relaxed>
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header>Content A</Item.Header>
+        <Item.Description>{paragraph}</Item.Description>
+        <Item.Extra>
+          <Button floated='right'>
+            Action
+          </Button>
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header>Content B</Item.Header>
+        <Item.Description>{paragraph}</Item.Description>
+        <Item.Extra>
+          <Button floated='right'>
+            Action
+          </Button>
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header>Content C</Item.Header>
+        <Item.Description>{paragraph}</Item.Description>
+        <Item.Extra>
+          <Button floated='right'>
+            Action
+          </Button>
+        </Item.Extra>
+      </Item.Content>
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleFloated
diff --git a/docs/app/Examples/views/Item/Variations/ItemExampleLink.js b/docs/app/Examples/views/Item/Variations/ItemExampleLink.js
new file mode 100644
index 0000000000..6492dfdd37
--- /dev/null
+++ b/docs/app/Examples/views/Item/Variations/ItemExampleLink.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import { Image as ImageComponent, Item } from 'semantic-ui-react'
+
+const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+
+const ItemExampleLink = () => (
+  <Item.Group link>
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/avatar/large/stevie.jpg' />
+
+      <Item.Content>
+        <Item.Header>Stevie Feliciano</Item.Header>
+        <Item.Description>{paragraph}</Item.Description>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/avatar/large/veronika.jpg' />
+
+      <Item.Content>
+        <Item.Header>Veronika Ossi</Item.Header>
+        <Item.Description>{paragraph}</Item.Description>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/avatar/large/jenny.jpg' />
+
+      <Item.Content>
+        <Item.Header>Jenny Hess</Item.Header>
+        <Item.Description>{paragraph}</Item.Description>
+      </Item.Content>
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleLink
diff --git a/docs/app/Examples/views/Item/Variations/ItemExampleRelaxed.js b/docs/app/Examples/views/Item/Variations/ItemExampleRelaxed.js
new file mode 100644
index 0000000000..6507c607aa
--- /dev/null
+++ b/docs/app/Examples/views/Item/Variations/ItemExampleRelaxed.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Item } from 'semantic-ui-react'
+
+const ItemExampleRelaxed = () => (
+  <Item.Group relaxed>
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header as='a'>12 Years a Slave</Item.Header>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header as='a'>My Neighbor Totoro</Item.Header>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header as='a'>Watchmen</Item.Header>
+      </Item.Content>
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleRelaxed
diff --git a/docs/app/Examples/views/Item/Variations/ItemExampleVeryRelaxed.js b/docs/app/Examples/views/Item/Variations/ItemExampleVeryRelaxed.js
new file mode 100644
index 0000000000..cf24126746
--- /dev/null
+++ b/docs/app/Examples/views/Item/Variations/ItemExampleVeryRelaxed.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Item } from 'semantic-ui-react'
+
+const ItemExampleVeryRelaxed = () => (
+  <Item.Group relaxed='very'>
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header as='a'>12 Years a Slave</Item.Header>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header as='a'>My Neighbor Totoro</Item.Header>
+      </Item.Content>
+    </Item>
+
+    <Item>
+      <Item.Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
+
+      <Item.Content verticalAlign='middle'>
+        <Item.Header as='a'>Watchmen</Item.Header>
+      </Item.Content>
+    </Item>
+  </Item.Group>
+)
+
+export default ItemExampleVeryRelaxed
diff --git a/docs/app/Examples/views/Item/Variations/Link.js b/docs/app/Examples/views/Item/Variations/Link.js
deleted file mode 100644
index a42a94be7a..0000000000
--- a/docs/app/Examples/views/Item/Variations/Link.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react'
-import { Image as ImageComponent, Item } from 'semantic-ui-react'
-
-const { Content, Description, Group, Header, Image } = Item
-const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
-
-const Link = () => (
-  <Group link>
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/avatar/large/stevie.jpg' />
-
-      <Content>
-        <Header>Stevie Feliciano</Header>
-        <Description>{paragraph}</Description>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/avatar/large/veronika.jpg' />
-
-      <Content>
-        <Header>Veronika Ossi</Header>
-        <Description>{paragraph}</Description>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/avatar/large/jenny.jpg' />
-
-      <Content>
-        <Header>Jenny Hess</Header>
-        <Description>{paragraph}</Description>
-      </Content>
-    </Item>
-  </Group>
-)
-
-export default Link
diff --git a/docs/app/Examples/views/Item/Variations/Relaxed.js b/docs/app/Examples/views/Item/Variations/Relaxed.js
deleted file mode 100644
index b47320a86f..0000000000
--- a/docs/app/Examples/views/Item/Variations/Relaxed.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import { Item } from 'semantic-ui-react'
-
-const { Content, Group, Header, Image } = Item
-
-const Relaxed = () => (
-  <Group relaxed>
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='middle'>
-        <Header as='a'>12 Years a Slave</Header>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='middle'>
-        <Header as='a'>My Neighbor Totoro</Header>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='middle'>
-        <Header as='a'>Watchmen</Header>
-      </Content>
-    </Item>
-  </Group>
-)
-
-export default Relaxed
diff --git a/docs/app/Examples/views/Item/Variations/VeryRelaxed.js b/docs/app/Examples/views/Item/Variations/VeryRelaxed.js
deleted file mode 100644
index a5282329bc..0000000000
--- a/docs/app/Examples/views/Item/Variations/VeryRelaxed.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import { Item } from 'semantic-ui-react'
-
-const { Content, Group, Header, Image } = Item
-
-const VeryRelaxed = () => (
-  <Group relaxed='very'>
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='middle'>
-        <Header as='a'>12 Years a Slave</Header>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='middle'>
-        <Header as='a'>My Neighbor Totoro</Header>
-      </Content>
-    </Item>
-
-    <Item>
-      <Image size='tiny' src='http://semantic-ui.com/images/wireframe/image.png' />
-
-      <Content verticalAlign='middle'>
-        <Header as='a'>Watchmen</Header>
-      </Content>
-    </Item>
-  </Group>
-)
-
-export default VeryRelaxed
diff --git a/docs/app/Examples/views/Item/Variations/index.js b/docs/app/Examples/views/Item/Variations/index.js
index 9ff5098084..00cb7bb0b1 100644
--- a/docs/app/Examples/views/Item/Variations/index.js
+++ b/docs/app/Examples/views/Item/Variations/index.js
@@ -7,33 +7,33 @@ const Variations = () => (
   <ExampleSection title='Variations'>
     <ComponentExample
       title='Divided'
-      description='Items can be divided to better distinguish between grouped content'
-      examplePath='views/Item/Variations/Divided'
+      description='Items can be divided to better distinguish between grouped content.'
+      examplePath='views/Item/Variations/ItemExampleDivided'
     />
 
     <ComponentExample
       title='Relaxed'
-      description='A group of items can relax its padding to provide more negative space'
-      examplePath='views/Item/Variations/Relaxed'
+      description='A group of items can relax its padding to provide more negative space.'
+      examplePath='views/Item/Variations/ItemExampleRelaxed'
     />
-    <ComponentExample examplePath='views/Item/Variations/VeryRelaxed' />
+    <ComponentExample examplePath='views/Item/Variations/ItemExampleVeryRelaxed' />
 
     <ComponentExample
       title='Link Item'
-      description='An item can be formatted so that the entire contents link to another page'
-      examplePath='views/Item/Variations/Link'
+      description='An item can be formatted so that the entire contents link to another page.'
+      examplePath='views/Item/Variations/ItemExampleLink'
     />
 
     <ComponentExample
       title='Vertical Alignment'
-      description='Content can specify its vertical alignment'
-      examplePath='views/Item/Variations/Alignment'
+      description='Content can specify its vertical alignment.'
+      examplePath='views/Item/Variations/ItemExampleAlignment'
     />
 
     <ComponentExample
       title='Floated Content'
-      description='Any content element can be floated left or right'
-      examplePath='views/Item/Variations/Floated'
+      description='Any content element can be floated left or right.'
+      examplePath='views/Item/Variations/ItemExampleFloated'
     />
   </ExampleSection>
 )