BlueStack.io - Component Library

content-divider Component

Content Divider System

Content dividers create visual separation between different sections of content while maintaining clarity and organization. They guide users' attention, improve readability, and establish a clear structure within an interface.

Line Dividers

Preview Code

Copy

Default

Thick

Heavy

<div class="space-y-4">
  <div>
    <p class="text-xs text-gray-500 mb-2">Default</p>
    <div class="divider"></div>
  </div>
  <div>
    <p class="text-xs text-gray-500 mb-2">Thick</p>
    <div class="divider thick"></div>
  </div>
  <div>
    <p class="text-xs text-gray-500 mb-2">Heavy</p>
    <div class="divider heavy"></div>
  </div>
</div>

Line Styles

Preview Code

Copy

Solid

Dashed

Dotted

Double

<div class="space-y-4">
  <div>
    <p class="text-xs text-gray-500 mb-2">Solid</p>
    <div class="divider solid"></div>
  </div>
  <div>
    <p class="text-xs text-gray-500 mb-2">Dashed</p>
    <div class="divider dashed"></div>
  </div>
  <div>
    <p class="text-xs text-gray-500 mb-2">Dotted</p>
    <div class="divider dotted"></div>
  </div>
  <div>
    <p class="text-xs text-gray-500 mb-2">Double</p>
    <div class="divider double"></div>
  </div>
</div>

Text Dividers

Preview Code

Copy

Section Break

New Section

End of Section

<div class="space-y-4">
  <div class="divider text">
    <span>Section Break</span>
  </div>
  <div class="divider text left">
    <span>New Section</span>
  </div>
  <div class="divider text right">
    <span>End of Section</span>
  </div>
</div>

Colored Text Dividers

Preview Code

Copy

Primary

Success

Warning

Error

Information

<div class="space-y-4">
  <div class="divider text primary">
    <span>Primary</span>
  </div>
  <div class="divider text positive">
    <span>Success</span>
  </div>
  <div class="divider text warning">
    <span>Warning</span>
  </div>
  <div class="divider text negative">
    <span>Error</span>
  </div>
  <div class="divider text info">
    <span>Information</span>
  </div>
</div>

Icon Dividers

Preview Code

Copy

<div class="space-y-4">
  <div class="divider icon">
    <i class="icon star"></i>
  </div>
  <div class="divider icon primary">
    <i class="icon heart"></i>
  </div>
  <div class="divider icon positive">
    <i class="icon check"></i>
  </div>
  <div class="divider icon warning">
    <i class="icon alert-triangle"></i>
  </div>
  <div class="divider icon negative">
    <i class="icon x"></i>
  </div>
</div>

Special Effects

Preview Code

Copy

Fade Effect

Fade Thick

Gradient

Gradient Thick

Section with Ornament

<div class="space-y-4">
  <div>
    <p class="text-xs text-gray-500 mb-2">Fade Effect</p>
    <div class="divider fade"></div>
  </div>
  <div>
    <p class="text-xs text-gray-500 mb-2">Fade Thick</p>
    <div class="divider fade thick"></div>
  </div>
  <div>
    <p class="text-xs text-gray-500 mb-2">Gradient</p>
    <div class="divider gradient"></div>
  </div>
  <div>
    <p class="text-xs text-gray-500 mb-2">Gradient Thick</p>
    <div class="divider gradient thick"></div>
  </div>
  <div>
    <p class="text-xs text-gray-500 mb-2">Section with Ornament</p>
    <div class="divider section ornament"></div>
  </div>
</div>

Vertical Dividers

Preview Code

Copy

Home

Products

About

Contact

<div class="flex items-center h-8">
  <span class="text-gray-600">Home</span>
  <div class="divider vertical"></div>
  <span class="text-gray-600">Products</span>
  <div class="divider vertical thick"></div>
  <span class="text-gray-600">About</span>
  <div class="divider vertical primary"></div>
  <span class="text-gray-600">Contact</span>
</div>

Spacing Modifiers

Preview Code

Copy

Content above compact divider

Content above default divider

Content above relaxed divider

Content above loose divider

Content below

<div class="space-y-2">
  <p class="text-gray-600">Content above compact divider</p>
  <div class="divider compact"></div>
  <p class="text-gray-600">Content above default divider</p>
  <div class="divider"></div>
  <p class="text-gray-600">Content above relaxed divider</p>
  <div class="divider relaxed"></div>
  <p class="text-gray-600">Content above loose divider</p>
  <div class="divider loose"></div>
  <p class="text-gray-600">Content below</p>
</div>

Color Variations

Preview Code

Copy

<div class="space-y-4">
  <div class="divider"></div>
  <div class="divider primary"></div>
  <div class="divider positive"></div>
  <div class="divider negative"></div>
  <div class="divider warning"></div>
  <div class="divider info"></div>
  <div class="divider purple"></div>
  <div class="divider pink"></div>
  <div class="divider teal"></div>
  <div class="divider blue"></div>
  <div class="divider green"></div>
</div>

Combined Modifiers

Preview Code

Copy

Important Section

<div class="space-y-4">
  <div class="divider primary thick dashed"></div>
  <div class="divider positive double"></div>
  <div class="divider warning heavy dotted"></div>
  <div class="divider text primary thick">
    <span>Important Section</span>
  </div>
  <div class="divider icon negative thick">
    <i class="icon alert-circle"></i>
  </div>
