SkeletonDisplayText

Import

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

Examples

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.

Basic usage

Hide code
function SkeletonContainerDifferentSpeedExample() {
  return (
    <SkeletonContainer>
      <SkeletonDisplayText />
    </SkeletonContainer>
  );
}
function SkeletonContainerDifferentSpeedExample() {
  return (
    <SkeletonContainer>
      <SkeletonDisplayText />
    </SkeletonContainer>
  );
}
Open in Playground

Composition with other skeletons

Hide code
function SkeletonDisplayTextCompositionExample() {
  return (
    <SkeletonContainer>
      <SkeletonDisplayText />
      <SkeletonBodyText offsetTop={37} numberOfLines={5} />
      {/**
       * The offsetTop value is the height of the DisplayText
       * plus 16px (gap between the two skeletons)
       */}
    </SkeletonContainer>
  );
}
function SkeletonDisplayTextCompositionExample() {
  return (
    <SkeletonContainer>
      <SkeletonDisplayText />
      <SkeletonBodyText offsetTop={37} numberOfLines={5} />
      {/**
       * The offsetTop value is the height of the DisplayText
       * plus 16px (gap between the two skeletons)
       */}
    </SkeletonContainer>
  );
}
Open in Playground