- React
- HTML

import ’./Divider.css’

## Examples

### hr

### li

### div

### Inset medium

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

### Vertical

### Vertical, inset medium

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

### Vertical on lg

### Horizontal on lg

### In flex layout

## 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.
`.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be shown, at optional breakpoint.

##
CSS variables