SkeletonBodyText

How to use SkeletonBodyText

Use the SkeletonBodyText component to simulate bodies of text with multiple lines whenever loading asynchronous data.

Import

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

Code examples

<SkeletonContainer>
  <SkeletonBodyText numberOfLines={4} />
</SkeletonContainer>
<SkeletonContainer>
  <SkeletonBodyText numberOfLines={4} />
</SkeletonContainer>
Hide source

Best practices

• Each SkeletonBodyText needs to be wrapped by a SkeletonContainer component
• Use the numberOfLines prop to determine how many lines you want to render. We advise using a value that matches the number of lines the text will have after loading.

Props

• Name

  lineHeight

  Description

  A height of a one line (in pixels)

  string

  number

  Default

  16
• Name

  marginBottom

  Description

  Spacing between lines (in pixels)

  string

  number

  Default

  8
• Name

  numberOfLines

  Description

  A number of skeleton likes

  number

  Default

  2
• Name

  offsetLeft

  Description

  A distance between left of the container and the beginning of lines (in pixels)

  string

  number

  Default

  0
• Name

  offsetTop

  Description

  A distance between top of the container and the first line (in pixels)

  string

  number

  Default

  0
• Name

  width

  Description

  A width of a line

  string

  number