Section Separator

Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.

To ensure that the section separator is properly rendered, please be sure to use our global width prop to set width to 100%. See here for more information on the global width prop.

Line Separator


PBSectionSeparator()

Dashed Separator


PBSectionSeparator(variant: .dashed)

Text Separator


PBSectionSeparator("Text separator")

Vertical


let loremIpsum: some View = Text(
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
)

HStack(spacing: Spacing.none) {
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
  PBSectionSeparator(orientation: .vertical)
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
}
.frame(maxWidth: .infinity)
.frame(height: 120, alignment: .center)
.listRowSeparator(.hidden)

Children


PBSectionSeparator(variant: .dashed) {
  PBCard(alignment: .center, borderRadius: BorderRadius.rounded, padding: Spacing.xxSmall, width: 70) {
    Text("Today")
      .pbFont(.caption)
      .frame(maxWidth: .infinity, alignment: .center)
  }
}

Props

Name	Type	Description	Default	Values
text	`String`	Adds text to the Section Separator	`nil`
orientation	`Orientation`	Changes the orientation	`.horizontal`	`.horizontal` `.vertical`
variant	`Variant`	Changes the style of the Section Separator	`.card`	`.dashed` `.card`
dividerOpacity	`CGFloat`	Adjusts the opacity of the divider	`1`
margin	`CGFloat`	Adds margin between text and the divider	`Spacing.xSmall`	`Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge`

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat