HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
DividerView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA line that separates content into groups.StableSince 0.1.0LayoutUsageimport'@fusion.dev/helix/divider'import'@fusion.dev/helix-headless/divider'Preview
API ReferenceRoothelix-dividerA line that separates content into groups.
PropTypeDescriptionannouncedbooleanDefaultfalseWhether screen readers announce the line as a separator, which they now do
by default.contentPlacement"end"|"start"Where content set into the line sits along it.decorativebooleanDefaultfalseTakes the line out of the accessibility tree, for a rule that separates
nothing: one under a heading, or between the facts of a byline.orientation"horizontal"|"vertical"The direction the line runs: horizontal or vertical.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)Content set into the line, such as a word between two sections.
PartDescriptioncontentThe content set into the line.lineThe line, or each half of it when content is set into it.
CSS PropertyDescription--divider-colorThe color of the line.--divider-content-colorThe color of the content set into the line.--divider-content-font-familyThe typeface of the content set into the line. The sans face by default.--divider-content-font-sizeThe size of the content set into the line. The xs step by default.--divider-content-font-weightThe weight of the content set into the line. The weight around the divider by default.--divider-content-gapThe space either side of the content set into the line.--divider-content-offsetThe length of line before the content under content-placement="start", or after it under end.--divider-lengthThe length of a vertical line. A horizontal line takes the divider's width.--divider-paddingThe space removed from both ends of the line.--divider-padding-endThe space removed from the end of the line only.--divider-padding-startThe space removed from the start of the line only.--divider-thicknessThe thickness of the line.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.verticalThe line runs vertically: orientation="vertical", or no orientation inside a horizontal toolbar.
Roothelix-headless-dividerA line that separates content into groups.
PropTypeDescriptionannouncedbooleanDefaultfalseWhether screen readers announce the line as a separator, which they now do
by default.decorativebooleanDefaultfalseTakes the line out of the accessibility tree, for a rule that separates
nothing: one under a heading, or between the facts of a byline.orientation"horizontal"|"vertical"The direction the line runs: horizontal or vertical.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)Content set into the line, such as a word between two sections.
PartDescriptioncontentThe content set into the line.lineThe line, or each half of it when content is set into it.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.verticalThe line runs vertically: orientation="vertical", or no orientation inside a horizontal toolbar.
Examples
NameDescriptionContent PlacementWords set toward the start or the end of the line, as a section label sits in a form.InsetA divider between list items that starts where their labels start, set with --divider-padding-start.PreviewA divider between two paragraphs.PreviewA divider between two paragraphs.VerticalVertical dividers between items on one line.With ContentA divider with a word set into it, such as the “or” between two ways to sign in.