Separator

The Separator in SureForms is a visual element used to break up sections of a form. It helps improve readability and organization by adding a horizontal line between form fields. This is especially useful for long forms where separating content improves the user experience.

Key Attributes

• Separator Style:
  Choose between different line styles, such as None, Dotted, Dashed, Double, Solid, Rectangles, Parallelogram, Slash, and Leaves to match your form’s design.
• Add Element:
  None – Displays a plain horizontal line with no additional content.
  Text – Adds custom text centered within the line (e.g., “Section 2” or “Payment Info”).
  Icon – Displays an icon in the center of the line to visually represent the section or category.

Style

• Alignment:
  Controls the horizontal alignment of the separator line. You can choose from:
  Left – Aligns the separator to the left side of the form container.
  Center – Centers the separator (default).
  Right – Aligns the separator to the right.
• Width:
  Sets the total width of the separator line. You can define it in percentages (e.g., 100%) or fixed units (e.g., 300px) to control how much space the line takes across the form.
• Size:
  Adjusts the thickness of the separator line. A higher value makes the line appear bolder.
• Separator Height:
  Controls the vertical spacing (height) of the separator block, including padding above and below the line. This affects the overall breathing space between form sections.
• Color:
  Allows you to change the color of the separator line to match your form’s style or branding. Accepts solid color values (HEX, RGB, etc.).

• Alignment:
  Determines the position of the icon within the separator line. You can choose to align the icon to the left, center, or right of the separator. Center alignment is commonly used to mark form sections.
• Color:
  Sets the color of the icon. This helps match the icon with your form’s branding or contrast against the separator line.
• Icon Size:
  Defines the size of the icon. You can increase or decrease the value (in pixels) to make the icon more visually prominent or subtle, depending on your design needs.
• Spacing:
  Controls the space between the icon and the separator line.

• Padding:
  Padding controls the inner space between the content (like icon or text) and the edges of the separator block. Increasing padding adds space inside the element, which helps improve readability and avoids content appearing cramped.
• Margin:
  Margin defines the outer space around the separator element. Adjusting the margin changes the spacing outside the separator, helping you manage the distance between it and other form fields or sections.