---
layout      : 'default'
css         : 'divider'
title       : 'Divider'
description : 'A divider visually segments content into separate groups'
type        : 'UI Element'
---

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

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Types</a>
      <a class="item">Variations</a>
    </div>
  </div>

  <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>
    <p>A divider can segment content vertically</p>
    <div class="ui two column middle aligned relaxed grid basic segment">
      <div class="column">
        <div class="ui form segment">
          <div class="field">
            <label>Username</label>
            <div class="ui left labeled icon input">
              <input type="text" placeholder="Username">
              <i class="user icon"></i>
              <div class="ui corner label">
                <i class="asterisk icon"></i>
              </div>
            </div>
          </div>
          <div class="field">
            <label>Password</label>
            <div class="ui left labeled icon input">
              <input type="password">
              <i class="lock icon"></i>
              <div class="ui corner label">
                <i class="asterisk icon"></i>
              </div>
            </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>
    <h3 class="ui header">Retrieve Order</h3>
    <div class="ui tertiary form segment">
      <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 class="example">
    <h4 class="ui header">Icon Divider</h4>
    <p>A divider can include an icon</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 horizontal icon divider">
      <i class="circular heart icon"></i>
    </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>


  <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">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>