Skeleton

BETA

Component demo

Interactive example

Web component

React

<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"	"inherit"
Property variant Attribute variant	The variant of the skeleton that will be displayed. type: IcSkeletonVariants - "circle" \| "rectangle" \| "text"	"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"

Default: "inherit"

Property

variant

Attribute

variant

The variant of the skeleton that will be displayed.

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

Default: "rectangle"

Variants

Inherited size from child

Interactive example

Test text

Web component

React

<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

<ic-typographyvariant="h4">
<h4>Height and width set with styles</h4>
</ic-typography>
<ic-skeletonstyle="height:12.5rem;width:28.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:28.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:"28.125rem",
}}
/>

Theme

Interactive example

Web component

React

<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

Americano Order

Name: Michael

Extras: double espresso shot & oat milk

Web component

React

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