PDS proposals
← All proposals

LabeledDivider

Net-new LabeledDivider: a horizontal rule with a pill-shaped label centered on it.

Net-new componentOpen in Storybook

proposals/LabeledDivider/labeled-divider-story.css15 lines · View on GitHub
/* Story-only: stacks several dividers with a gap. Not part of the component. */
.labeled-divider-story {
	display: grid;
	gap: var(--pds-spacing-l);
}

/* Story-only: the content revealed by the Show more control. */
.labeled-divider-story__more {
	display: grid;
	gap: var(--pds-spacing-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}