Divider

Types

Standard Divider

Standard Divider

Standard Divider
Preview
Markdown Syntax
____

Vertical Divider

A divider can segment content vertically

Vertical Divider
Preview
Or
Markdown Syntax
> Two Column Middle Aligned Very Relaxed Stackable Grid:
> > Column:
> > > Form:
> > > > Field:
> > > > __Label Tag|Username__
> > > > > Left Icon Input:
> > > > > __Input|Text|Username__
> > > > > _User Icon_
> > >
> > > <!-- -->
> > > > Field:
> > > > __Label Tag|Password__
> > > > > Left Icon Input:
> > > > > __Input|Password|Password__
> > > > > _Lock Icon_
> > >
> > > <!-- -->
> > > __Blue Submit Button|Login__
>
> <!-- -->
> > Vertical Divider:
> > Or
>
> <!-- -->
> > Center Aligned Column:
> > __Big Green Labeled Icon Button|Icon:Signup, Sign Up__

Horizontal Divider

A divider can segment content horizontally

Horizontal Divider
Preview
Or
Markdown Syntax
> Center Aligned Basic Segment:
> > Left Icon Action Input:
> > _Search Icon_
> > __Input|Text|Order #__
> > __Blue Submit Button|Search__
>
> <!-- -->
> > Horizontal Divider:
> > Or
>
> <!-- -->
> __Teal Labeled Icon Button|Create New Order, Icon: Add Icon__
Preview
Description

Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide.

Specifications
Size 1" x 2"
Weight 6 ounces
Color Yellowish
Odor Not Much Usually
Markdown Syntax
> Horizontal Divider Header:
> _Tag Icon_
> Description

<!-- -->
"Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide."

<!-- -->
> Horizontal Divider Header:
> _Bar Chart Icon_
> Specifications

<!-- You can mix HTML and Markdown-UI together -->
<table class="ui 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>

Variations

Inverted Divider

A divider can have its colors inverted

Inverted Divider
Preview

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Horizontal
Markdown Syntax
> Inverted Segment:
> "Lorem Ipsum Dolor"
> > Inverted Divider:
> > &nbsp;
>
> "Lorem Ipsum Dolor"
> > Horizontal Inverted Divider Header:
> > Horizontal

Fitted Divider

A divider can be fitted, without any space above or below it.

Fitted Divider
Preview

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.

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.
Markdown Syntax
> Segment:
> "Lorem Ipsum Dolor ..."
> > Fitted Divider:
> > &nbsp;
>
> "Lorem Ipsum Dolor ..."

Hidden Divider

A hidden divider divides content without creating a dividing line

Hidden Divider
Preview

Section One

Lorem Ipsum Dolor

Section Two

Lorem Ipsum Dolor

Markdown Syntax
> ### Section One
> "Lorem Ipsum Dolor"
> > Hidden Divider:
> > &nbsp;
>
> ### Section Two
> "Lorem Ipsum Dolor ..."

Section Divider

A divider can provide greater margins to divide sections of content

Section Divider
Preview

Section One

Lorem Ipsum Dolor

Section Two

Lorem Ipsum Dolor

Markdown Syntax
> ### Section One
> "Lorem Ipsum Dolor"
> > Section Divider:
> > &nbsp;
>
> ### Section Two
> "Lorem Ipsum Dolor ..."

Clearing Divider

A divider can clear the contents above it

Clearing Divider
Preview
Floated Content

Lorem Ipsum Dolor

Markdown Syntax
> Segment:
> > Right Floated Header:
> > Floated Content
>
> <!-- -->
> > Clearing Divider:
> > &nbsp;
>
> "Lorem Ipsum Dolor"