Dividers

Simple Dividers

Use the standard hr element for a basic divider, and apply .pt-brd-(color) to set its color.

Showcase

HTML/CSS

Copy Code

1

Divider Line Styles

Use .pt-brd-t-(style) to style divider lines as solid, dashed, dotted, double, double, or ridge.

Showcase

HTML/CSS

Copy Code

1

Divider Height

Use .pt-brd-width-(width) to adjust the thickness of a divider.

Showcase

HTML/CSS

Copy Code

1

Divider Length

Use .pt-width-(width) to set divider length by pixels or percentage. Multiple dividers can be placed in a row for a staggered line effect.

Showcase

HTML/CSS

Copy Code

1

Complex Dividers

More complicated dividers with additional icons or text embeded use .pt-divider to separate the divider to provide detail or context within the break, and may be colored using .pt-divider-(color). Use .pt-divider-width-(width), (1-5) to adjust the thickness of a divider.

Showcase

HTML/CSS

Copy Code

DIVIDER TEXT

1

Current Snippets

Blocks

Navigation

Components

Extras

Contact InkTide

Dividers

Simple Dividers

Divider Line Styles

Divider Height

Divider Length

Complex Dividers