Section Separator

Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds. This should only be used on light backgrounds (with our variable $bg_light).

See this kit in action in our sample UI

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 } from 'playbook-ui'

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

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

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 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.

UI Samples using Section Separator Kit

Get the full picture. See how this kit is used in our samples.

Conference Statistics

News Magazine

Trending Repositories

Crowdsourced Posts

Music App

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

Dribbble

Github

Connect Chat