Skeleton Text

Anatomy

1. Line (subcomponent)
2. Last Line (conditionally set)
3. Narrow (variant of Line)
4. Heading (subcomponent)

Elements

The Skeleton Text includes the following elements:

• Line

Variants

The Skeleton Text is available in the following variants:

Line (subcomponent)

Last Line (conditionally set)

Narrow (variant of Line)

Heading (subcomponent)

Skeleton Text variants are “bones” of varying widths that can be used to skeletonize text in paragraphs, tiles, and any component that uses text.

Behaviors

Animation

The Skeleton Text animation is the same as the Loading Shimmer animation.

Sizes

The Skeleton Text height is determined by the font size of the content.

The Skeleton Text width is determined by the variant.

• Heading: 50% of container width
• Default: 50% of container width
• Last Line: 75% of container width
• Narrow: 33% of container width

Best practices

Do

• Use Skeleton Text to represent dynamic content that is loading (e.g., product titles, prices, quantities).
• Match the size of the Skeleton Text to the actual content.

Don't

• Don't use Skeleton Text to represent static, instantly loaded content (e.g., headings, page titles, body text).
• Don’t use Skeleton Text as feedback for contextual actions (e.g., within buttons). Instead, use a Spinner.

Accessibility

• Any area with Skeleton Text in it represents content that will change, so that area should have aria-live="polite".
• While the Skeleton Text is shown and a page container is getting new content, remember to put aria-busy="true" on that container, and set it to false when done.
• Once the element has loaded the content, either remove the Skeleton Text from the DOM, set it to aria-hidden="true" , or set its CSS display to none.