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
).
import React from 'react' import SectionSeparator from 'playbook-ui' import Flex from 'playbook-ui' import 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