Skeleton - Intelligence Community Design System

Skip to page content

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

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"

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

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 31 May 2024 .