SkeletonDisplayText

How to use SkeletonDisplayText

Use the SkeletonDisplayText component to simulate headings, subheadings or titles whenever loading asynchronous data.

Import

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

Code examples

<SkeletonContainer>
  <SkeletonDisplayText />
</SkeletonContainer>
<SkeletonContainer>
  <SkeletonDisplayText />
</SkeletonContainer>
Hide source

Best practices

• Each SkeletonDisplayText needs to be wrapped by a SkeletonContainer component
• Only use it to mimic headings and titles, for normal text we recommend using SkeletonBodyText.

Props

• Name

  lineHeight

  Description

  A height of a one line (in pixels)

  string

  number

  Default

  21
• Name

  marginBottom

  Description

  Spacing between lines (in pixels)

  string

  number

  Default

  20
• Name

  numberOfLines

  Description

  A number of skeleton likes

  number

  Default

  1
• 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

  Default

  100