---
layout      : 'default'
css         : 'divider'

element     : 'divider'
elementType : 'element'

title       : 'Divider'
description : 'A divider visually segments content into groups'
type        : 'UI Element'

themes      : ['default']
---

<%- @partial('header') %>
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/divider.less" />

<div class="main container">

  <h2 class="ui dividing header">Types</h2>
  <div class="example">
    <h4 class="ui header">Divider</h4>
    <div class="ignored ui warning message">If you are looking to add a divider in between grid rows, you can use the <code>ui divided grid</code> variation. For more information check out <a href="/collections/grid.html">the grid definition</a></div>
    <p>A standard divider</p>
    <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 divider"></div>
    <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="example">
    <h4 class="ui header">Vertical Divider</h4>
    <div class="ui info message">
      If you use a vertical divider inside a <a href="/collections/grid.html">stackable grid</a> it will automatically adjust from a <code>vertical divider</code> to a <code>horizontal divider</code> at mobile resolutions.
    </div>
    <p>A divider can segment content vertically</p>
    <div class="ui two column middle aligned relaxed fitted stackable grid">
      <div class="column">
        <div class="ui form segment">
          <div class="field">
            <label>Username</label>
            <div class="ui left icon input">
              <input type="text" placeholder="Username">
              <i class="user icon"></i>
            </div>
          </div>
          <div class="field">
            <label>Password</label>
            <div class="ui left icon input">
              <input type="password">
              <i class="lock icon"></i>
            </div>
          </div>
          <div class="ui blue submit button">Login</div>
        </div>
      </div>
      <div class="ui vertical divider">
        Or
      </div>
      <div class="center aligned column">
        <div class="huge green ui labeled icon button">
          <i class="signup icon"></i>
          Sign Up
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Horizontal Divider</h4>
    <p>A divider can segment content horizontally</p>
    <div class="ui ignored positive message">Horizontal dividers can also be used in combination with <a href="/elements/header.html">header</a> and <a href="/elements/icon.html">icons</a> to create different styles of dividers.
    </div>
    <div class="ui ignored message">Dividers  will automatically vary the size of their dividing rules to match the length of your text</div>
    <div class="ui segment">
      <div class="ui form">
        <div class="field">
          <label>Lookup Order</label>
          <div class="ui left labeled icon input">
            <i class="search icon"></i>
            <input type="text" placeholder="Order #">
          </div>
        </div>
        <div class="ui blue submit button">Search</div>
      </div>
      <div class="ui horizontal divider">
        Or
      </div>
      <div class="ui teal labeled icon button">
        Create New Order
        <i class="add icon"></i>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui segment">
      <h2 class="ui header">
        Doggie Treat
        <div class="sub header">$4.99 for 100</div>
      </h2>
      <div class="ui primary button">Add to cart</div>
      <p>Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide.</p>
      <h4 class="ui horizontal header divider">
        <i class="bar chart icon"></i>
        Specifications
      </h4>
      <table class="ui very basic definition table">
        <tbody>
          <tr>
            <td class="two wide column">Size</td>
            <td>1" x 2"</td>
          </tr>
          <tr>
            <td>Weight</td>
            <td>6 ounces</td>
          </tr>
          <tr>
            <td>Color</td>
            <td>Yellowish</td>
          </tr>
          <tr>
            <td>Odor</td>
            <td>Not Much Usually</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <h2 class="ui dividing header">Variations</h2>

  <div class="example">
    <h4 class="ui header">Inverted</h4>
    <p>A divider can have its colors inverted</p>
    <div class="ui 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 class="ui inverted divider"></div>
      <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 class="ui header">Fitted</h4>
    <p>A divider can be fitted, without any space above or below it.</p>
    <div class="ui segment">
      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.
      <div class="ui fitted divider"></div>
      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.
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Hidden</h4>
    <p>A hidden divider divides content without creating a dividing line</p>
    <h3 class="ui header">Section One</h3>
    <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 hidden divider"></div>
    <h3 class="ui header">Section Two</h3>
    <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="example">
    <h4 class="ui header">Section</h4>
    <p>A divider can provide greater margins to divide sections of content</p>
    <h3 class="ui header">Section One</h3>
    <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 section divider"></div>
    <h3 class="ui header">Section Two</h3>
    <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="example">
    <h4 class="ui header">Clearing</h4>
    <p>A divider can clear the contents above it</p>
    <div class="ui segment">
      <h2 class="ui left floated header">Left Header</h2>
      <h2 class="ui right floated header">Right Header</h2>
      <div class="ui clearing divider"></div>
      <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>