</div>

Practical Examples

Preview Code

Copy

Article Title

This is the first paragraph of content that explains something important about the topic at hand.

This is the next section of content that provides additional details and context.

Card Header

Card content goes here with appropriate spacing.

<div class="space-y-6">
  <article class="prose">
    <h3 class="text-lg font-semibold">Article Title</h3>
    <p class="text-gray-600">
      This is the first paragraph of content that explains something important about the topic at
      hand.
    </p>
    <div class="divider text">
      <span>Continue Reading</span>
    </div>
    <p class="text-gray-600">
      This is the next section of content that provides additional details and context.
    </p>
  </article>

  <div class="divider section ornament"></div>

  <form class="space-y-4">
    <div>
      <label class="block text-sm font-medium mb-1">Personal Information</label>
      <input type="text" placeholder="Full Name" class="input w-full" />
    </div>
    <div class="divider text left">
      <span>Contact Details</span>
    </div>
    <div>
      <input type="email" placeholder="Email Address" class="input w-full" />
    </div>
  </form>

  <div class="divider"></div>

  <div class="card p-4 border rounded-lg">
    <h4 class="font-semibold">Card Header</h4>
    <div class="divider compact"></div>
    <p class="text-gray-600 text-sm">Card content goes here with appropriate spacing.</p>
  </div>
</div>

<div class="space-y-6">
                
                <article class="prose">
                    <h3 class="text-lg font-semibold">Article Title</h3>
                    <p class="text-gray-600">This is the first paragraph of content that explains something important about the topic at hand.</p>
                    <div class="divider text">
                        <span>Continue Reading</span>
                    </div>
                    <p class="text-gray-600">This is the next section of content that provides additional details and context.</p>
                </article>

<div class="divider section ornament"></div>
                
                <form class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-1">Personal Information</label>
                        <input type="text" placeholder="Full Name" class="input w-full">
                    </div>
                    <div class="divider text left">
                        <span>Contact Details</span>
                    </div>
                    <div>
                        <input type="email" placeholder="Email Address" class="input w-full">
                    </div>
                </form>

<div class="divider"></div>
                
                <div class="card p-4 border rounded-lg">
                    <h4 class="font-semibold">Card Header</h4>
                    <div class="divider compact"></div>
                    <p class="text-gray-600 text-sm">Card content goes here with appropriate spacing.</p>
                </div>
            </div>

Divider Class API Reference

Type	Class Options	Usage	Notes
Base	`divider`	Required base class	Creates horizontal line by default
Line Style	`solid`	Solid line	Default style
	`dashed`	Dashed line	Modifier to divider
	`dotted`	Dotted line	Modifier to divider
	`double`	Double line	Modifier to divider
Thickness	`thin`	1px thickness	Thinnest option
	(default)	1px thickness	No class needed
	`thick`	2px thickness	Medium thickness
	`heavy`	4px thickness	Thickest option
Content	`text`	Text in middle	Requires <span> child
	`icon`	Icon in middle	Requires <i> child
	`section`	Section divider	Special section break
Alignment	(center)	Center aligned	Default for text/icon
	`left`	Left aligned	For text/icon dividers
	`right`	Right aligned	For text/icon dividers
Spacing	`compact`	Minimal spacing	my-2
	(default)	Normal spacing	my-6
	`relaxed`	Extra spacing	my-8
	`loose`	Maximum spacing	my-12
Effects	`fade`	Fade gradient	Fades to transparent
	`gradient`	Color gradient	Blue to purple to pink
	`animated`	Shimmer animation	Animated effect
	`ornament`	Diamond ornament	Use with section
Orientation	`vertical`	Vertical divider	For inline separation
Colors	(default)	Gray color	No class needed
	`primary`	Primary blue	Main action color
	`positive`	Green color	Success state
	`negative`	Red color	Error state
	`warning`	Yellow/orange	Warning state
	`+ 14 colors`	Extended palette	red, blue, green, purple, etc.

Code Examples

<!-- Basic Line Divider -->
<div class="divider"></div>

<!-- Text Divider -->
<div class="divider text">
    <span>Section Title</span>
</div>

<!-- Icon Divider -->
<div class="divider icon">
    <i class="icon star"></i>
</div>

<!-- Styled Dividers -->
<div class="divider primary thick"></div>
<div class="divider dashed warning"></div>
<div class="divider gradient heavy"></div>

<!-- Vertical Divider (inline) -->
<span>Item 1</span>
<div class="divider vertical"></div>
<span>Item 2</span>

<!-- Text with Alignment -->
<div class="divider text left primary">
    <span>Chapter 1</span>
</div>

<!-- Section Divider with Ornament -->
<div class="divider section ornament"></div>

Usage Guidelines

Best Practices

✓ Use dividers to create clear visual separation between sections
✓ Choose appropriate thickness and style based on content hierarchy
✓ Use text or icon dividers to provide context for the separation
✓ Maintain consistent spacing with compact, default, relaxed, or loose modifiers
✓ Use vertical dividers for inline navigation or menu items

Common Pitfalls

✗ Avoid overusing dividers - too many can clutter the interface
✗ Don't use heavy dividers for minor content breaks
✗ Avoid mixing too many divider styles on the same page
✗ Don't use colored dividers without semantic meaning