This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

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

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

NameRequiredDefaultTypeDescription
lineHeight16
string
number
A height of a one line (in pixels)
marginBottom8
string
number
Spacing between lines (in pixels)
numberOfLines2numberA number of skeleton likes
offsetLeft0
string
number
A distance between left of the container and the beginning of lines (in pixels)
offsetTop0
string
number
A distance between top of the container and the first line (in pixels)
width
string
number
A width of a line