import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';

import {Divider} from '@workday/canvas-kit-preview-react/divider';
import Basic from './examples/Basic';
import CustomSpace from './examples/CustomSpace';


# Divider

A `Divider` segments and visually organizes content.

## Installation

```sh
yarn add @workday/canvas-kit-preview-react
```

## Usage

Use a `Divider` to separate content and create visual hierarchy. Typically they are used between paragraph sections to indicate a break or shift in content. However, they can also be used as decorative elements to provide greater emphasis and visual hierarchy.

### Basic Example

By default, `Divider` renders a `<hr>` (horizontal rule) element with `0.5rem` of margin on top and bottom. The `space` prop allows you to adjust the vertical margin evenly. In the example below, the `Divider`s provide a subtle deliniation between each profile card without being as visually prominent as a `Card`. The `space` is adjusted to `0.25rem` which applied `0.125rem` to the top and bottom margin.

<ExampleCodeBlock code={Basic} />

### Custom Space

You might also want to apply custom space to `Divider` where the top and bottom margin are not equal. The best way to achieve this is with `createStyles` and the `cs` property. In the example below, the `Divider` is applied as a decorative element to add emphasis to the section heading. Custom styles are defined in the `createStyles` function outside the component and are passed to `Divider`'s `cs` prop. These styles remove the top margin and set the bottom margin to `1rem`.

<ExampleCodeBlock code={CustomSpace} />

## Component API

<SymbolDoc name="Divider" hideDescription />