Examples
Text modifiers
--pf-v6-global--FontSize--4xl
--pf-v6-global--FontSize--3xl
--pf-v6-global--FontSize--2xl
--pf-v6-global--FontSize--xl
--pf-v6-global--FontSize--lg
--pf-v6-global--FontSize--md
--pf-v6-global--FontSize--sm
--pf-v6-global--FontSize--3xl
--pf-v6-global--FontSize--2xl
--pf-v6-global--FontSize--xl
--pf-v6-global--FontSize--lg
--pf-v6-global--FontSize--md
--pf-v6-global--FontSize--sm
Static height width and shape modifiers
Small circle
Medium circle
Large circle
Small square
Medium square
Large square
Small rectangle
Medium rectangle
Large rectangle
Medium circle
Large circle
Small square
Medium square
Large square
Small rectangle
Medium rectangle
Large rectangle
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. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--Width | auto | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--Height | auto | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--BorderRadius | 0.5rem | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--before--PaddingBlockEnd | 0 | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--before--Height | auto | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--before--Content | " " | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--after--LinearGradientAngle | 90deg | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--after--LinearGradientColorStop1 | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--after--LinearGradientColorStop2 | (In light theme) #e0e0e0 | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--after--LinearGradientColorStop3 | (In light theme) #f2f2f2 | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--after--TranslateX | -100% | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--after--AnimationName | pf-v6-c-skeleton-loading | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--after--AnimationDuration | 3s | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--after--AnimationIterationCount | infinite | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--after--AnimationTimingFunction | linear | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--after--AnimationDelay | .5s | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-circle--BorderRadius | 999px | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd | 100% | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-text-4xl--Height | calc(2.25rem * 1.3) | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-text-3xl--Height | calc(1.75rem * 1.3) | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-text-2xl--Height | calc(1.375rem * 1.3) | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-text-xl--Height | calc(1.25rem * 1.3) | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-text-lg--Height | calc(1.125rem * 1.5) | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-text-md--Height | calc(1rem * 1.5) | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-text-sm--Height | calc(0.875rem * 1.5) | ||
| ||||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-width-sm--Width | 6.25rem | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-width-md--Width | 12.5rem | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-width-lg--Width | 18.75rem | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-width-25--Width | 25% | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-width-33--Width | calc(100% / 3) | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-width-50--Width | 50% | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-width-66--Width | calc(100% / 3 * 2) | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-width-75--Width | 75% | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-height-sm--Height | 6.25rem | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-height-md--Height | 12.5rem | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-height-lg--Height | 18.75rem | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-height-25--Height | 25% | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-height-33--Height | calc(100% / 3) | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-height-50--Height | 50% | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-height-66--Height | calc(100% / 3 * 2) | ||
| :where(:root, .pf-v6-c-skeleton) | --pf-v6-c-skeleton--m-height-75--Height | 75% | ||
| :where(:root, .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.375rem * 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) | ||
| ||||
