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", "divider-3", 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>
<SprkDivider
 idString="divider-1"
 element="span"
></SprkDivider>

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.

Information

See below for available customization options:

Prop Type Description
element string Determines the element that will be rendered. Options are "hr" or "span". This is required.
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.