OUDSHorizontalDivider

Divider is a UI element that allows to structure the content by visually separating the content zones. Divider improves readability and content organization without introducing a stronger visual hierarchy like a heading or a container would. A horizontal Divider is used to separate content laid out one under the other (VStack). The divider can be colored using dedicated OUDSDividerColor colors. The thickness (height) is fixed by dedicated token from OUDSTheme.

iOS 15.0+
macOS 13.0+
tvOS 16.0+
visionOS 1.0+
watchOS 11.0+

@MainActor struct OUDSHorizontalDivider

Mentioned In

Layouts

Code samples

VStack {
    Text("Hello wolrd!")
    OUDSHorizontalDivider(color: .brandPrimary)
    Text("Happy to see you")
}

Design documentation

unified-design-system.orange.com

Themes rendering

Orange

An horizontal divider component in light and dark modes with Orange theme

Orange Compact

A horizontal divider component in light and dark modes with Orange Compact theme

Sosh

A horizontal divider component in light and dark modes with Sosh theme

Wireframe

A horizontal divider component in light and dark modes with Wireframe theme

Version
1.0.0 (Figma component design version)

Since
0.14.0

Topics

Initializers

init(color: OUDSDividerColor)
Create a horizontal colored divider.

Instance Properties

var body: some View