package.docs.components.Divider.examples.Divider.md Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation

Assets, source, tooling, and content for PatternFly 4

The newest version!

---
id: Divider
section: components
cssPrefix: pf-v6-c-divider
---import './Divider.css'

## Examples

### hr

```html


```

### li

```html

  List item one
  
  List item two


```

### div

```html


```

### Inset medium

```html


```

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

```html


```

### Vertical

```html


```

### Vertical, inset medium

```html


```

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

```html


```

### Vertical on lg

```html


```

### Horizontal on lg

```html


```

### In flex layout

```html
Horizontal





  item 1

  
  item 1





Vertical





  item 1

  
  item 1


```

## Documentation

### Overview

The divider renders as an `` 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` | `
`, ``, `` | 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](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |