Work in progress

Divider

Use NHSDivider() to add a divider between items within a custom card style component.

The divider works in the same way as the SwiftUI Divider component, but is styled using the NHS colour palette.

Screenshot of a white card component with 'First item' and 'Second item' separated by a pale blue horizontal line

How to use

Use divider within a custom view:

VStack(alignment: .leading, spacing: 16) {
    Text("First item")
    NHSDivider()
    Text("Second item")
}
.foregroundStyle(.nhsText)
.nhsCardStyle()

Custom colours and thickness

You can also change the colour of the divider and its thickness:

Screenshot of a pale blue card component with 'First item' and 'Second item' separated by a thicker, darker blue horizontal line

VStack(alignment: .leading, spacing: 16) {
    Text("First item")
    NHSDivider(color: .nhsBlue.opacity(0.2), thickness: 2)
    Text("Second item")
}
.foregroundStyle(.nhsText)
.nhsCardStyle(backgroundColor: .nhsPaleBlue)
.padding()
.background(.nhsBackground)