Divider

Display a vertical or horizontal divider to segment your design.


You can easily display a message on the divider by adding data-content attribute to the divider.


<div class="is-divider" data-content="OR"></div>

Styles

Vertical

<div class="columns">
  <div class="column"></div>
  <div class="is-divider-vertical" data-content="OR"></div>
  <div class="column"></div>
</div>

Variables #

You can use these variables to customize this layout. Simply set one or multiple of these variables before importing Elenore. Learn how.

Name Default value
Name Default value
$divider-background-color $grey-lighter
$divider-font-size $size-7
$divider-color $grey-light

This page is open source. View on GitHub