DecorativeDivider

An elegant decorative element that shows horizontal lines with an optional icon between them. Place it above section headings to add visual polish and signal the start of important sections, creating the “--- icon ---” pattern often seen on 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)

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. Default: (none)

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.