Semantic UI React  1.0.0
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypes
Elements
ButtonContainerDividerFlagHeaderIconImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchStickySidebarTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioResponsiveSelectText AreaTransitionable Portal

Placeholder
A placeholder is used to reserve splace for content that soon will appear in a layout.

src/elements/Placeholder/Placeholder.js
Semantic UI Placeholder Docs
PlaceholderPlaceholder.HeaderPlaceholder.ImagePlaceholder.LinePlaceholder.Paragraph

Types

Placeholder2.4.0

A placeholder is used to reserve space for content that soon will appear in a layout.

Placeholders can include PlaceholderParagraph, PlaceholderHeader, and PlaceholderImage to let you format the loaders to emulate the content being loaded.

Content

Lines

A placeholder can contain have lines of text.

By default, repeated lines will appear varied in width. However, it may be useful to specify an exact length to make it match up with content more effectively.

Headers

A placeholder can contain a header.

Header content will have a slightly larger block size from paragraph.

Paragraph

A placeholder can contain a paragraph.

Paragraphs are used to group lines together.

Image

A placeholder can contain an image.

Using square (1:1) or rectangular (4:3) will embed an aspect ratio into the image loader so that they modify size correctly with responsive styles.

Variations

Line Length

A line can specify how long its contents should appear.

Fluid

A fluid placeholder takes up the width of its container.

Inverted

A placeholder can have their colors inverted.

This is the bottom