# Divider

> Dividers are visual elements that separate content into distinct sections.

## Class Naming

Dividers are thin visual separators used to distinguish content sections either horizontally or vertically. There are two main base classes depending on the direction of the divider.

Base Classes:

| Class                                                      | Description         |
| ---------------------------------------------------------- | ------------------- |
| <span class="sg-selector sg-class">divider</span>          | horizontal dividers |
| <span class="sg-selector sg-class">divider-vertical</span> | vertical dividers   |

## Color Modifiers

These can be used in combination with either horizontal or vertical dividers to adjust color styling.

* <span class="sg-selector sg-class">
    divider
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>
* <span class="sg-selector sg-class">
    divider
  </span>
  <span class="sg-selector sg-class">
    is-accent
  </span>

Example:

* <span class="sg-selector sg-class">
    divider
  </span>
  <span class="sg-selector sg-class">
    is-secondary
  </span>

* <span class="sg-selector sg-class">
    divider-vertical
  </span>
  <span class="sg-selector sg-class">
    is-accent
  </span>