Skeleton - Intelligence Community Design System

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-skeletonvariant="circle"></ic-skeleton>
<ic-typographyvariant="caption">
<ic-skeletonvariant="text"></ic-skeleton>
</ic-typography>
<ic-skeleton></ic-skeleton>

<IcSkeletonvariant="circle"/>
<IcTypographyvariant="caption">
<IcSkeletonvariant="text"/>
</IcTypography>
<IcSkeleton/>

Skeleton details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property height Attribute height	Height of the skeleton. Accepts any valid CSS length (e.g. "24px", "2rem", "100%"). type: string - string \| undefined
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light" \| undefined	"inherit"
Property variant Attribute variant	The variant of the skeleton that will be displayed. type: IcSkeletonVariants - "circle" \| "rectangle" \| "text" \| undefined	"rectangle"
Property width Attribute width	Width of the skeleton. Accepts any valid CSS length (e.g. "24px", "2rem", "100%"). type: string - string \| undefined

Property

height

Attribute

height

Height of the skeleton. Accepts any valid CSS length (e.g. "24px", "2rem", "100%").

type: string - string | undefined

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined

Default: "inherit"

Property

variant

Attribute

variant

The variant of the skeleton that will be displayed.

type: IcSkeletonVariants - "circle" | "rectangle" | "text" | undefined

Default: "rectangle"

Property

width

Attribute

width

Width of the skeleton. Accepts any valid CSS length (e.g. "24px", "2rem", "100%").

type: string - string | undefined

Variants

Inherited size from child

Interactive example

Test text

Web component

React

Show full code

<ic-skeleton><div class="child">Test text</div></ic-skeleton>

<IcSkeleton>
<divclassName={classes.child}>Test text</div>
</IcSkeleton>

Set width and height with props

Interactive example

Height and width set

Height set

Width set

Web component

React

Show full code

<ic-typographyvariant="h4">
<h4>Height and width set</h4>
</ic-typography>
<ic-skeletonheight="12.5rem"width="25.125rem"></ic-skeleton>
<ic-typographyvariant="h4">
<h4>Height set</h4>
</ic-typography>
<ic-skeletonheight="5rem"></ic-skeleton>
<ic-typographyvariant="h4">
<h4>Width set</h4>
</ic-typography>
<ic-skeletonwidth="25.125rem"></ic-skeleton>

<IcTypographyvariant="h4">
<h4>Height and width set</h4>
</IcTypography>
<IcSkeleton
height="12.5rem"
width="12.5rem"
/>
<IcTypographyvariant="h4">
<h4>Height set</h4>
</IcTypography>
<IcSkeletonheight="5rem"/>
<IcTypographyvariant="h4">
<h4>Width set</h4>
</IcTypography>
<IcSkeletonwidth="25.125rem"/>

Set width and height with inline styling

CSS changes directly toSkeleton must be applied with inline styling.

Interactive example

Height and width set with styles

Height set with styles

Width set with styles

Web component

React

Show full code

<ic-typographyvariant="h4">
<h4>Height and width set with styles</h4>
</ic-typography>
<ic-skeletonstyle="height:12.5rem;width:25.125rem"></ic-skeleton>
<ic-typographyvariant="h4">
<h4>Height set with styles</h4>
</ic-typography>
<ic-skeletonstyle="height:5rem"></ic-skeleton>
<ic-typographyvariant="h4">
<h4>Width set with styles</h4>
</ic-typography>
<ic-skeletonstyle="width:25.125rem"></ic-skeleton>

<IcTypographyvariant="h4">
<h4>Height and width set with styles</h4>
</IcTypography>
<IcSkeleton
style={{
    height:"12.5rem",
    width:"12.5rem",
}}
/>
<IcTypographyvariant="h4">
<h4>Height set with styles</h4>
</IcTypography>
<IcSkeleton
style={{
    height:"5rem",
}}
/>
<IcTypographyvariant="h4">
<h4>Width set with styles</h4>
</IcTypography>
<IcSkeleton
style={{
    width:"25.125rem",
}}
/>

Theme

Interactive example

Web component

React

Show full code

<ic-skeletonvariant="circle"theme="dark"></ic-skeleton>
<ic-typographyvariant="caption">
<ic-skeletonvariant="text"theme="dark"></ic-skeleton>
</ic-typography>
<ic-skeletontheme="dark"></ic-skeleton>

<IcSkeletonvariant="circle"theme="dark"/>
<IcTypographyvariant="caption">
<IcSkeletonvariant="text"theme="dark"/>
</IcTypography>
<IcSkeletontheme="dark"/>

Within IcCardVertical component

Interactive example

Cancel

Refresh

Web component

React

Show full code

<ic-card-verticalheading="Americano Order"subheading="Name: Michael">
<ic-skeleton
slot="icon"
variant="circle"
style="height:var(--ic-space-xl);width:var(--ic-space-xl);"
></ic-skeleton>
<ic-skeleton
slot="heading"
variant="rectangle"
style="height:var(--ic-space-xl);width:10.625rem;"
></ic-skeleton>
<ic-skeleton
slot="subheading"
variant="text"
style="height:1.125rem;width:6.25rem;"
></ic-skeleton>
<ic-skeleton
slot="message"
variant="rectangle"
style="height:var(--ic-space-lg);width:18.75rem;"
></ic-skeleton>
<ic-skeleton
slot="interaction-controls"
variant="rectangle"
style="height:2.5rem;width:6.25rem;"
></ic-skeleton>
<ic-skeleton
slot="interaction-controls"
variant="rectangle"
style="height:2.5rem;width:6.25rem;"
></ic-skeleton>
</ic-card-vertical>

<IcCardVerticalheading="Americano Order"subheading="Name: Michael">
<IcSkeleton
slot="icon"
variant="circle"
style={{
      height:"var(--ic-space-xl)",
      width:"var(--ic-space-xl)",
}}
/>
<IcSkeleton
slot="heading"
variant="rectangle"
style={{
      height:"var(--ic-space-xl)",
      width:"10.625rem",
}}
/>
<IcSkeleton
slot="subheading"
variant="text"
style={{
      height:"1.125rem",
      width:"6.25rem",
}}
/>
<IcSkeleton
slot="message"
variant="rectangle"
style={{
      height:"var(--ic-space-lg)",
      width:"18.75rem",
}}
/>
<IcSkeleton
slot="interaction-controls"
variant="rectangle"
style={{
      height:"2.5rem",
      width:"6.25rem",
}}
/>
<IcSkeleton
slot="interaction-controls"
variant="rectangle"
style={{
      height:"2.5rem",
      width:"6.25rem",
}}
/>
</IcCardVertical>

Last reviewed 22 January 2026 .