Figma content divider components

The content divider is the quietest thing in a design system and one of the first to go feral. A rule with a date on it in an activity feed, a labelled break between two blocks of a long form, a line above a table with a filter button parked on the right, a tinted band separating yesterday from today in a message thread. Each one is drawn by a different person on a different day, and by the third quarter you have four line weights and three label sizes doing one job.

Space first, a line second

A divider is what you reach for when you cannot afford the space that would have done the same work. Grouping by proximity is the stronger signal, as Nielsen Norman Group's write up of the proximity principle lays out: things placed near each other read as belonging together before any line is drawn.

So the order of escalation is space, then a rule, then a filled band, and you only move down that list when the layout is too dense for the step above. Dense is not a slur here. Data tables, settings forms and feeds genuinely run out of room, which is exactly why this component exists rather than a note in the spacing docs.

Six content types across three styles

The two variant properties map onto that escalation. Style covers Single line, where the content sits on a rule that runs through it, Dual line, where the content sits between two rules, and Background fill, which drops the rules and uses a tinted band instead.

Type covers what the divider carries: a heading, a line of text, a single button, an icon button, a button group, or a button group with icons. Six by three is the whole set at 18 variants, and because both are variant properties, moving a divider from a bare label to a labelled row with two actions is a dropdown rather than a rebuild.

The heights are the useful part

Each combination has a fixed height, which is what stops a page of dividers from drifting. Single line runs tightest: 20px for text, 24px for a heading, 36px once any button is present. Dual line roughly doubles it, at 44px for text, 48px for a heading and 60px for the button rows, with the icon button version at 56px. Background fill sits between the two, at 36px, 40px and 52px.

Those numbers are worth knowing before you choose, because a feed with forty date dividers in the dual line style spends several hundred pixels on separators alone. Width is not fixed at all: the dividers fill their container, drawn across 1,216px in the preview file, so the same instance works in a 343px mobile column and a full width table header without editing.

Where it stops being a divider

There is a real boundary between this component and a heading. A divider separates peers, which is why the label sits at body size and the actions are secondary.

Once the label needs to be a page level title, or the row needs a description underneath it, you have crossed into a section header, or a card header if the block is a card. The failure mode is a divider that grows a subtitle and a primary button and quietly becomes the most important element on a screen it was meant to be organising. Settings screens are where this happens most, since every form block wants a title and a save.

When it is time to build, Untitled UI React content dividers are open source, built with Tailwind CSS and React Aria, with the same styles and the same fill behavior in code.