Separate content with a thin line.
Preview
code
1Above2─────────────3BelowUsage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeDivider,3 Spacing: 2,4}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "divider" | Node type | required |
spacing | number | string | Outer spacing applied above and below the divider | - |
color | string | ThemeColor | Color of the divider line | "default" |
size | number | string | Thickness of the divider line in pixels | 1 |
flush | boolean | Flush the divider to the edge of its container | false |
Color Tokens
default- Standard border colorsubtle- Lighter, less prominentstrong- Darker, more prominent
Examples
Basic Divider
go
1{2 Type: models.WidgetNodeTypeCol,3 Gap: 2,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeText, Value: "Section 1"},6 {Type: models.WidgetNodeTypeDivider},7 {Type: models.WidgetNodeTypeText, Value: "Section 2"},8 },9}With Custom Spacing
go
1{Type: models.WidgetNodeTypeDivider, Spacing: 4}Subtle Divider
go
1{Type: models.WidgetNodeTypeDivider, Color: "subtle"}TypeScript
typescript
1const node: WidgetNode = {2 type: "divider",3 spacing: 2,4 color: "default",5}Best Practices
- Use sparingly - Too many dividers create visual clutter
- Prefer spacing - Often
gapon Col is sufficient - Use for logical sections - Divide distinct content groups