Dividers

Code Examples

Dividers are used for visually breaking up sections of a page.

Restrictions

  • The <hr> element has the same style as dividers, but should only be used when there is a thematic break between paragraph-level elements, for example, a change of scene in a story or a shift of topic within a section. If you are simply creating a visual separation, use a divider.
  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("divider-1", "divider-2", etc).

Configurable Variables

Variable Default Description
$sprk-divider-border 2px solid $sprk-divider-color Sets the divider border.
$sprk-divider-color rgb(230, 230, 230) Sets the color of the divider.

Basic Divider

<span class="sprk-c-Divider" data-id="divider-1">
</span>
          
<sprk-divider idString="divider-1"></sprk-divider>

Information

See below for available customization options:

Input Type Description
additionalClasses string Allows a string of classes to add, in addition to the spark classes. Intended for overrides.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.