Overview
The Divider component provides a visual separator to group and organize content sections. It supports both horizontal and vertical orientations with subtle and strong variants for different emphasis levels.
Key Features
- 2 orientations (horizontal, vertical)
- 2 variants (subtle, strong)
- Trauma-informed design (subtle by default)
- Semantic HTML with proper ARIA attributes
- Flexible sizing with custom classes
Horizontal Dividers
Subtle (Default)
Gentle separation for content sections. Uses neutral-200 border color for a calm, unobtrusive appearance.
Content above divider
Content below divider
Strong
More prominent separation for major content sections. Uses neutral-300 border color for increased visibility.
Content above divider
Content below divider
Vertical Dividers
Subtle Vertical
Gentle vertical separation for side-by-side content.
Left content
Right content
Strong Vertical
More prominent vertical separation for distinct content areas.
Left content
Right content
Usage in Content Sections
List Item Separation
First Item
Description of the first item
Second Item
Description of the second item
Third Item
Description of the third item
Card Sections
Card Header
Header content goes here
Card Body
Main content goes here
Card Footer
Footer content goes here
Toolbar Button Groups
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | string | 'horizontal' | Divider orientation: 'horizontal', 'vertical' |
| variant | string | 'subtle' | Visual emphasis: 'subtle', 'strong' |
| class | string | '' | Additional CSS classes (e.g., height for vertical dividers) |
Usage Examples
Basic Horizontal Divider
<x-building-blocks.divider />Strong Horizontal Divider
<x-building-blocks.divider variant="strong" />Vertical Divider with Custom Height
<x-building-blocks.divider orientation="vertical" class="h-8" />In List Items
<div class="space-y-0">
<div class="py-4">First Item</div>
<x-building-blocks.divider />
<div class="py-4">Second Item</div>
<x-building-blocks.divider />
<div class="py-4">Third Item</div>
</div>Accessibility Guidelines
WCAG 2.1 AA Compliance
-
Semantic HTML: Uses
<hr>element with proper role="separator" -
ARIA Attributes: Includes aria-orientation for screen reader context
-
Visual Clarity: Sufficient contrast for visual separation (3:1 minimum)
-
Trauma-Informed: Subtle variant by default for calm, non-aggressive separation
Best Practices
Do
- • Use subtle variant for most separations
- • Use strong variant for major section breaks
- • Add custom height classes for vertical dividers
- • Use in lists, cards, and toolbars
- • Maintain consistent spacing around dividers
- • Consider semantic grouping of content
Don't
- • Overuse strong variant (creates visual noise)
- • Use dividers between every element
- • Forget to set height for vertical dividers
- • Use as decorative elements
- • Mix variants inconsistently
- • Use when whitespace would suffice
Design Considerations
Trauma-Informed Design
The subtle variant is the default to create calm, non-aggressive visual separation. This aligns with trauma-informed design principles by avoiding harsh visual boundaries.
When to Use Dividers
Use dividers to create visual hierarchy and group related content. Consider using whitespace alone for subtle separations, and reserve dividers for when explicit boundaries are needed.
Vertical Divider Height
Vertical dividers require explicit height. Use Tailwind height utilities (h-8, h-12, h-full) or match the height of adjacent content for proper visual alignment.