Cardsibling
Cards provide stronger visual groupingSeparator
Visual divider between content sections. Use to create clear visual boundaries and improve content organization.
Setup
import { Separator } from '@fragments-sdk/ui';Examples
Default
Basic horizontal separator
Loading preview...
With Label
Labeled section divider
Loading preview...
Soft
Subtle separator
Loading preview...
Vertical
Vertical separator between elements
Loading preview...
Spacing Options
Different spacing sizes
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | enumhorizontalvertical | horizontal | Direction of the separator |
spacing | enumnonesmmdlg | none | Margin around the separator |
soft | boolean | false | Softer, lighter appearance |
label | string | Not set | Optional text label (horizontal only) |
style | object | Not set | — |
Usage Guidelines
When to use
- Dividing content sections
- Separating groups of related items
- Creating visual breathing room
- Labeled section breaks
When not to use
- Creating grid layouts (use CSS Grid)
- Decorative borders (use CSS)
- Spacing alone is sufficient
Best practices
- Use sparingly - too many separators create visual noise
- Consider if spacing alone would work
- Use soft variant for subtle separation
- Labeled separators work well for major section breaks
Accessibility
- Uses role="separator" for semantic meaning
- Decorative separators should be aria-hidden