import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
import { Divider } from "./";
import { Center } from "../Center";

<Meta title="Components/Layout/Divider" component={Divider} />

# Divider

Dividers are used to visually separate content in a list or group.

# Import

```
import { Divider } from "@cloudline/cloudline-styled-components"
```

# Usage

The Divider displays a thin horizontal or vertical line.

<Canvas withSource="open">
  <Story name="Divider">
    <div style={{ backgroundColor: "white", height: "200px" }}>
      <Center h="100%">
        <Divider color="lightgrey" />
      </Center>
    </div>
  </Story>
</Canvas>

<ArgsTable story="Divider" />
