> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Divider - Web

> Dividers are thin lines that separate content.

> [!NOTE]
>
> For development, import `Divider` from
> `@servicetitan/anvil2`. For design, find it in the
> [Anvil2 file](https://www.figma.com/design/xaNQsvRKczoxu7pj0M6QT8/Anvil2-v3?node-id=161-2652).

![](https://mintcdn.com/servicetitan/uz2PQSvO75TRhQ38/images/docs/web/components/shared/overview-of-a-divider.png?fit=max\&auto=format\&n=uz2PQSvO75TRhQ38\&q=85\&s=b4cdc850a6c9d21527ece20e43ef029a)

## Anatomy

The Divider consists of two primary elements that work together to separate content.

![Divider
Anatomy](https://mintcdn.com/servicetitan/CekIMDXcDEhGoN_I/images/docs/web/components/divider/design/divider-anatomy.png?fit=max\&auto=format\&n=CekIMDXcDEhGoN_I\&q=85\&s=7ae362bfbfb2adbc0c32cd7ab8558e52)

1. Divider line
2. Content

## Options

The Divider supports spacing, orientation, and content alignment configurations to accommodate various separation scenarios.

### Spacing

divider-spacing

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/divider-spacing?file=src/App.tsx)

```tsx lines theme={null}
import { Divider, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column">
      <Divider spacing="0">
        <code>&quot;0&quot;</code>
      </Divider>
      <Divider
        spacing="half"
        style={{
          background:
            "light-dark(var(--color-orange-100), var(--color-orange-600))",
        }}
      >
        <code>&quot;half&quot;</code>
      </Divider>
      <Divider
        spacing="1"
        style={{
          background:
            "light-dark(var(--color-purple-100), var(--color-purple-600))",
        }}
      >
        <code>&quot;1&quot;</code>
      </Divider>
      <Divider
        spacing="2"
        style={{
          background:
            "light-dark(var(--color-orange-100), var(--color-orange-600))",
        }}
      >
        <code>&quot;2&quot;</code>
      </Divider>
      <Divider
        spacing="3"
        style={{
          background:
            "light-dark(var(--color-purple-100), var(--color-purple-600))",
        }}
      >
        <code>&quot;3&quot;</code>
      </Divider>
      <Divider
        spacing="4"
        style={{
          background:
            "light-dark(var(--color-orange-100), var(--color-orange-600))",
        }}
      >
        <code>&quot;4&quot;</code>
      </Divider>
      <Divider
        spacing="5"
        style={{
          background:
            "light-dark(var(--color-purple-100), var(--color-purple-600))",
        }}
      >
        <code>&quot;5&quot;</code>
      </Divider>
    </Flex>
  );
}

export default App;
```

| Spacing option | Value |
| - | - |
| 0 | 0px / 0rem |
| half | 2px / 0.125rem |
| 1 | 4px / 0.25rem |
| 2 | 8px / 0.5rem |
| 3 | 12px / 0.75rem |
| 4 | 16px / 1rem |
| 5 | 20px / 1.25rem |

### Vertical

Divider supports vertical orientation for separating content horizontally.

divider-vertical-true

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/divider-vertical-true?file=src/App.tsx)

```tsx lines theme={null}
import { Divider, Flex, Card } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex style={{ height: "101px" }}>
      <Card background="strong" flexGrow="1" />
      <Divider vertical spacing="2" />
      <Card background="strong" flexGrow="1" />
    </Flex>
  );
}

export default App;
```

### Content

Divider supports content to provide additional information to users.

divider-children

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/divider-children?file=src/App.tsx)

```tsx lines theme={null}
import { Divider } from "@servicetitan/anvil2";

function App() {
  return <Divider spacing={2}>Hello world</Divider>;
}

export default App;
```

### Content Alignment

Content aligns to start, end, or center.

divider-aligncontent

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/divider-aligncontent?file=src/App.tsx)

```tsx lines theme={null}
import { Divider } from "@servicetitan/anvil2";

function App() {
  return (
    <div>
      <div style={{ display: "flex", flexDirection: "column" }}>
        <Divider spacing="2" alignContent="start">
          Start
        </Divider>
        <Divider spacing="2" alignContent="center">
          Center
        </Divider>
        <Divider spacing="2" alignContent="end">
          End
        </Divider>
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          height: "10rem",
          justifyContent: "space-between",
        }}
      >
        <Divider spacing="2" vertical alignContent="start">
          Start
        </Divider>
        <Divider spacing="2" vertical alignContent="center">
          Center
        </Divider>
        <Divider spacing="2" vertical alignContent="end">
          End
        </Divider>
      </div>
    </div>
  );
}

export default App;
```

