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

<hr />

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