Component Card

Divider

Separate related groups without adding heavy visual chrome.

Divider anatomy

When to Use

Long forms or settings pages with multiple logical groups.
Dense lists where section breaks need reinforcement.
Dashboard side panels with repeated block groupings.

When NOT to Use

Use subtle dividers between major groups and keep spacing rhythm intact.

If spacing and headings already separate content clearly, skip the divider.

Variants

Hairline

Inset divider

Label divider

Confused?

If you are trying to separate navigation depth, use Breadcrumbs instead.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Insert dividers between related settings groups without breaking section spacing or visual hierarchy.

Pencil Prompt

Add divider lines to separate sections while keeping section titles and content spacing intact.

Next Lesson

Navbar