Overview

A placeholder to show that content is loading.

✨ This is an auto-generated AI summary of the ns-skeleton's documentation. It may not be accurate. ✨

The ns-skeleton can be a visual representation of a paragraph, there are options for headings, subheadings and text.

Examples

Standard

Paragraph

Heading

Subheading

Text

Guidance

Do

• Use to show a block of content is loading.
• Use within a component slot.
• Use if content will load under 5 seconds.
• Use if part of the page is updating or loading.

Don't

• Use for partial content.
• Use for actionable elements like <ns-tabs> or <ns-cta>.
• Use for media.

Implementation

Placement

The ns-skeleton component can be used in the following components:

• <ns-lockup>
• <ns-landmark>
• <ns-card>
• <ns-form>
• <ns-form-group>
• <ns-content>
• <ns-article>
• <ns-accordion>
• <ns-caveat>
• <ns-tabs>
• <ns-testimonial>
• <ns-skyline>
• <ns-product-card>

Specification

Attributes

type

Property

type

Description

The type of skeleton and it is assigned automatically depending on the wrapper element. This is required when the type is not related to the wrapper element.

Type

string

Options

text paragraph heading subheading

Default

text

Figma

Please note: The ns-skeleton Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).