SkeletonBodyText

View on Github

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

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 (API reference)

Name

Type

Default

lineHeight
string
number

A height of a one line (in pixels)

16
marginBottom
string
number

Spacing between lines (in pixels)

8
numberOfLines
number

A number of skeleton likes

2
offsetLeft
string
number

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

0
offsetTop
string
number

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

0
width
string
number

A width of a line