import './Display.css'

## Examples

### Inline


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

<LiveExample html={Example1} />

### Block


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

<LiveExample html={Example2} />

### Inline block


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

<LiveExample html={Example3} />

### Flex


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

<LiveExample html={Example4} />

### Inline flex


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

<LiveExample html={Example5} />

### Grid


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

<LiveExample html={Example6} />

### Inline grid


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

<LiveExample html={Example7} />

### Table, table row, table cell


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

<LiveExample html={Example8} />

### None


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

<LiveExample html={Example9} />

## Documentation

### Overview

[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-display-inline-block-on-lg`

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-u-display-inline{-on-[breakpoint]}` | `*` |  Sets display: inline |
| `.pf-v6-u-display-block{-on-[breakpoint]}` | `*` |  Sets display: block |
| `.pf-v6-u-display-inline-block{-on-[breakpoint]}` | `*` |  Sets display: inline-block |
| `.pf-v6-u-display-flex{-on-[breakpoint]}` | `*` |  Sets display: flex |
| `.pf-v6-u-display-inline-flex{-on-[breakpoint]}` | `*` |  Sets display: inline-flex |
| `.pf-v6-u-display-grid{-on-[breakpoint]}` | `*` |  Sets display: grid |
| `.pf-v6-u-display-inline-grid{-on-[breakpoint]}` | `*` |  Sets display: inline-grid |
| `.pf-v6-u-display-table{-on-[breakpoint]}` | `*` |  Sets display: table |
| `.pf-v6-u-display-table-row{-on-[breakpoint]}` | `*` |  Sets display: table-row |
| `.pf-v6-u-display-table-cell{-on-[breakpoint]}` | `*` |  Sets display: table-cell |
| `.pf-v6-u-display-none{-on-[breakpoint]}` | `*` |  Sets display: none |