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

import React from 'react'

import { SectionSeparator } from 'playbook-ui'

const SectionSeparatorLine = (props) => {
  return (
    <div>
      <SectionSeparator
      />
    </div>
  )
}

export default SectionSeparatorLine

Dashed Separator

import React from 'react'

import { SectionSeparator } from 'playbook-ui'

const SectionSeparatorDashed = (props) => {
    return (
        <SectionSeparator
            lineStyle='dashed'
        />
    )
}

export default SectionSeparatorDashed

Text Separator

import React from 'react'

import { SectionSeparator } from 'playbook-ui'

const SectionSeparatorText = (props) => {
  return (
    <SectionSeparator
        text="Text Separator"
    />
  )
}

export default SectionSeparatorText

Vertical

To guarantee the vertical section separator displays properly, please add the vertical: "stretch"/vertical="stretch" property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.

import React from 'react'

import { SectionSeparator, Flex, FlexItem } from 'playbook-ui'

const SectionSeparatorVertical = (props) => {
  return (
    <Flex
        inline="flex-container"
        vertical="stretch"
    >
      <FlexItem>
        {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
      </FlexItem>
      <SectionSeparator
          orientation="vertical"
      />
      <FlexItem>
        {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
      </FlexItem>
      <SectionSeparator
          orientation="vertical"
      />
      <FlexItem>
        {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
      </FlexItem>
    </Flex>
  )
}

export default SectionSeparatorVertical

Children

Pass anything (including any of our kits) to the children prop to customize a separator's content.

NOTE: passing children overrides any content passed to text

import React from 'react'

import { Card, Caption, SectionSeparator, Flex, FlexItem } from 'playbook-ui'

const childrenHorizontal = (
    <Card
        borderRadius="rounded"
        justifyContent="center"
        padding="none"
    >
        <Caption
            paddingLeft="xs"
            paddingRight="xs"
            size="xs"
            text="TODAY"
        />
    </Card>
)

const childrenVertical = (
    <Card
        borderRadius="rounded"
        justifyContent="center"
        padding="none"
    >
        <Caption
            paddingLeft="xs"
            paddingRight="xs"
            size="xs"
            text="TODAY"
        />
    </Card>
)

const SectionSeparatorChildren = (props) => {
    return (
        <>
            <SectionSeparator
                lineStyle='dashed'
            >
                {childrenHorizontal}
            </SectionSeparator>
            <Flex
                inline="flex-container"
                marginTop="lg"
                vertical="stretch"
            >
                <FlexItem>
                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
                </FlexItem>
                    <SectionSeparator
                        orientation="vertical"
                    >
                        {childrenVertical}
                    </SectionSeparator>
                <FlexItem>
                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
                </FlexItem>
            </Flex>
        </>
        
    )
}

export default SectionSeparatorChildren

Color

Pass "primary" to the color prop to change any section separator color.

NOTE: Passing children overrides any content provided via the text prop. The color prop does not affect the text prop's color, and the color of children is determined by the children's individual props. For greater control over text color customization, consider using a separator with children.

import React from "react"

import { SectionSeparator, Flex, Detail, Icon } from 'playbook-ui'

const children = (
  <Flex alignItems="center"
      padding="xs"
  >
    <Icon color="primary"
        icon="arrow-down"
    />
    <Detail
        color="link"
        size="sm"
        text="Children"
    />
  </Flex>
)

const SectionSeparatorColor = (props) => {
  return (
    <div>
      <SectionSeparator text="Default Separator"
      />
      <SectionSeparator color="primary"
          text="Primary Separator"
      />
      <SectionSeparator
          color="primary"
          lineStyle="dashed"
          text="Primary Dashed Separator"
      />
       <SectionSeparator color="primary"
       >
        {children}
      </SectionSeparator>
    </div>
  )
}

export default SectionSeparatorColor

Things to Avoid

Do not use section separators to handle list; instead, use List Kit.

Available Props

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

Github

Connect Chat