Standard Divider
____
A divider can segment content vertically
> 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__
A divider can segment content horizontally
> 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__
Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide.
Size | 1" x 2" |
Weight | 6 ounces |
Color | Yellowish |
Odor | Not Much Usually |
> 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>
A divider can have its colors inverted
Lorem Ipsum Dolor
Lorem Ipsum Dolor
> Inverted Segment:
> "Lorem Ipsum Dolor"
> > Inverted Divider:
> >
>
> "Lorem Ipsum Dolor"
> > Horizontal Inverted Divider Header:
> > Horizontal
A divider can be fitted, without any space above or below it.
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.> Segment:
> "Lorem Ipsum Dolor ..."
> > Fitted Divider:
> >
>
> "Lorem Ipsum Dolor ..."
A hidden divider divides content without creating a dividing line
Lorem Ipsum Dolor
Lorem Ipsum Dolor
> ### Section One
> "Lorem Ipsum Dolor"
> > Hidden Divider:
> >
>
> ### Section Two
> "Lorem Ipsum Dolor ..."
A divider can provide greater margins to divide sections of content
Lorem Ipsum Dolor
Lorem Ipsum Dolor
> ### Section One
> "Lorem Ipsum Dolor"
> > Section Divider:
> >
>
> ### Section Two
> "Lorem Ipsum Dolor ..."
A divider can clear the contents above it
Lorem Ipsum Dolor
> Segment:
> > Right Floated Header:
> > Floated Content
>
> <!-- -->
> > Clearing Divider:
> >
>
> "Lorem Ipsum Dolor"