Skip to main content

​
Common Examples

import { Divider, Flex, Text } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Flex direction="column">
      <Text>Lorem ipsum dolor sit amet.</Text>
      <Divider spacing="3" />
      <Text>Lorem ipsum dolor sit amet.</Text>
    </Flex>
  );
}

​
Adjust space around dividers

The following values can be provided to the spacing prop of the Divider, and increment by 0.5rem (except for "half", which increments by 0.25rem).

​
Divider orientation

The divider can be used to separate both horizontal (main axis) and vertical (cross axis) content. By default, dividers are on the main axis. Set the vertical prop on the Divider component to true to use the cross axis.

​
Main axis (default)

​
Cross axis (vertical)

​
Creating sections with Card

To create sections within a Card, use a padding of 0 along with the Divider, then give each child element its own padding as needed.
Last modified on February 12, 2026