import './Divider.css'

## Examples

### hr


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### li


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### div


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Inset medium


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Md inset, no inset on md, 3xl inset on lg, lg inset on xl


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Vertical


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Vertical, inset medium


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Vertical, md inset, no inset on md, lg inset on lg, sm inset on xl


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Vertical on lg


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Horizontal on lg


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### In flex layout


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

## Documentation

### Overview

The divider renders as an `<hr>` by default. It is possible to make the divider render as an `li` or a `div` to match the HTML5 specification and context of the divider.

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `role="separator"` | `li.pf-v6-c-divider`, `div.pf-v6-c-divider` | Indicates that the separator is a separator. |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-divider` | `<hr>`, `<li>`, `<div>` | Defines the divider component. |
| `.pf-m-vertical` | `.pf-v6-c-divider` | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-divider` | Modifies divider padding/inset to visually match padding of other adjacent components. |
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/tokens/all-patternfly-tokens). |
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/tokens/all-patternfly-tokens). |