Dividers

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The Skeletonic CSS Divider is created based on the <hr> element.

Divider styles

The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind.

Divider

A standard divider. The <hr> element is used to separate content (or define a change) in an HTML page.

Dashed Divider
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr class="hr-dashed" />
Double Divider
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr class="hr-doubled" />
Dotted Divider
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr class="hr-dotted" />
Blurred Divider
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr class="hr-blurred" />
Solid Divider
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr class="hr-solid" />
Horizontal Divider

A divider can segment content horizontally

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr class="hr-text" data-content="Skeletonic" />
Icon Divider
<h1>This is heading 1</h1>
<p>This is some text.</p>
##### Icon Divider
<hr class="hr-icon" />
Rounded Divider
<h1>This is heading 1</h1>
<p>This is some text.</p>
##### Rounded Divider
<hr class="hr-rounded" />
Small Divider
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr class="hr-small">
Vertical Divider

A divider can segment content vertically

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr class="hr-vertical">
Hidden Divider

A hidden divider divides content without creating a dividing line

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr class="hr-hidden">

The Anatomy of Skeletonic CSS - A lightweight, intuitive, accessible and ultra-responsive CSS Framework