CSS only

Divider

A horizontal or vertical separator. SCSS-only: ng-divider with style, text and colour variants.

Place a ng-divider between blocks. Modifiers change the line style, add a centered label, or switch to a vertical rule for inline groups.

Styles

dashed, dotted and with-text (label sits in the middle). half and center control the width.

Section one

Solid (default)

Dashed

Dotted

With text

divider.html

<p>Section one</p>
<div class="ng-divider my-16"></div>
<p>Solid (default)</p>
<div class="ng-divider dashed my-16"></div>
<p>Dashed</p>
<div class="ng-divider dotted my-16"></div>
<p>Dotted</p>
<div class="ng-divider with-text my-16">OR</div>
<p>With text</p>

Vertical

Add vertical for an inline separator between items in a row.

Home

Docs

About

divider.html

<span>Home</span>
<div class="ng-divider vertical"></div>
<span>Docs</span>
<div class="ng-divider vertical"></div>
<span>About</span>

Colors

Tint the line with any colour token via ng-divider-<color> — every framework token works; the semantic ones are shown here.

divider.html

<div class="ng-divider ng-divider-primary mb-20"></div>
<div class="ng-divider ng-divider-secondary mb-20"></div>
<div class="ng-divider ng-divider-success mb-20"></div>
<div class="ng-divider ng-divider-info mb-20"></div>
<div class="ng-divider ng-divider-warning mb-20"></div>
<div class="ng-divider ng-divider-danger mb-20"></div>
<div class="ng-divider ng-divider-mute mb-20"></div>
<div class="ng-divider ng-divider-blue mb-20"></div>
<div class="ng-divider ng-divider-blue-sky mb-20"></div>
<div class="ng-divider ng-divider-green mb-20"></div>
<div class="ng-divider ng-divider-lime mb-20"></div>
<div class="ng-divider ng-divider-aguagreen mb-20"></div>
<div class="ng-divider ng-divider-indigo mb-20"></div>
<div class="ng-divider ng-divider-purple mb-20"></div>
<div class="ng-divider ng-divider-purple-heart mb-20"></div>
<div class="ng-divider ng-divider-cyan mb-20"></div>
<div class="ng-divider ng-divider-magenta mb-20"></div>
<div class="ng-divider ng-divider-yellow mb-20"></div>

Anatomy

ng-divider ng-divider-{color}

Modifiers

vertical dashed dotted with-text half center

Reference

Generated from the component source (_ng_divider.scss).

Component info

Name	`Divider`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_divider.scss`

Classes

.ng-divider .ng-divider-

Tokens

--ng-divider-color --ng-divider-gap --ng-divider-size --ng-divider-style --ng-divider-width