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.
You can say this to an AI Agent
Reduce rules on the settings page: group Account, Security, and Notifications primarily with headings and block spacing, adding one subtle divider only when needed. Do not rule every row, and verify dark mode and mobile grouping.
When to use it
- Separate groups in a long listBasic informationPreferences
- Divide sections inside a menuSign-in page designIn progressPayment-flow reviewCompleted
- Mark a clear change of topic in a compact panel
- Separate a footer or action area from the content aboveSign in with WeChat QR codeOther sign-in methods
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 boundaryProject newsAllThe card is already a boundary; don’t add more lines inside it
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
📧📱🐧
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check