diff --git a/docs/app/Examples/elements/Rail/RailExamples.js b/docs/app/Examples/elements/Rail/RailExamples.js
deleted file mode 100644
index 6474992bec..0000000000
--- a/docs/app/Examples/elements/Rail/RailExamples.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react'
-import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
-
-const RailExamples = () => (
-  <div>
-    <ExampleSection title='Types'>
-      <ComponentExample
-        title='Rail'
-        description='A rail can be presented on the left or right side of a container'
-        examplePath='elements/Rail/Types/RailExample'
-      />
-
-      <ComponentExample
-        title='Internal'
-        description='A rail can attach itself to the inside of a container'
-        examplePath='elements/Rail/Types/RailInternalExample'
-      />
-
-      <ComponentExample
-        title='Dividing'
-        description='A rail can create a division between itself and a container'
-        examplePath='elements/Rail/Types/RailDividingExample'
-      />
-    </ExampleSection>
-
-    <ExampleSection title='Variations'>
-      <ComponentExample
-        title='Attached'
-        description='A rail can appear attached to the main viewport'
-        examplePath='elements/Rail/Variations/RailAttachedExample'
-      />
-
-      <ComponentExample
-        title='Attached'
-        examplePath='elements/Rail/Variations/RailAttachedInternalExample'
-      />
-
-      <ComponentExample
-        title='Close'
-        description='A rail can appear closer to the main viewport'
-        examplePath='elements/Rail/Variations/RailCloseExample'
-      />
-
-      <ComponentExample
-        examplePath='elements/Rail/Variations/RailVeryCloseExample'
-      />
-
-      <ComponentExample
-        title='Size'
-        description='A rail can have different sizes'
-        examplePath='elements/Rail/Variations/RailSizeExample'
-      />
-    </ExampleSection>
-  </div>
-)
-export default RailExamples
diff --git a/docs/app/Examples/elements/Rail/Types/RailDividingExample.js b/docs/app/Examples/elements/Rail/Types/RailExampleDividing.js
similarity index 70%
rename from docs/app/Examples/elements/Rail/Types/RailDividingExample.js
rename to docs/app/Examples/elements/Rail/Types/RailExampleDividing.js
index 5bbbb8dec6..5db6e2d354 100644
--- a/docs/app/Examples/elements/Rail/Types/RailDividingExample.js
+++ b/docs/app/Examples/elements/Rail/Types/RailExampleDividing.js
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailDividingExample = () => (
-  <Grid columns={3}>
+const RailExampleDividing = () => (
+  <Grid centered columns={3}>
     <Grid.Column>
       <Segment>
         <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
@@ -19,4 +19,4 @@ const RailDividingExample = () => (
   </Grid>
 )
 
-export default RailDividingExample
+export default RailExampleDividing
diff --git a/docs/app/Examples/elements/Rail/Types/RailInternalExample.js b/docs/app/Examples/elements/Rail/Types/RailExampleInternal.js
similarity index 84%
rename from docs/app/Examples/elements/Rail/Types/RailInternalExample.js
rename to docs/app/Examples/elements/Rail/Types/RailExampleInternal.js
index d36fec3efc..2cfc007088 100644
--- a/docs/app/Examples/elements/Rail/Types/RailInternalExample.js
+++ b/docs/app/Examples/elements/Rail/Types/RailExampleInternal.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailInternalExample = () => (
+const RailExampleInternal = () => (
   <Segment textAlign='center'>
     <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
 
@@ -15,4 +15,4 @@ const RailInternalExample = () => (
   </Segment>
 )
 
-export default RailInternalExample
+export default RailExampleInternal
diff --git a/docs/app/Examples/elements/Rail/Types/RailExample.js b/docs/app/Examples/elements/Rail/Types/RailExampleRail.js
similarity index 70%
rename from docs/app/Examples/elements/Rail/Types/RailExample.js
rename to docs/app/Examples/elements/Rail/Types/RailExampleRail.js
index f92ebfe889..30b15a628d 100644
--- a/docs/app/Examples/elements/Rail/Types/RailExample.js
+++ b/docs/app/Examples/elements/Rail/Types/RailExampleRail.js
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailExample = () => (
-  <Grid columns={3}>
+const RailExampleRail = () => (
+  <Grid centered columns={3}>
     <Grid.Column>
       <Segment>
         <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
@@ -19,4 +19,4 @@ const RailExample = () => (
   </Grid>
 )
 
-export default RailExample
+export default RailExampleRail
diff --git a/docs/app/Examples/elements/Rail/Types/index.js b/docs/app/Examples/elements/Rail/Types/index.js
new file mode 100644
index 0000000000..e4c905b983
--- /dev/null
+++ b/docs/app/Examples/elements/Rail/Types/index.js
@@ -0,0 +1,27 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const RailTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Rail'
+      description='A rail can be presented on the left or right side of a container.'
+      examplePath='elements/Rail/Types/RailExampleRail'
+    />
+
+    <ComponentExample
+      title='Internal'
+      description='A rail can attach itself to the inside of a container.'
+      examplePath='elements/Rail/Types/RailExampleInternal'
+    />
+
+    <ComponentExample
+      title='Dividing'
+      description='A rail can create a division between itself and a container.'
+      examplePath='elements/Rail/Types/RailExampleDividing'
+    />
+  </ExampleSection>
+)
+export default RailTypesExamples
diff --git a/docs/app/Examples/elements/Rail/Variations/RailAttachedExample.js b/docs/app/Examples/elements/Rail/Variations/RailExampleAttached.js
similarity index 71%
rename from docs/app/Examples/elements/Rail/Variations/RailAttachedExample.js
rename to docs/app/Examples/elements/Rail/Variations/RailExampleAttached.js
index 3ce713d743..1c1b8f90ed 100644
--- a/docs/app/Examples/elements/Rail/Variations/RailAttachedExample.js
+++ b/docs/app/Examples/elements/Rail/Variations/RailExampleAttached.js
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailAttachedExample = () => (
-  <Grid columns={3}>
+const RailExampleAttached = () => (
+  <Grid centered columns={3}>
     <Grid.Column>
       <Segment textAlign='center'>
         <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
@@ -19,4 +19,4 @@ const RailAttachedExample = () => (
   </Grid>
 )
 
-export default RailAttachedExample
+export default RailExampleAttached
diff --git a/docs/app/Examples/elements/Rail/Variations/RailAttachedInternalExample.js b/docs/app/Examples/elements/Rail/Variations/RailExampleAttachedInternal.js
similarity index 81%
rename from docs/app/Examples/elements/Rail/Variations/RailAttachedInternalExample.js
rename to docs/app/Examples/elements/Rail/Variations/RailExampleAttachedInternal.js
index ce4745628d..4245ec7b71 100644
--- a/docs/app/Examples/elements/Rail/Variations/RailAttachedInternalExample.js
+++ b/docs/app/Examples/elements/Rail/Variations/RailExampleAttachedInternal.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailAttachedInternalExample = () => (
+const RailExampleAttachedInternal = () => (
   <Segment>
     <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
 
@@ -15,4 +15,4 @@ const RailAttachedInternalExample = () => (
   </Segment>
 )
 
-export default RailAttachedInternalExample
+export default RailExampleAttachedInternal
diff --git a/docs/app/Examples/elements/Rail/Variations/RailCloseExample.js b/docs/app/Examples/elements/Rail/Variations/RailExampleClose.js
similarity index 71%
rename from docs/app/Examples/elements/Rail/Variations/RailCloseExample.js
rename to docs/app/Examples/elements/Rail/Variations/RailExampleClose.js
index b26bf8a5b4..a8461e1068 100644
--- a/docs/app/Examples/elements/Rail/Variations/RailCloseExample.js
+++ b/docs/app/Examples/elements/Rail/Variations/RailExampleClose.js
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailCloseExample = () => (
-  <Grid columns={3}>
+const RailExampleClose = () => (
+  <Grid centered columns={3}>
     <Grid.Column>
       <Segment>
         <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
@@ -19,4 +19,4 @@ const RailCloseExample = () => (
   </Grid>
 )
 
-export default RailCloseExample
+export default RailExampleClose
diff --git a/docs/app/Examples/elements/Rail/Variations/RailVeryCloseExample.js b/docs/app/Examples/elements/Rail/Variations/RailExampleCloseVery.js
similarity index 70%
rename from docs/app/Examples/elements/Rail/Variations/RailVeryCloseExample.js
rename to docs/app/Examples/elements/Rail/Variations/RailExampleCloseVery.js
index d038981a86..c95e2136a0 100644
--- a/docs/app/Examples/elements/Rail/Variations/RailVeryCloseExample.js
+++ b/docs/app/Examples/elements/Rail/Variations/RailExampleCloseVery.js
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailVeryCloseExample = () => (
-  <Grid columns={3}>
+const RailExampleCloseVery = () => (
+  <Grid centered columns={3}>
     <Grid.Column>
       <Segment>
         <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
@@ -19,4 +19,4 @@ const RailVeryCloseExample = () => (
   </Grid>
 )
 
-export default RailVeryCloseExample
+export default RailExampleCloseVery
diff --git a/docs/app/Examples/elements/Rail/Variations/RailSizeExample.js b/docs/app/Examples/elements/Rail/Variations/RailExampleSize.js
similarity index 88%
rename from docs/app/Examples/elements/Rail/Variations/RailSizeExample.js
rename to docs/app/Examples/elements/Rail/Variations/RailExampleSize.js
index b876db089e..07c9861a81 100644
--- a/docs/app/Examples/elements/Rail/Variations/RailSizeExample.js
+++ b/docs/app/Examples/elements/Rail/Variations/RailExampleSize.js
@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
 const Wrapper = ({ children }) => (
   <Grid columns={3} textAlign='center'>
@@ -16,7 +16,7 @@ Wrapper.propTypes = {
   children: PropTypes.node,
 }
 
-const RailSizeExample = () => (
+const RailExampleSize = () => (
   <div>
     <Wrapper>
       <Rail size='mini' position='left'>Mini Left Rail</Rail>
@@ -36,4 +36,4 @@ const RailSizeExample = () => (
   </div>
 )
 
-export default RailSizeExample
+export default RailExampleSize
diff --git a/docs/app/Examples/elements/Rail/Variations/index.js b/docs/app/Examples/elements/Rail/Variations/index.js
new file mode 100644
index 0000000000..8cc24bc855
--- /dev/null
+++ b/docs/app/Examples/elements/Rail/Variations/index.js
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const RailVariationsExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Attached'
+      description='A rail can appear attached to the main viewport.'
+      examplePath='elements/Rail/Variations/RailExampleAttached'
+    />
+    <ComponentExample examplePath='elements/Rail/Variations/RailExampleAttachedInternal' />
+
+    <ComponentExample
+      title='Close'
+      description='A rail can appear closer to the main viewport.'
+      examplePath='elements/Rail/Variations/RailExampleClose'
+    />
+    <ComponentExample examplePath='elements/Rail/Variations/RailExampleCloseVery' />
+
+    <ComponentExample
+      title='Size'
+      description='A rail can have different sizes.'
+      examplePath='elements/Rail/Variations/RailExampleSize'
+    />
+  </ExampleSection>
+)
+export default RailVariationsExamples
diff --git a/docs/app/Examples/elements/Rail/index.js b/docs/app/Examples/elements/Rail/index.js
index 6474992bec..bb78a2730f 100644
--- a/docs/app/Examples/elements/Rail/index.js
+++ b/docs/app/Examples/elements/Rail/index.js
@@ -1,57 +1,12 @@
 import React from 'react'
-import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+import Types from './Types'
+import Variations from './Variations'
 
 const RailExamples = () => (
   <div>
-    <ExampleSection title='Types'>
-      <ComponentExample
-        title='Rail'
-        description='A rail can be presented on the left or right side of a container'
-        examplePath='elements/Rail/Types/RailExample'
-      />
-
-      <ComponentExample
-        title='Internal'
-        description='A rail can attach itself to the inside of a container'
-        examplePath='elements/Rail/Types/RailInternalExample'
-      />
-
-      <ComponentExample
-        title='Dividing'
-        description='A rail can create a division between itself and a container'
-        examplePath='elements/Rail/Types/RailDividingExample'
-      />
-    </ExampleSection>
-
-    <ExampleSection title='Variations'>
-      <ComponentExample
-        title='Attached'
-        description='A rail can appear attached to the main viewport'
-        examplePath='elements/Rail/Variations/RailAttachedExample'
-      />
-
-      <ComponentExample
-        title='Attached'
-        examplePath='elements/Rail/Variations/RailAttachedInternalExample'
-      />
-
-      <ComponentExample
-        title='Close'
-        description='A rail can appear closer to the main viewport'
-        examplePath='elements/Rail/Variations/RailCloseExample'
-      />
-
-      <ComponentExample
-        examplePath='elements/Rail/Variations/RailVeryCloseExample'
-      />
-
-      <ComponentExample
-        title='Size'
-        description='A rail can have different sizes'
-        examplePath='elements/Rail/Variations/RailSizeExample'
-      />
-    </ExampleSection>
+    <Types />
+    <Variations />
   </div>
 )
 export default RailExamples
diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js
index 86b84f9e3a..31547c085e 100644
--- a/src/elements/Rail/Rail.js
+++ b/src/elements/Rail/Rail.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
 import cx from 'classnames'
+import React, { PropTypes } from 'react'
 
 import {
   customPropTypes,
@@ -16,17 +16,27 @@ import {
  * A rail is used to show accompanying content outside the boundaries of the main view of a site.
  */
 function Rail(props) {
-  const { attached, className, close, children, dividing, internal, position, size } = props
+  const {
+    attached,
+    children,
+    className,
+    close,
+    dividing,
+    internal,
+    position,
+    size,
+  } = props
+
   const classes = cx(
     'ui',
     position,
+    size,
     useKeyOnly(attached, 'attached'),
-    useKeyOrValueAndKey(close, 'close'),
     useKeyOnly(dividing, 'dividing'),
     useKeyOnly(internal, 'internal'),
-    size,
-    className,
+    useKeyOrValueAndKey(close, 'close'),
     'rail',
+    className,
   )
   const rest = getUnhandledProps(Rail, props)
   const ElementType = getElementType(Rail, props)
@@ -36,12 +46,12 @@ function Rail(props) {
 
 Rail._meta = {
   name: 'Rail',
+  type: META.TYPES.ELEMENT,
   props: {
     close: ['very'],
     position: SUI.FLOATS,
     size: _.without(SUI.SIZES, 'medium'),
   },
-  type: META.TYPES.ELEMENT,
 }
 
 Rail.propTypes = {
@@ -51,6 +61,9 @@ Rail.propTypes = {
   /** A rail can appear attached to the main viewport. */
   attached: PropTypes.bool,
 
+  /** Primary content. */
+  children: PropTypes.node,
+
   /** Additional classes. */
   className: PropTypes.string,
 
@@ -60,9 +73,6 @@ Rail.propTypes = {
     PropTypes.oneOf(Rail._meta.props.close),
   ]),
 
-  /** Primary content. */
-  children: PropTypes.node,
-
   /** A rail can create a division between itself and a container. */
   dividing: PropTypes.bool,
 
diff --git a/test/specs/elements/Rail/Rail-test.js b/test/specs/elements/Rail/Rail-test.js
index 856ae779c0..8b92b3e4a7 100644
--- a/test/specs/elements/Rail/Rail-test.js
+++ b/test/specs/elements/Rail/Rail-test.js
@@ -1,20 +1,23 @@
 import React from 'react'
 
-import Rail from 'src/elements/Rail/Rail'
 import * as common from 'test/specs/commonTests'
+import Rail from 'src/elements/Rail/Rail'
 
 const requiredProps = { position: 'left' }
 
 describe('Rail', () => {
   common.isConformant(Rail, { requiredProps })
   common.hasUIClassName(Rail, { requiredProps })
-  common.propValueOnlyToClassName(Rail, 'position', { requiredProps })
+  common.rendersChildren(Rail, { requiredProps })
+
   common.propKeyOnlyToClassName(Rail, 'attached', { requiredProps })
-  common.propKeyOrValueAndKeyToClassName(Rail, 'close', { requiredProps })
   common.propKeyOnlyToClassName(Rail, 'dividing', { requiredProps })
   common.propKeyOnlyToClassName(Rail, 'internal', { requiredProps })
+
+  common.propKeyOrValueAndKeyToClassName(Rail, 'close', { requiredProps })
+
+  common.propValueOnlyToClassName(Rail, 'position', { requiredProps })
   common.propValueOnlyToClassName(Rail, 'size', { requiredProps })
-  common.rendersChildren(Rail, { requiredProps })
 
   it('renders an div element', () => {
     shallow(<Rail position='left' />)