Divider
You might say
These two sections feel cramped. Add a subtle line between them.
Use a line to separate two different groups of contentA divider shows that one group has ended and another has begun. It works between list sections, menu groups, and information blocks. If spacing already makes the relationship clear, another line will only make the page feel fragmented.
When to use it
- Separate groups in a long list
- Divide sections inside a menu
- Mark a clear change of topic in a compact panel
- Separate a footer or action area from the content above
When NOT to use it
- Draw a line between every item in a spacious layout
- Use a divider when Space already shows the grouping
- Mix many line colors and weights without meaning
- Use decoration as if it were a real content boundary
Anatomy
Above content: Basic information
Content below: Preferences
Other login methods
Use thin lines and low-contrast colors to avoid overpowering your content
Optional text, such as "other login methods," should be visually subdued
Variants
Horizontal
When the content above and below is unrelated, add a subtle separator.
With Text
Other ways
When a label explains the transition, such as “other login methods.”
Vertical
✎⬇
Separate icons for different functions in the toolbar
Dashed
Weaker than a solid line, used for secondary or temporary separations
Typical use cases
Settings groups
Account settings
Personal informationAlex Chen ›
Login passwordAlready set ›
Notification preferences
Email notification
Browser push
Menu sections
Alex Chen · 2 hours ago
I tried this spacing approach. It works well on mobile and is ready to merge.
Maya Lee · 1 hour ago
Got it. I’ll update the component docs this afternoon.
Article sections
B
I
U
🔗
🖼
↩
Card footer
Log in to Vibe Coding Guide
Other login methods
📧📱🐧
Further reading