Implementation
Divider Props
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.<Divider alignContent="center" spacing="3" vertical={false} />
Divider Props
alignContent
"start" | "center" | "end"
spacing
"0" | "half" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "12"
default:"0"
Last modified on January 23, 2026
