DecorativeDivider

Elegant decorative element displaying horizontal lines with an optional icon between them. Use above section headings to add visual polish and signal section importance. Creates the ‘--- icon ---’ pattern commonly seen in premium websites.

Use Cases

• Above section headings for elegant content sections (Our Story, About, Schedule)
• Between testimonials or review cards to create visual breathing room
• Above pricing tables or feature sections for emphasis
• Between timeline events or milestones
• At the start of footer sections
• To separate content blocks while maintaining visual connection

Properties

icon

Icon displayed between the horizontal lines. Choose based on content context and site theme. Type: string. Options: heart, star, diamond, leaf, ring, none. Default: heart

Tip: Consistency – Use the same icon throughout a page/site for visual cohesion. Contextual – Match icon to page theme – don’t use hearts on a corporate site.

lineStyle

Visual style of the horizontal lines flanking the icon. Type: string. Options: solid, dashed, gradient. Default: solid

Visual Impact: solid – Clean, classic look with solid lines at 30% opacity; dashed – More decorative, playful feel with dashed lines; gradient – Elegant fade effect – lines fade from transparent to solid to transparent.

Tip: Elegant – Use ‘solid’ or ‘gradient’ for elegant/luxury designs. Playful – Use ‘dashed’ for whimsical/casual designs (kids sites, parties).

lineWidth

Width of each horizontal line on either side of the icon. Type: string. Options: short, medium, long. Default: medium

Visual Impact: short – 40px each side - subtle, doesn’t span much width; medium – 64px each side - balanced, works for most cases; long – 96px each side - prominent, spans more of the container.

Tip: Narrow-content – Use ‘short’ for narrow content areas or cards. Full-width – Use ‘long’ for full-width sections with centered content.

color

Optional custom color for the divider. Defaults to theme accent color (--theme-accent) or primary color (--theme-primary) if accent not set. Type: string. Default: (none – uses theme colors)

Tip: Theme-aware – Leave empty to use theme colors for consistency. Custom – Set explicitly only when section needs distinct color treatment.

spacing

Vertical margin above and below the divider. Type: string. Options: compact, normal, generous. Default: normal

Visual Impact: compact – 16px margin - tight spacing for dense layouts; normal – 24px margin - balanced spacing for most uses; generous – 32px margin - luxury/premium feel with breathing room.

Tip: Luxury – Use ‘generous’ for luxury/premium sites. Dense – Use ‘compact’ when space is limited or content is dense.

customCss

Custom CSS styles for advanced styling. Applies to the container div. Type: string. No default value.

Best Practices

• Place ABOVE headings, not below - the divider signals ‘new section starting’
• Match icon to content context (heart=romance, star=celebration, diamond=luxury)
• Use consistent divider styling throughout the page for visual cohesion
• Combine with generous section spacing for maximum elegance
• Use ‘none’ icon for modern/minimal designs where lines alone are sufficient
• Pair with warm off-white section backgrounds (#fefdfb) for soft, premium feel

Common Mistakes

Placing divider BELOW heading instead of ABOVE

Why it's a problem: Divider signals ‘new section starting’ - placing below breaks visual flow.

Fix: Always place DecorativeDivider before (above) the Heading component.

Using heart icon on corporate/professional sites

Why it's a problem: Icon should match content context - hearts feel inappropriate for B2B.

Fix: Use ‘star’, ‘diamond’, or ‘none’ for professional contexts.

Overusing dividers - placing one before every section

Why it's a problem: Too many dividers create visual clutter and lose their impact.

Fix: Reserve dividers for key content sections (hero content, story, testimonials).

Using different icons throughout the same page

Why it's a problem: Inconsistent icons create visual chaos.

Fix: Pick one icon and use it consistently across all dividers on the page.