Menu
Placeholder
UI Docs
Getting Started New in 2.4
Introduction
Integrations Build Tools Recipes Glossary
Usage
Theming Layouts
Globals
Reset Site
Elements
Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step
Collections
Breadcrumb Form Grid Menu Message Table
Views
Advertisement Card Comment Feed Item Statistic
Modules
Accordion Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Sticky Tab Transition
Behaviors
API Form Validation Visibility

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

Download

UI Framework

Themable
Build Tools
Choose

Standalone

Default Theme
Precompiled
Choose
Semantic UI
Download ZIP Getting Started

Package Managers

Standalone Placeholder
Download ZIP View GitHub

Package Managers

Types

Placeholder
New in 2.4.0

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

Placeholders can include paragraph, header, image header and image to let you format the loaders to emulate the content being loaded.
Simulate Loading
Add
Delete
Lindsay
Joined in 2013
Primary Contact
Add
Delete

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.

Community

Help Translate Submit an Issue Join our Chat CLA

Network

GitHub Repo User Forums 1.x Docs 0.x Docs

Help Preserve This Project

Support for the continued development of Semantic UI comes directly from the community.

Free & Open Source (MIT)
The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate
Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks
Yes, take me to the mirror

Dimmer Message
Dimmer sub-header