Section Separator - Ribbon Dividers

Elegant CSS ribbon-style separators inspired by classic design patterns. Perfect for subsections and content organization.

📦 Import the Components

1
import SectionSeparator from "@/react/SectionSeparator/SectionSeparator.jsx";

or with relative path:

1
import SectionSeparator from "../../react/SectionSeparator/SectionSeparator.jsx";

Important: Use .mdx extension (not .md) when working with React components.

🚀 Quick Start

1
<SectionSeparator />

The separator automatically adapts to your theme and creates a stylish ribbon effect.

🎨 Ribbon Styles

Ribbon (Default)

Classic ribbon with arrow point:

1
<SectionSeparator style="ribbon" />

Folded

Ribbon with 3D folded corner:

1
<SectionSeparator style="folded" />

Notched

Sharp notched ends:

1
<SectionSeparator style="notched" />

Bookmark

Bookmark-style pointer:

1
<SectionSeparator style="bookmark" />

Tag

Price tag with hole:

1
<SectionSeparator style="tag" />

Stitched

Stitched edge effect:

1
<SectionSeparator style="stitched" />

Zigzag

Zigzag edge pattern:

1
<SectionSeparator style="zigzag" />

1
<SectionSeparator style="zigzag" client:load>
2
## THE CODE BLOCK TUTORIAL
3
</SectionSeparator>

1
<SectionSeparator style="zigzag" color="blue" title="Welcome to my new page" />

📍 Position

Control ribbon alignment:

Left (Default)

1
<SectionSeparator position="left" />

Natural reading flow, arrow points right.

Center

1
<SectionSeparator position="center" />

Centered ribbon, asymmetric V-cuts (left side inward, right side outward) for default, ribbon, notched, bookmark, tag, and stitched styles.

Right

1
<SectionSeparator position="right" />

Right-aligned, arrow points left.

📏 Width

Control ribbon length:

Normal(25%) - default

1
<SectionSeparator />

Compact accent for subtle breaks.

20% length

1
<SectionSeparator length={20} color="blue" />

Balanced size for short title type cases.

70% length

1
<SectionSeparator length={70} color="purple" />

Prominent divider for major subsections.

📏 height

1
// 20px
2
<SectionSeparator height="thin" />

1
// 32px (default)
2
<SectionSeparator height="normal" />

1
// 48px
2
<SectionSeparator height="thick" />

1
<SectionSeparator
2
  title="Step 1: Setup"
3
  style="folded"
4
  color="emerald"
5
  length={35}
6
/>

1
<SectionSeparator
2
  title="Configuration"
3
  style="ribbon"
4
  color="blue"
5
  height="thick"
6
  length={30}
7
/>

📍 Markdown heading as title

Make sure to use client:load when passing markdown heading as title

1
<SectionSeparator style="ribbon" length={40} client:load>
2
  ## Anand wrote
3
</SectionSeparator>

1
<SectionSeparator title="My Title" style="folded" />

1
<SectionSeparator title="Ignored" style="stitched" client:load>
2
  ### My title
3
</SectionSeparator>

🎨 Colors

Auto (Default)

Theme-aware emerald color:

1
<SectionSeparator color="auto" />

Preset Colors

12 beautiful color options:

Emerald • color="emerald"

Blue • color="blue"

Purple • color="purple"

Pink • color="pink"

Orange • color="orange"

Red • color="red"

Yellow • color="yellow"

Green • color="green"

Indigo • color="indigo"

Teal • color="teal"

Cyan • color="cyan"

Rose • color="rose"

Custom Hex Colors

1
<SectionSeparator color="#8b5cf6" />

1
<SectionSeparator color="#f59e0b" />

Light Colors for Subheadings

Perfect for section titles with good text contrast:

1
<SectionSeparator title="Sky Blue" color="#38bdf8" length={30} />

1
<SectionSeparator title="Violet" color="#a78bfa" length={30} />

1
<SectionSeparator title="Rose" color="#fb7185" length={30} />

1
<SectionSeparator title="Amber" color="#fbbf24" length={30} />

1
<SectionSeparator title="Lime" color="#a3e635" length={30} />

1
<SectionSeparator title="Turquoise" color="#2dd4bf" length={30} />

1
<SectionSeparator title="Coral" color="#f97316" length={30} />

1
<SectionSeparator title="Lavender" color="#c084fc" length={30} />

1
<SectionSeparator title="Mint Green" color="#6ee7b7" length={30} />

1
<SectionSeparator title="Emerald Light" color="#34d399" length={30} />

1
<SectionSeparator title="Sea Green" color="#2dd4bf" length={30} />

1
<SectionSeparator title="Spring Green" color="#4ade80" length={30} />

