Divider

Separate content with stylish lines and shapes

Usage

You can use a simple <hr> element to separate certain content parts on your page.

Examples

Choose from the variety of style Purpose offers.

Horizontal

Line

Fade


<hr class="divider divider-fade" />

Vertical

Line


<hr class="divider divider-vertical" />

Fade


<hr class="divider divider-vertical-fade divider-vertical" />

Icon

Simple


<hr class="divider divider-icon" />

Fade

What is nice is that you can combine different styles, like adding the fade effect on top of and icon divider.


<hr class="divider divider-icon-fade divider-icon" />