SkeletonDisplayText

View on Github

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

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

Name

Type

Default

lineHeight
string
number

A height of a one line (in pixels)

21
marginBottom
string
number

Spacing between lines (in pixels)

20
numberOfLines
number

A number of skeleton likes

1
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

100