1
<SectionSeparator title="Peach" color="#fdba74" length={30} />

1
<SectionSeparator title="Sunset Orange" color="#fb923c" length={30} />

1
<SectionSeparator title="Hot Pink" color="#f472b6" length={30} />

1
<SectionSeparator title="Fuchsia" color="#e879f9" length={30} />

1
<SectionSeparator title="Aqua" color="#22d3ee" length={30} />

1
<SectionSeparator title="Sage Green" color="#86efac" length={30} />

1
<SectionSeparator title="Forest Green" color="#22c55e" length={30} />

1
<SectionSeparator title="Slate Blue" color="#60a5fa" length={30} />

📐 Spacing

Tight (16px)

1
<SectionSeparator spacing="tight" />

Minimal vertical space.

Normal (24px) - Default

1
<SectionSeparator spacing="normal" />

Standard spacing for most content.

Loose (40px)

1
<SectionSeparator spacing="loose" />

Extra breathing room.

⚙️ Props Reference

💡 Usage Examples

Subsection Breaks

Organize content with visual hierarchy:

1
<SectionSeparator title="Introduction" />

1
<SectionSeparator title="Getting Started" color="blue" />

1
<SectionSeparator title="Advanced Topics" length={40} height="thick" color="purple" />

Position Variations

Mix positions for creative layouts:

1
<SectionSeparator position="left" color="blue" style="ribbon" />

Left-aligned content with arrow pointing right.

1
<SectionSeparator position="center" color="purple" style="folded" />

Centered content for balanced design.

1
<SectionSeparator position="right" color="pink" style="bookmark" />

Right-aligned content with arrow pointing left.

🎯 Style Showcase

All Styles in Action

Width Comparison

Position Comparison

1
<SectionSeparator position="left" color="emerald" length="60" title="left aligned 60% emerald" />

📝 Best Practices

1. Consistent Styling

Choose 1-2 ribbon styles for your entire blog:

1
// ✅ Good - Consistent
2
<SectionSeparator style="ribbon" />
3
<SectionSeparator style="ribbon" color="blue" />
4
<SectionSeparator style="ribbon" color="purple" />
5

6
// ❌ Inconsistent
7
<SectionSeparator style="ribbon" />
8
<SectionSeparator style="tag" />
9
<SectionSeparator style="zigzag" />

2. Color Meaning

Assign semantic meaning to colors:

• Blue → Information, tips
• Yellow → Warnings, cautions
• Red → Errors, important alerts
• Green → Success, go-ahead
• Purple → Premium, advanced topics
• Orange → Updates, changes

3. Position Guidelines

• Left → Best for blog posts (natural reading)
• Center → Good for formal documentation
• Right → Creative layouts, unique designs

5. Height Selection

• thin → Compact design, subtle separators
• normal → Standard size for most use cases (default)
• thick → Prominent separators for important sections

✨ Features

• ✅ 7 ribbon styles - Ribbon, folded, notched, bookmark, tag, stitched, zigzag
• ✅ 3 positions - Left, center, right alignment with smart V-cuts
• ✅ 3 height options - Thin (20px), normal (32px), thick (48px)
• ✅ 3 spacing options - Tight (16px), normal (24px), loose (40px)
• ✅ 12 preset colors + custom hex colors
• ✅ Auto theme detection - Adapts to light/dark mode
• ✅ Text support - Via title prop or markdown heading (with client:load)
• ✅ Pure CSS - No images, all CSS shapes and gradients
• ✅ Lightweight - Minimal performance impact
• ✅ Responsive - Works on all screen sizes
• ✅ Zigzag special - Dynamic word-based folding with gradient depth effect

🎨 Style Guide

Ribbon Styles Overview

When to Use Each Style

Ribbon - Classic and versatile

1
<SectionSeparator style="ribbon" />

Use for: General subsections, neutral content

Folded - Premium feel

1
<SectionSeparator style="folded" />

Use for: Important sections, premium content

Notched - Modern and sharp

1
<SectionSeparator style="notched" />

Use for: Tech blogs, minimalist design

Bookmark - Directional

1
<SectionSeparator style="bookmark" />

Use for: Navigation hints, progress indicators

Tag - Labeled content

1
<SectionSeparator style="tag" />

Use for: Categories, labels, prices

Stitched - Handcrafted

1
<SectionSeparator style="stitched" />

Use for: Personal blogs, creative content

Zigzag - Playful and dynamic

1
<SectionSeparator style="zigzag" />

Use for: Fun content, creative sections. Text displays on outer (non-gradient) zigzag folds. Minimum 3 folds, increases with word count.

Happy blogging! ✨