Skip to Content

Skeleton

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesDocumentationCSS Variables

Examples

Default

Percentage width modifiers






Percentage height modifiers

Text modifiers

--pf-global--FontSize--4xl

--pf-global--FontSize--3xl

--pf-global--FontSize--2xl

--pf-global--FontSize--xl

--pf-global--FontSize--lg

--pf-global--FontSize--md

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

Documentation

Overview

Usage

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

CSS Variables