GitHub icon

Vertical

Add the vertical prop in order to set the divider vertically-oriented.

<div className="bg-blue-100">
	<BodyText className="p-2">
		<span className="m-r-1">Download:</span>
		<Link>iPhone</Link>
		<Divider vertical spacing="1" />
		<Link>iPad</Link>
		<Divider vertical spacing="1" />
		<Link>Android</Link>
		<Divider vertical spacing="1" />
		<Link>Windows</Link>
	</BodyText>
	<Divider />
	<Stack className="w-100">
		<Link className="p-2" style={{ whiteSpace: 'nowrap', alignSelf: 'center' }}>
			<Icon name="phone" className="m-r-half" size="18" />
			(855) 899-0970
		</Link>
		<Divider vertical spacing="1" className="p-y-half" />
		<span className="p-2">
			801 N Brand Blvd Suite 700, Glendale, CA 91203, United States
		</span>
	</Stack>
</div>

Spacing

Provides control over Divider's gutter size.

Divider with content

Divider may have a small piece of content, placed (by default) in its center.

<Stack direction="column" className="w-50 m-auto">
	<Stack.Item className="ta-center p-b-4 p-t-3 bg-blue-100">
		<Headline>Pro</Headline>
		<BodyText className="p-b-1">$19 per member / month</BodyText>
		<Button primary>Buy Pro</Button>
	</Stack.Item>
	<Divider className="bg-blue-100">
		<Eyebrow
			className="m-x-half"
			style={{ marginTop: '-.7em', marginBottom: '-.7em' }}
		>
			Or
		</Eyebrow>
	</Divider>
	<Stack.Item className="ta-center p-b-4 p-t-3 bg-blue-100">
		<Headline>Business</Headline>
		<BodyText className="p-b-1">$99 per member / month</BodyText>
		<Button primary>Buy Business</Button>
	</Stack.Item>
	<Divider className="bg-blue-100">
		<div style={{ marginTop: '-.6em', marginBottom: '-.6em' }}>
			<Icon name="help" className="m-x-half" color="gray" />
		</div>
	</Divider>
	<Stack.Item className="ta-center p-3 bg-neutral-30">
		<BodyText size="small">
			<Link>Contact Sales</Link>
		</BodyText>
	</Stack.Item>
</Stack>

Align content

Controls the alignment of content on the horizontal or vertical axis.

<div>
	<Divider alignContent="start">
		<Icon className="m-x-half" name="chevron_left" size="24" />
	</Divider>
	<Divider alignContent="center">
		<Icon className="m-x-half" name="code" size="24" />
	</Divider>
	<Divider alignContent="end">
		<Icon className="m-x-half" name="chevron_right" size="24" />
	</Divider>
	<Stack>
		<BodyText className="m-2">
			Lorem ipsum dolor sit amet.
		</BodyText>
		<Divider vertical alignContent="start">
			<Icon className="m-y-half" name="vertical_align_top" size="24" />
		</Divider>
		<BodyText className="m-2">
			Consectetur adipiscing elit.
		</BodyText>
		<Divider vertical alignContent="center">
			<Icon className="m-y-half" name="vertical_align_center" size="24" />
		</Divider>
		<BodyText className="m-2">
			Incididunt ut labore et dolore.
		</BodyText>
		<Divider vertical alignContent="end">
			<Icon className="m-y-half" name="vertical_align_bottom" size="24" />
		</Divider>
		<BodyText className="m-2">
			Ut enim ad minim veniam.
		</BodyText>
	</Stack>
</div>

Color

In certain situations the color also may be set using classname or style.

<>
	<div className="bg-red-200 p-2">
		<BodyText>Lorem ipsum dolor sit amet.</BodyText>
		<Divider className="c-red-300">
			<Eyebrow className="c-red-400 m-x-half">Red</Eyebrow>
		</Divider>
		<BodyText>Duis aute irure dolor.</BodyText>
	</div>
	<div className="bg-blue-200 p-2">
		<Stack>
			<BodyText style={{ flexBasis: '100%' }}>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</BodyText>
			<Divider vertical style={{ color: 'rgba(0, 0, 255, .2)' }}>
				<Eyebrow className="c-blue-400 m-x-2 m-y-half">Blue</Eyebrow>
			</Divider>
			<BodyText style={{ flexBasis: '100%' }}>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</BodyText>
		</Stack>
	</div>
</>

Best Practices

The divider renders as an <hr> by default, but with proper styling.
Сontent must be small and clear, e.g. a short text wrapped into Eyebrow component or just an Icon.

Importing

import { Divider } from '@servicetitan/design-system';