Skip to main content
A simple visual separator card that renders a horizontal line. Use this card to create visual separation between sections of a form or to organize content into logical groups.

​
Type

type: "horizontalLine"

​
Properties

None

​
Layout

  • Default Width: Full width of container
  • Default Height: Minimal (just the line height)
  • Supports Children: No

​
Configuration Example

- type: horizontalLine
  id: separator1
  layout:
    x: 0
    y: 4
    w: 12
    h: 1

​
Styling

The horizontal line uses:
  • Border color: border-gray-200 (light gray)
  • Top margin: mt-5 (20px)
  • Bottom margin: mb-5 (20px)
  • Border style: Top border only

​
Use Cases

​
Section Separation

- type: label
  id: section1
  properties:
    label: "Section 1"
  layout:
    x: 0
    y: 0
    w: 12
    h: 1

- type: horizontalLine
  id: separator
  layout:
    x: 0
    y: 1
    w: 12
    h: 1

- type: label
  id: section2
  properties:
    label: "Section 2"
  layout:
    x: 0
    y: 2
    w: 12
    h: 1

​
Visual Grouping

Create visual boundaries between related content: 
- type: cardGroup
  id: group1
  properties:
    title: "Customer Details"
  layout:
    x: 0
    y: 0
    w: 12
    h: 4

- type: horizontalLine
  id: divider
  layout:
    x: 0
    y: 4
    w: 12
    h: 1

- type: cardGroup
  id: group2
  properties:
    title: "Order History"
  layout:
    x: 0
    y: 5
    w: 12
    h: 4

​
Notes

  • This is a purely visual component with no interactive functionality
  • The component takes no configuration properties
  • Margins provide automatic spacing above and below the line
  • The line spans the full width of its container
  • Useful for improving form readability and organization
  • Lightweight component with minimal performance impact