The Divider Block is a subtle but powerful layout tool that lets you insert a visual break between different content areas in your app. Use it to guide the user’s eye, create hierarchy, and improve content organization.
Whether you're separating product categories, breaking up text sections, or framing call-to-actions, the Divider keeps things clean and professional.
General Tab
Color:
Set the color of the divider line using a HEX code (e.g.,
#121212for black or#EAEAEAfor light gray).
Style:
Choose the line style:
Solid: A full, continuous line.
(Other styles, such as dashed or dotted).
Height:
Set the thickness of the divider in pixels.
Example:
1for a thin line,2-4for more emphasis.
Padding Tab
Adjust the spacing to define how much room is around your divider:
Padding: Controls space inside the divider block (adds space between the divider and its edges).
Margin: Adds external spacing between the divider and other blocks on the screen.
When to Use the Divider Block
Between Sections: Break up blocks like product lists, testimonials, and CTAs.
In Text Areas: Separate paragraphs or topics for better readability.
Guide Flow: Create visual rhythm throughout long-form content.
Pro Tips
Use color that blends with or complements your brand.
Match thickness and style with other UI elements for visual consistency.
Keep spacing consistent across all dividers for a polished layout.
Combine With
Heading Blocks: Use dividers above or below section titles.
Button Blocks: Add above/below CTAs to visually group them.
Text Blocks: Separate different types of messaging (e.g., benefits, reviews, policies).
Contact Us
For queries and feedback, feel free to reach out to us at help@beyondcart.com. We’re here to help and eager to assist you with your concerns.