Horizontal Rule

Last updated: February 3, 2026

Overview

The Horizontal Rule component creates a visual divider line between sections of your page. It's commonly used to separate content blocks, break up long pages, or add visual hierarchy to your layouts.

How to Add a Horizontal Rule

  1. In the Replo editor, click the + button or use the component panel
  2. Search for "Horizontal Rule" in the components list
  3. Drag it onto your canvas or click to insert it at your cursor position

Customization Options

You can style the Horizontal Rule using the design panel on the right side of the editor:

Size

  • Width: Control how wide the line spans (e.g., 100% for full width, or a fixed pixel value)
  • Height: Adjust the thickness of the line (e.g., 1px for a thin line, or thicker for a bold divider)

Spacing

  • Margin: Add space above and below the horizontal rule to separate it from surrounding content
  • Padding: Adjust internal spacing if needed

Appearance

  • Background Color: Change the color of the line to match your brand or design
  • Border Radius: Round the edges of the line for a softer look
  • Opacity: Make the line more subtle by reducing its opacity

Common Use Cases

  • Separating product sections on a landing page
  • Breaking up long-form content or FAQs
  • Creating visual breaks between testimonials or features
  • Adding decorative lines as part of your page design

Tips

  • For a subtle divider, use a light gray color with 1px height
  • For a bold statement, try a thicker line (3-5px) in your brand color
  • Combine with margin/padding to ensure proper spacing from surrounding elements