---
title: Divider
category: General
---

```jsx live
render(
  <StackView
    axis="horizontal"
    alignment="center"
    spacing={<Divider axis="vertical" margin={1} color="grey-7" />}
  >
    <Link>One</Link>
    <Link>Two</Link>
    <Link>Three</Link>
  </StackView>
)
```

```jsx live
render(
  <Menu>
    <Menu.Item>One</Menu.Item>
    <Menu.Item>Two</Menu.Item>
    <Divider margin={0.5} />
    <Menu.Item>Three</Menu.Item>
    <Menu.Item>Four</Menu.Item>
    <Menu.Item>Five</Menu.Item>
  </Menu>
)
```

```jsx live
render(
  <Card spacing={<Divider />}>
    <Card.Section subdued>
      <HeadingUppercase>Card Heading</HeadingUppercase>
    </Card.Section>
    <Card.Section>Card Section</Card.Section>
  </Card>
)
```