---
layout : 'default'
css    : 'header'

title  : 'Segment'
type   : 'UI Element'
---
<div class="segment">
  <div class="container">
  <h1>Segment</h1>
  <p>A segment is used to create a grouping of related content.</p>
  </div>
</div>
<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing menu">
      <a class="active item">Standard</a>
      <a class="item">Variations</a> 
    </div>
  </div>
  <h2>Standard</h2>
  
  <div class="example">
    <h4>Segment</h4>
    <p>A segment of content</p>
    <div class="ui segment">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
  </div>
  <div class="example">
    <h4>Vertical Segment</h4>
    <p>A vertical segment divides content vertically</p>
    <div class="ui vertical segment">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
  </div>
  <div class="example">
    <h4>Horizontal Segment</h4>
    <p>A horizontal segment divides content horizontally</p>
    <div class="ui horizontal segment">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
  </div>


  <h2>States</h2>

  <div class="ui disabled segment">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  </div>
  
  <h2>Variations</h2>

  <div class="example">
    <h4>Inverted</h4>
    <p>A segment can have its colors inverted for contrast</p>
    <div class="ui inverted segment">
      <p>I'm here to tell you something, and you will probably read me first.</p>
    </div>
  </div>

  <div class="example">
    <h4>Colored</h4>
    <p>A segment can be colored</p>
    <div class="ui blue segment">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
      <div class="ui green segment">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <div class="ui red segment">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
          <div class="ui purple segment">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
            <div class="ui teal segment">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <p>These colors can be inverted</p>
    <div class="ui blue inverted segment">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
    <div class="ui green inverted segment">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
    <div class="ui red inverted segment">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
    <div class="ui purple inverted segment">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
    <div class="ui teal inverted segment">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
  </div>
  
  <div class="example">
    <h4>Ordinality</h4>
    <p>A segment can be formatted to appear more or less noticable</p>
    <div class="ui primary segment">
      <p>I'm here to tell you something, and you will probably read me first.</p>
    </div>
    <div class="ui secondary segment">
      <p>I am pretty noticable but you might check out other content before you look at me.</p>
    </div>
    <div class="ui tertiary segment">
      <p>If you notice me you must be looking very hard.</p>
    </div>
  </div>
  <div class="another example">
    <div class="ui primary inverted segment">
      <p>I'm here to tell you something, and you will probably read me first.</p>
    </div>
    <div class="ui secondary inverted segment">
      <p>I am pretty noticable but you might check out other content before you look at me.</p>
    </div>
    <div class="ui tertiary inverted segment">
      <p>If you notice me you must be looking very hard.</p>
    </div>
  </div>
  
  <div class="example">
    <h4>Floated</h4>
    <p>A header can sit to the left or right of other content</p>
    <div class="ui right floated segment">
      <p>This segment will appear to the right
    </div>
    <div class="ui left floated segment">
      This segment will appear to the left
    </div>
  </div>
  
  <div class="example">
    <h4>Text Alignment</h4>
    <p>A header can have its text aligned to a side</p>
    <div class="ui right aligned segment">
      Right
    </div>
    <div class="ui left aligned segment">
      Left
    </div>
    <div class="ui center aligned segment">
      Center
    </div>
  </div>
  
  <div class="example">
    <h4>Basic</h4>
    <p>A segment may reduce its complexity to blend in with a page</p>
    <div class="ui basic segment">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
  </div>
  
  <div class="example">
    <h4>Stacked</h4>
    <p>A segment can be formatted to show it contains multiple pages</p>
    <div class="ui stacked segment">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
  </div>
  
  <div class="example">
    <h4>Raised</h4>
    <p>A segment may be formatted to raise above the page.</p>
    <div class="ui raised segment">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
  </div>
  
  
  <div class="example">
    <h4>Attached</h4>
    <p>A segment can be attached to other content on a page</p>
    
    <div class="ui top attached segment">
      <p>This segment is on top</p>
    </div>
    <div class="ui attached segment">
      <p>This segment is attached on both sides</p>
    </div>
    <div class="ui bottom attached segment">
      <p>This segment is on bottom</p>
    </div>
  </div>
  
  
</div>