Forma 36 - SkeletonContainer

SkeletonContainer

The SkeletonContainer component is a wrapper component of the all other skeleton components: SkeletonBodyText, SkeletonDisplayText, SkeletonImage, SkeletonRow

Use can use properties of SkeletonContainer to control color, background color, animation, opacity of the skeleton elements that are used inside.

Import

import { SkeletonContainer } from '@contentful/f36-components';
// or
import { SkeletonContainer } from '@contentful/f36-skeleton';

Examples

Basic usage


function SkeletonContainerBasicExample() {
  return (
    <SkeletonContainer>
      <SkeletonBodyText numberOfLines={4} />
    </SkeletonContainer>
  );
}function SkeletonContainerBasicExample() {
  return (
    <SkeletonContainer>
      <SkeletonBodyText numberOfLines={4} />
    </SkeletonContainer>
  );
}
Open in Playground

Different speed and color


function SkeletonContainerDifferentSpeedExample() {
  return (
    <SkeletonContainer backgroundColor="blue" speed={1}>
      <SkeletonBodyText numberOfLines={4} />
    </SkeletonContainer>
  );
}function SkeletonContainerDifferentSpeedExample() {
  return (
    <SkeletonContainer backgroundColor="blue" speed={1}>
      <SkeletonBodyText numberOfLines={4} />
    </SkeletonContainer>
  );
}
Open in Playground

Props (API reference)

Open in Storybook

Name	Type	Default
children required	ReactNode
animateId	string
ariaLabel	string Label attribute	Loading component...
backgroundColor	string Background color of the skeleton	#e5ebed
backgroundOpacity	number Background opacity of the skeleton	1
className	string CSS class to be appended to the root element
clipId	string
foregroundColor	string Color of the foreground skeleton items	#f7f9fa
foregroundOpacity	number Opacity of the foreground skeleton items	1
gradientId	string
height	string number	100%
isAnimated	false true Whether skeleton has animation or not	true
preserveAspectRatio	string
speed	string number Speed of the animation	2
svgHeight	string number Height of the SVG element	100%
svgWidth	string number Width of the SVG element	100%
testId	string A [data-test-id] attribute used for testing purposes	cf-ui-skeleton-form
width	string number	100%

Import

Examples

Basic usage

Different speed and color

Props (API reference)

Name

Type

Default

Help improve this page