import './Skeleton.css'

## Examples

### Default


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

<LiveExample html={Example1} />

### Percentage width modifiers


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

<LiveExample html={Example2} />

### Percentage height modifiers


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

<LiveExample html={Example3} />

### Text modifiers


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

<LiveExample html={Example4} />

### Static height width and shape modifiers


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

<LiveExample html={Example5} />

## Documentation

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-skeleton` | `<div>` | Initiates the skeleton component. **Required** |
| `.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75]` | `.pf-v6-c-skeleton` | Modifies the width of the skeleton. The default is 100%. |
| `.pf-m-height-[sm, md, lg, 25, 33, 50, 66, 75, 100]` | `.pf-v6-c-skeleton` | Modifies the height of the skeleton. The default is the inherited font size. |
| `.pf-m-text-[sm, md, lg, xl, 2xl, 3xl, 4xl]` | `.pf-v6-c-skeleton` | Modifies the skeleton height to match the height of PatternFly's text elements. |
| `.pf-m-circle` | `.pf-v6-c-skeleton` | Modifies the border radius of the skeleton to be a circle. Use a width modifier to specify the size. |
| `.pf-m-square` | `.pf-v6-c-skeleton` | Modifies the border radius of the skeleton to be a square. Use a width modifier to specify the size. |