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" />

📍 Position

Control ribbon alignment:

Left (Default)

1
<SectionSeparator position="left" />

Natural reading flow, arrow points right.

Center

1
<SectionSeparator position="center" />

Centered ribbon, arrows on both ends (for ribbon/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" />

📐 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 → Suitable for lengthy ribbon without title or for section completion
• normal → Standard/default width
• thick → Important subsections

✨ Features

• ✅ 7 ribbon styles - Inspired by CSS ribbon patterns
• ✅ 3 positions - Left, center, right alignment
• ✅ 2 height options - thin, normal & thick
• ✅ 12 preset colors + custom hex colors
• ✅ Auto theme detection - Adapts to light/dark mode
• ✅ Pure CSS - No images, all CSS shapes
• ✅ Lightweight - Minimal performance impact
• ✅ Responsive - Works on all screen sizes

🎨 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

1
<SectionSeparator style="zigzag" />

Use for: Fun content, children’s themes

Happy blogging! ✨