Product Name

Dividers

Basic implementation

a divider can be added simply by including a div with the classes 'ui divider'

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at, dolorem distinctio aliquam cumque fugiat ipsa consequuntur harum ullam accusantium magni illum, error beatae eos reiciendis vero praesentium nam explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga deserunt vero culpa corporis ad, pariatur doloribus! Beatae, reiciendis? Culpa libero, magnam adipisci consectetur cum vel porro impedit animi voluptatibus illo!

Show Code 
  <div class="ui basic segment">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima at, dolorem distinctio aliquam cumque fugiat ipsa consequuntur harum ullam accusantium magni illum, error beatae eos reiciendis vero praesentium nam explicabo.</p>
    <div class="ui divider"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga deserunt vero culpa corporis ad, pariatur doloribus! Beatae, reiciendis? Culpa libero, magnam adipisci consectetur cum vel porro impedit animi voluptatibus illo!</p>
  </div>

Horizontal Divider

A divider can segment content horizontally

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id vitae recusandae dolore, quas quaerat tempore fuga a. Unde, minima, numquam reprehenderit, dolore reiciendis iste similique nostrum earum laborum impedit incidunt.

or

Alias non molestias aperiam nulla praesentium, natus, aliquam aut ipsum quam ea corrupti deleniti id quod. Possimus dolor nostrum, totam velit mollitia a fuga, ex aut quos accusantium ea quam.

Show Code 
  <div class="ui basic segment">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id vitae recusandae dolore, quas quaerat tempore fuga a. Unde, minima, numquam reprehenderit, dolore reiciendis iste similique nostrum earum laborum impedit incidunt.</p>
    <div class="ui horizontal divider">or</div>
    <p>Alias non molestias aperiam nulla praesentium, natus, aliquam aut ipsum quam ea corrupti deleniti id quod. Possimus dolor nostrum, totam velit mollitia a fuga, ex aut quos accusantium ea quam.</p>
  </div>

CF Divider Variations

A left or right (text) aligned divider element can be added using the .left or .right .aligned classes:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id vitae recusandae dolore, quas quaerat tempore fuga a. Unde, minima, numquam reprehenderit, dolore reiciendis iste similique nostrum earum laborum impedit incidunt.

left aligned

Alias non molestias aperiam nulla praesentium, natus, aliquam aut ipsum quam ea corrupti deleniti id quod. Possimus dolor nostrum, totam velit mollitia a fuga, ex aut quos accusantium ea quam.

Show Code 
  <div class="ui basic segment">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id vitae recusandae dolore, quas quaerat tempore fuga a. Unde, minima, numquam reprehenderit, dolore reiciendis iste similique nostrum earum laborum impedit incidunt.</p>
    <div class="ui left aligned horizontal divider">left aligned</div>
    <p>Alias non molestias aperiam nulla praesentium, natus, aliquam aut ipsum quam ea corrupti deleniti id quod. Possimus dolor nostrum, totam velit mollitia a fuga, ex aut quos accusantium ea quam.</p>
  </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id vitae recusandae dolore, quas quaerat tempore fuga a. Unde, minima, numquam reprehenderit, dolore reiciendis iste similique nostrum earum laborum impedit incidunt.

right aligned

Alias non molestias aperiam nulla praesentium, natus, aliquam aut ipsum quam ea corrupti deleniti id quod. Possimus dolor nostrum, totam velit mollitia a fuga, ex aut quos accusantium ea quam.

Show Code 
  <div class="ui basic segment">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id vitae recusandae dolore, quas quaerat tempore fuga a. Unde, minima, numquam reprehenderit, dolore reiciendis iste similique nostrum earum laborum impedit incidunt.</p>
    <div class="ui right aligned horizontal divider">right aligned</div>
    <p>Alias non molestias aperiam nulla praesentium, natus, aliquam aut ipsum quam ea corrupti deleniti id quod. Possimus dolor nostrum, totam velit mollitia a fuga, ex aut quos accusantium ea quam.</p>
  </div>

Works on different color backgrounds, and any text too

lorem ipsum

Divider here

lorem divided

Show Code 
  <div class="ui basic gray background segment">
    <p>lorem ipsum</p>
    <div class="ui left aligned horizontal divider">Divider here</div>
    <p>lorem divided</p>
  </div>