Skip to main content

Skeleton paragraph

The skeleton paragraph component displays a placeholder representation of text content while it loads.

Use skeleton paragraphs to improve perceived performance by reserving space where final copy will appear.

Support
Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the skeleton paragraph component.

Anchor to content
content
string
Default: ''

The content to be used as a base for the skeleton. This content will be hidden when the skeleton is visible.

This can be useful when the skeleton is representing a known piece of content which is part of a larger element that has not yet fully loaded.

Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to ExamplesExamples

Anchor to Reserve space for loading contentReserve space for loading content

Reserve space for loading content with a placeholder animation. This example renders a default s-skeleton-paragraph as a loading state stand-in.

Reserve space for loading content

A rendered example of the skeleton-paragraph component

html

<s-skeleton-paragraph></s-skeleton-paragraph>

Anchor to Size a skeleton to match final copy lengthSize a skeleton to match final copy length

Match placeholder height to the approximate length of the real text. This example sets the content prop with hidden placeholder text that drives the skeleton block size.

html

<s-skeleton-paragraph content="Your order will arrive in 3-5 business days."></s-skeleton-paragraph>

Anchor to Reserve space for multi-line contentReserve space for multi-line content

Preview how tall a multi-line block will be before the data arrives. This example uses content with longer placeholder text so the skeleton spans multiple lines.

html

<s-skeleton-paragraph content="Your order has been confirmed and is being prepared for shipment. You'll receive a tracking number by email once your package is on its way."></s-skeleton-paragraph>

Anchor to Best practicesBest practices

  • Match the final layout: Set content so the skeleton approximates the height of the real text, preventing layout shift on load.
  • Use sparingly: Only add skeleton paragraphs where content genuinely loads asynchronously. Don't use them for static text.
  • Pair with loading logic: Replace the skeleton with actual content as soon as the data is available. Avoid lingering placeholders.
Was this page helpful?