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) | ||
|