@workday/canvas-kit-docs/dist/mdx/preview-react/divider/Divider.mdx

Documentation components of Canvas Kit components

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

import * as Divider from './Divider.stories.ts';
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 />