---
layout      : 'default'
css         : 'rail-page'
element     : 'rail'
elementType : 'element'

title       : 'Rail'
description : 'A rail is used to show accompanying content outside the boundaries of the main view of a site'
status      : 'Undocumented'
type        : 'UI Element'

---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/rail.less" />

<%- @partial('header') %>

<div class="main container">

  <h2 class="ui dividing header">Current Progress</h2>
  <div class="ui indicating progress">
    <div class="bar" style="width: 90%;">
      <div class="progress">90%</div>
    </div>
    <div class="label">Needs Documentation</div>
  </div>

  <h2 class="ui dividing header">Usage</h2>
  <div class="no example">
    <p>A rail provides a fixed-width, off-canvas content segment that that is only visible at large enough screen sizes to support their inclusion.</p>
    <p>Often rail content uses a section of content that sticks to the browser viewport, following the user as they scroll down the page. This will be available in a separate component <code>ui sticky</code>.</p>
    <p>Examples of sites that use off-canvas rails include <a href="http://www.huffingtonpost.com/2014/09/22/obama-inversions_n_5864686.html" target="_blank">Huffington Post</a>, <a href="http://www.rottentomatoes.com/m/the_drop/">Rotten Tomatoes</a>, <a href="http://www.buzzfeed.com/claudiakoerner/rutgers-student-killed-in-bear-attack-while-hiking#2skhsin" target="_blank">BuzzFeed</a>.</p>
  </div>

  <h2 class="ui dividing header">Development Progress</h2>
  <div class="no example">
    <p>This is an undocumented component, but is <b>near complete</b>.</p>

    <p>You can help support the future development of the Semantic UI project, and help boost the priority of this component by donating to Semantic UI development.</p>

    <p>Please be sure to leave a note in the comments to indicate that you are interested in the development of this particular component.</p>
  </div>
</div>