Divider

<div className="bg-neutral-20 p-2">
    <BodyText>
        <span>ServiceTitan Inc.</span>
    </BodyText>
    <Divider spacing="2" />
    <BodyText size="small">
        <span>801 N Brand Blvd Suite 700, Glendale, CA 91203, United States</span>
    </BodyText>
</div>

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

<div className="p-2 bg-neutral-0">
    <Divider spacing="0" />
    <Divider spacing="half" />
    <Divider spacing="1" />
    <Divider spacing="2" />
    <Divider spacing="3" />
    <Divider spacing="4" />
    <Divider spacing="5" />
</div>

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

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

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