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

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

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

NameRequiredDefaultTypeDescription
lineHeight21
string
number
A height of a one line (in pixels)
marginBottom20
string
number
Spacing between lines (in pixels)
numberOfLines1numberA 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)
width100
string
number
A width of a line