Examples
Text modifiers
--pf-t--global--font--size--4xl
--pf-t--global--font--size--3xl
--pf-t--global--font--size--2xl
--pf-t--global--font--size--xl
--pf-t--global--font--size--lg
--pf-t--global--font--size--md
--pf-t--global--font--size--sm
Loading text content
--pf-t--global--font--size--3xl
--pf-t--global--font--size--2xl
--pf-t--global--font--size--xl
--pf-t--global--font--size--lg
--pf-t--global--font--size--md
--pf-t--global--font--size--sm
Shapes
Small circle
Medium circle
Large circle
Small square
Medium square
Large square
Small rectangle
Medium rectangle
Large rectangle
Loading circle content
Medium circle
Large circle
Small square
Loading square content
Medium square
Large square
Small rectangle
Loading rectangle content
Medium rectangle
Large rectangle
Props
Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Additional classes added to the Skeleton | |
| fontSize | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | The font size height of the Skeleton | |
| height | string | The height of the Skeleton. Must specify pixels or percentage. | |
| screenreaderText | string | Text read just to screen reader users | |
| shape | 'circle' | 'square' | The shape of the Skeleton | |
| width | string | The width of the Skeleton. Must specify pixels or percentage. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--Width | auto | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--Height | auto | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--BorderRadius | 0.5rem | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--before--PaddingBlockEnd | 0 | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--before--Height | auto | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--before--Content | " " | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--LinearGradientAngle | 90deg | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--LinearGradientColorStop1 | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--LinearGradientColorStop2 | (In light theme) #e0e0e0 | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--LinearGradientColorStop3 | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--TranslateX | -100% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--AnimationName | pf-v6-c-skeleton-loading | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--AnimationDuration | 3s | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--AnimationIterationCount | infinite | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--AnimationTimingFunction | linear | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--AnimationDelay | .5s | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-circle--BorderRadius | 999px | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd | 100% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-4xl--Height | calc(2.25rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-3xl--Height | calc(1.75rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-2xl--Height | calc(1.5rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-xl--Height | calc(1.25rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-lg--Height | calc(1.125rem * 1.5) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-md--Height | calc(1rem * 1.5) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-sm--Height | calc(0.875rem * 1.5) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-sm--Width | 6.25rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-md--Width | 12.5rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-lg--Width | 18.75rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-25--Width | 25% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-33--Width | calc(100% / 3) | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-50--Width | 50% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-66--Width | calc(100% / 3 * 2) | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-75--Width | 75% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-sm--Height | 6.25rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-md--Height | 12.5rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-lg--Height | 18.75rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-25--Height | 25% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-33--Height | calc(100% / 3) | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-50--Height | 50% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-66--Height | calc(100% / 3 * 2) | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-75--Height | 75% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-100--Height | 100% | ||
| .pf-v6-c-skeleton.pf-m-circle | --pf-v6-c-skeleton--BorderRadius | 999px | ||
| ||||
| .pf-v6-c-skeleton.pf-m-square | --pf-v6-c-skeleton--before--Height | 0 | ||
| .pf-v6-c-skeleton.pf-m-square | --pf-v6-c-skeleton--before--PaddingBlockEnd | 100% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-sm | --pf-v6-c-skeleton--Width | 6.25rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-md | --pf-v6-c-skeleton--Width | 12.5rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-lg | --pf-v6-c-skeleton--Width | 18.75rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-25 | --pf-v6-c-skeleton--Width | 25% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-33 | --pf-v6-c-skeleton--Width | calc(100% / 3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-50 | --pf-v6-c-skeleton--Width | 50% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-66 | --pf-v6-c-skeleton--Width | calc(100% / 3 * 2) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-75 | --pf-v6-c-skeleton--Width | 75% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-sm | --pf-v6-c-skeleton--Height | 6.25rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-md | --pf-v6-c-skeleton--Height | 12.5rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-lg | --pf-v6-c-skeleton--Height | 18.75rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-25 | --pf-v6-c-skeleton--Height | 25% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-33 | --pf-v6-c-skeleton--Height | calc(100% / 3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-50 | --pf-v6-c-skeleton--Height | 50% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-66 | --pf-v6-c-skeleton--Height | calc(100% / 3 * 2) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-75 | --pf-v6-c-skeleton--Height | 75% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-100 | --pf-v6-c-skeleton--Height | 100% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-4xl | --pf-v6-c-skeleton--Height | calc(2.25rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-3xl | --pf-v6-c-skeleton--Height | calc(1.75rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-2xl | --pf-v6-c-skeleton--Height | calc(1.5rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-xl | --pf-v6-c-skeleton--Height | calc(1.25rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-lg | --pf-v6-c-skeleton--Height | calc(1.125rem * 1.5) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-md | --pf-v6-c-skeleton--Height | calc(1rem * 1.5) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-sm | --pf-v6-c-skeleton--Height | calc(0.875rem * 1.5) | ||
| ||||
