Code Examples

This is used primarily when you want to separate a page into sections. It represents a thematic break between paragraph-level elements. Think of it as a way to distinguish topics within HTML. It’s a way to visually distinguish between 2 different topics, sections, paragraphs, etc. Paragraph section 1.

Paragraph section 2.
Paragraph section 3.


  • 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
$divider-border 1px solid $black-tint-25 Sets the divider border.

Basic Divider

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


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.