## Behavior

The Divider responds to spacing and orientation requirements while maintaining consistent visual separation.

## Usage Guidelines

| Standard | Requirement |
| - | - |
| DoReinforce grouping in dense UIs | Dividers reinforce grouping between elements while contrasting them against other elements on the page. Use dividers on high-density UIs and lists where whitespace alone does not provide sufficient grouping. |
| Don'tOveruse dividers | Overuse of dividers can create a cluttered UI. White space is often sufficient at creating separation between elements. |
| Don'tUse as decoration | Dividers should not be used as decoration within already grouped content. |

divider-group-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/divider-group-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Divider, Checkbox } from "@servicetitan/anvil2";

function App() {
  return (
    <Checkbox.Group legend="What support do you need?">
      <Divider />
      <Checkbox name="support" value="software" label="Software" />
      <Divider />
      <Checkbox name="support" value="hardware" label="Hardware" />
      <Divider />
      <Checkbox name="support" value="report" label="Expense Report" />
      <Divider />
    </Checkbox.Group>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

Don't add excessive amounts of Dividers.

### How to Use

#### Spacing considerations

Divider supports multiple spacing configurations. Follow these general principles:

* If used within a Form, spacing conforms to the [Form pattern](https://anvil.servicetitan.com/docs/patterns/forms/web.md).
* Maintain internal consistency within the product area for spacing choices.
* When interactive elements exist near Dividers, use more spacing to meet [WCAG guidance on touch target size minimums](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).

## Content

Content within the Divider should provide additional context when needed, keeping it concise and informative.

## Keyboard Interaction

Users can navigate the Divider using standard keyboard controls.

## Code

**Implementation**

divider-playground

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/divider-playground?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Divider, Flex, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column">
      <Text variant="headline" el="h3">
        Headline text
      </Text>
      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>

      <Divider spacing="3" />

      <Text variant="headline" el="h3">
        Headline text
      </Text>
      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
    </Flex>
  );
}

export default App;
```

## Common Examples

```tsx theme={null}
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-spacing

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/divider-spacing?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Divider, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column">
      <Divider spacing="0">
        <code>&quot;0&quot;</code>
      </Divider>
      <Divider
        spacing="half"
        style={{
          background:
            "light-dark(var(--color-orange-100), var(--color-orange-600))",
        }}
      >
        <code>&quot;half&quot;</code>
      </Divider>
      <Divider
        spacing="1"
        style={{
          background:
            "light-dark(var(--color-purple-100), var(--color-purple-600))",
        }}
      >
        <code>&quot;1&quot;</code>
      </Divider>
      <Divider
        spacing="2"
        style={{
          background:
            "light-dark(var(--color-orange-100), var(--color-orange-600))",
        }}
      >
        <code>&quot;2&quot;</code>
      </Divider>
      <Divider
        spacing="3"
        style={{
          background:
            "light-dark(var(--color-purple-100), var(--color-purple-600))",
        }}
      >
        <code>&quot;3&quot;</code>
      </Divider>
      <Divider
        spacing="4"
        style={{
          background:
            "light-dark(var(--color-orange-100), var(--color-orange-600))",
        }}
      >
        <code>&quot;4&quot;</code>
      </Divider>
      <Divider
        spacing="5"
        style={{
          background:
            "light-dark(var(--color-purple-100), var(--color-purple-600))",
        }}
      >
        <code>&quot;5&quot;</code>
      </Divider>
    </Flex>
  );
}

export default App;
```

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

divider-vertical-false

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/divider-vertical-false?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Divider, Flex, Card } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column">
      <Card background="strong" />
      <Divider spacing="2" />
      <Card background="strong" />
    </Flex>
  );
}

export default App;
```

#### Cross axis (vertical)

divider-vertical-true

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/divider-vertical-true?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Divider, Flex, Card } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex style={{ height: "101px" }}>
      <Card background="strong" flexGrow="1" />
      <Divider vertical spacing="2" />
      <Card background="strong" flexGrow="1" />
    </Flex>
  );
}

export default App;
```

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

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/divider-sections?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Divider, Card, Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Card padding="0" flexDirection="column">
      <Text className="p-3">Section 1. Lorem ipsum dolor sit amet.</Text>

      <Divider />

      <Text className="p-3">Section 2. Lorem ipsum dolor sit amet.</Text>
    </Card>
  );
}

export default App;
```

**Divider Props**

```tsx theme={null}
<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)

**vertical** `boolean` (default: false)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.