Skip to content
KOVEXON Docs

Divider Section

Overview

Section titled “Overview”

The Divider Section is a minimal content block that creates visual separation or spacing between other content sections.
Use it sparingly to break up long content or create clear visual boundaries between different topics.

Fields

Section titled “Fields”

Divider Width

Section titled “Divider Width”
  • Type: String
  • Required: No
  • Purpose: Controls the width of the divider line
  • Default Value: 100%
  • Options:
    • 100% – Full width
    • Container Width (max-w-6xl) – Container width
    • Custom Width – Custom width value

Custom Width

Section titled “Custom Width”
  • Type: String
  • Required: No
  • Purpose: Custom CSS width value (e.g., “400px”, “50vw”, “20rem”). Only used when width is set to “Custom Width”
  • Note: Only visible when “Divider Width” is set to Custom Width
  • Example:
    400px, 50vw, or 20rem

Usage Example

Section titled “Usage Example”

Typical Configuration

Section titled “Typical Configuration”
  • Divider Width: 100% – Full-width divider
  • Divider Width: Container Width (max-w-6xl) – Constrained width within the container
  • Divider Width: Custom Width with Custom Width: e.g. 400px or 50vw – Custom width value

Best Practices

Section titled “Best Practices”
  • Sparingly: Use dividers sparingly to maintain readability—too many can make content feel fragmented
  • Consistency: Use consistent widths within a page for visual harmony
  • Purpose: Have a clear purpose for each divider (separation or spacing)
  • Context: Consider whether a divider adds value or if content structure could achieve the same effect
  • Width: Full width dividers work best for clear section breaks; container width for subtle separation

Key Features

Section titled “Key Features”
  • Simple and flexible: Minimal configuration for maximum flexibility
  • Visual separation: Clear visual boundaries between content sections
  • Width options: Multiple width options for different design needs
  • Lightweight: Minimal impact on page performance

Where It’s Used

Section titled “Where It’s Used”
  • Pages (page)
    General content pages for section separation
  • Legal Pages (legalPage)
    Legal pages requiring clear section breaks

Technical Notes

Section titled “Technical Notes”
  • Custom width accepts any valid CSS width value (px, vw, rem, %, etc.)
  • Background color is not configurable for this section
  • The divider uses semantic HTML for accessibility