tabler/docs/content/ui/components/placeholder.md

title, summary, description

title	summary	description
Placeholder	Placeholder is used to reserve space for content that will soon appear in a layout.	Reserve space for upcoming content.

Placeholder line

Placeholder lines can contain lines of text. Their length is different and depends on the col- class.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html column %}

However, it may be useful to specify the full width in order to fit the content more effectively.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html column %}

You can also move the lines to the right or center them:

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html column %}

Placeholder heading

A placeholder can also contain an element that looks like a header:

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html column %}

Placeholder avatar

You can use a placeholder that will look like an avatar. You can use the avatar component, and get the image in the right proportions.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html column %}

You can also use the avatar component with different sizes. Look at the example below to see how the avatar placeholder looks.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html centered %}

Placeholder image

You can use a placeholder that will look like a picture. You can use the ratio component, and get the image in the right proportions.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html column centered vertical %}

Placeholder color

By default, the placeholder uses currentColor. This can be overridden with a custom color or utility class. Full color classes are available for background colors.

{% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html column %}

Placeholder sizing

The sizes of placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .placeholder-xs.

{% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html column %}

Animation

Animate placeholders with .placeholder-glow or .placeholder-wave to better convey the perception of something being actively loaded.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html column %}

Live examples

See in the following examples how else you can use the placeholder component

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html column centered vertical %}