Dividers

Add the .divider element to a section as a decorative effect. To see all available divider graphics see the Dividers page.

Basic Usage

Using SVGInjector to inject SVG from <img> tag:
<div class="divider">
  <img class="bg-white" src="assets/img/dividers/divider-2.svg" alt="graphical divider" data-inject-svg />
</div>
Directly embedded SVG element:
<div class="divider">
  <svg class="bg-white" width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
    <path d="M0,0 C16.6666667,66 33.3333333,99 50,99 C66.6666667,99 83.3333333,66 100,0 L100,100 L0,100 L0,0 Z"></path>
  </svg>
</div>
.divider

Wrap around the <svg> element format as a 100% width divider

Colors

Using SVGInjector to inject SVG from <img> tags:
<div class="divider">
  <img class="bg-primary" src="assets/img/dividers/divider-2.svg" alt="graphical divider" data-inject-svg />
</div>
Directly embedded SVG elements:
<div class="divider">
  <svg class="bg-primary" width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
    <path d="M0,0 C16.6666667,66 33.3333333,99 50,99 C66.6666667,99 83.3333333,66 100,0 L100,100 L0,100 L0,0 Z"></path>
  </svg>
</div>
.bg-primary

Apply to <svg> element to color with Primary color

.bg-primary-2

Apply to <svg> element to color with Primary-2 color

.bg-primary-3

Apply to <svg> element to color with Primary-3 color

.bg-primary-alt

Apply to <svg> element to color with Primary-alt color

.bg-primary-alt-2

Apply to <svg> element to color with Primary-alt-2 color

.bg-primary-alt-3

Apply to <svg> element to color with Primary-alt-3 color

Flip

Using SVGInjector to inject SVG from <img> tag:
<div class="divider flip-y">
  <img class="bg-white" src="assets/img/dividers/divider-2.svg" alt="graphical divider" data-inject-svg />
</div>
Directly embedded SVG element:
<div class="divider flip-y">
  <svg class="bg-white" width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
    <path d="M0,0 C16.6666667,66 33.3333333,99 50,99 C66.6666667,99 83.3333333,66 100,0 L100,100 L0,100 L0,0 Z"></path>
  </svg>
</div>
.flip-y

Apply to .divider element to flip the divider on the Y axis

.flip-x

Apply to .divider element to flip the divider on the X axis