Divider

Horizontal separator element for visually dividing content sections with optional text or icons.

Live Preview

Basic Divider

Divider with Text

Divider with Icon

Code

1<!-- Basic Divider -->
2<hr class="divider" />
3
4<!-- Divider with spacing -->
5<hr class="divider divider--lg" />
6
7<!-- Dashed Divider -->
8<hr class="divider divider--dashed" />
9
10<!-- Divider with text -->
11<div class="divider-with-text">
12  <hr class="divider" />
13  <span class="divider-text">OR</span>
14  <hr class="divider" />
15</div>
16
17<!-- Divider with icon -->
18<div class="divider-with-icon">
19  <hr class="divider" />
20  <span class="divider-icon">
21    <svg viewBox="0 0 24 24">...</svg>
22  </span>
23  <hr class="divider" />
24</div>
25
26<!-- Vertical Divider -->
27<div class="divider-vertical"></div>

Brand Properties

Accordion 2: Divider

Property	Type	Brand Default	HoB Value	TAE Value
Margins All	Input (px)	10px	16px (md)	16px (md)
Padding All	Input (px)	0px	0px	0px
Max Width	Input (px)	1110px	1110px	1110px
Divider Weight	Slider	4px	4px	4px
Divider Color	Color picker	rgb(0,0,0)	#038012 (Primary)	#1A5129 (Primary)

Accordion 1: Overall Section

Property	Type	Brand Default	HoB Value	TAE Value
Alignment	6-position grid	(default)	(default)	(default)
Background	Dropdown	Color	Color	Color
Background Color	Color picker	rgb(255,255,255)	rgb(255,255,255)	rgb(255,255,255)
Border Style	Dropdown	none	none	none
Border Width	Input	0px	0px	0px
Border Color	Color picker	rgb(0,0,0)	#038012 (Primary)	#1A5129 (Primary)
Shadow	Toggle	Off	Off	Off

Variants

Line Styles

Solid

Dashed

Dotted

Thickness

Thin (1px)

Medium (2px)

Thick (4px)

Colors

Default (gray)

Primary

Secondary

Accent

With Text

Continue with

Section Break

With Icons

Vertical Divider

Option A

Option B

Option C

Accessibility

Use <hr> for semantic horizontal rules
Decorative dividers should have role="presentation"
Don't rely solely on dividers to convey content structure
Ensure sufficient contrast between divider and background
Content in dividers (text/icons) should be decorative or have proper labels

Do's and Don'ts

Do

Use dividers to separate distinct content sections
Keep divider styling consistent throughout
Use appropriate spacing above and below
Consider dividers with text for login/signup flows
Use subtle colors that don't overpower content

Don't

Overuse dividers - let spacing do the work
Use thick, heavy dividers that distract
Mix too many divider styles on one page
Place dividers between every paragraph
Use dividers in place of proper headings

Unmapped Brand Values

The following brand token values are available but not currently mapped to CRAFT Divider properties:

HoB Brand

Token	Value	Potential Use
Secondary Color	#8B9F4A	Alternative divider color option
Spacing XS	4px	Tight divider margins
Spacing SM	8px	Small divider margins
Spacing LG	24px	Large divider margins
Spacing XL	32px	Extra large divider margins
Spacing XXL	48px	Section-level divider margins

TAE Brand

Token	Value	Potential Use
Secondary Color	#5F982F	Alternative divider color option
Spacing XS	4px	Tight divider margins
Spacing SM	8px	Small divider margins
Spacing LG	24px	Large divider margins
Spacing XL	32px	Extra large divider margins
Spacing XXL	48px	Section-level divider margins

Related Elements

Divider Components - Pre-styled divider layouts
Spacing - Using spacing instead of dividers