Section Divider Separator for React

Use a line when the sections belong to one page or form. Use Cards when each block stands on its own, something people open or rearrange. Lines keep a continuous reading flow; cards add weight and isolation.

gap-6 or gap-8 around the line, with a tight gap-1 inside each heading and description pair, as here. Loose between sections and tight within them is what makes the line read as a section break.

Section, line, next heading. A line directly above a title reads as a rule over the heading rather than a break between sections.

Keep the same one-pixel line in the border color. The hierarchy comes from spacing and headings, not a thicker line; save thick or double lines for rare formal breaks.

The headings are the structure: screen reader users jump from heading to heading. The line is exposed as a separator, which matches the break between the two sections.

Usually keep them. If vertical space is tight, reduce the outer gap rather than removing the line; switching to cards on small screens is a layout change, not a separator tweak.