---
title: Placeholder
menu: docs.components.placeholder
description: Placeholder is used to reserve space for content that soon will appear in a layout.
redirect_from:
- /docs/skeleton.html
---
## Placeholder line
Placeholder lines can contain have lines of text. Their length is different and depends on the `col-` class.
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
However, it may be useful, however, to specify the full width in order to fit the content more effectively.
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
You can also move the lines to right or to center:
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
## Placeholder heading
A placeholder can contain also a header element looks like header:
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
## Placeholder avatar
You can make your placeholder item look like an avatar.
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
The size of avatars is exactly the same as a regular avatar.
{% capture code %}
{% endcapture %}
{% include example.html code=code %}
## Placeholder image
You can use a placeholder, which will look like a picture. You can use the `ratio` component, and get the image in the right proportions.
You can also use the `ratio` component, and get the image in the right proportions.
{% capture code %}
{% endcapture %}
{% include example.html code=code max-width="200px" wrapper="space-y" %}
## Placeholder color
By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
{% capture code %}
{% endcapture %}
{% include example.html code=code wrapper="space-y" %}
## Placeholder sizing
The size 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 code %}
{% endcapture %}
{% include example.html code=code wrapper="space-y" %}
## Animation
Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.
{% capture code %}
{% endcapture %}
{% include example.html code=code wrapper="space-y" %}
## Live examples
See in the following examples how else you can use the placeholder component
{% capture code %}
{% include cards/placeholder/card-1.html %}
{% include cards/placeholder/card-2.html %}
{% include cards/placeholder/card-3.html %}
{% include cards/placeholder/card-4.html %}
{% include cards/placeholder/card-6.html %}
{% endcapture %}
{% include example.html code=code columns=1 wrapper="space-y" %}