---
title: Placeholder
summary: Placeholder is used to reserve space for content that will soon appear in a layout.
description: 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 %}