Code Examples

A Divider logically divides sections of content. Hr HTML elements will have style by default so no additional CSS class is needed.


  • 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).

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.