---
title: Placeholder
description: Placeholder is used to reserve space for content that soon will appear in a layout.
---
## Placeholder line
Placeholder lines can contain have lines of text. Their length is different and depends on the `col-` class.
```html code example columns={1}
```
However, it may be useful, however, to specify the full width in order to fit the content more effectively.
```html code example columns={1}
```
You can also move the lines to right or to center:
```html code example columns={1}
```
## Placeholder heading
A placeholder can contain also a header element looks like header:
```html code example columns={1}
```
## Placeholder avatar
You can make your placeholder item look like an avatar.
```html code example columns={1}
```
The size of avatars is exactly the same as a regular avatar.
```html code example centered separated
```
## 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.
```html code example columns={1}
```
## Placeholder color
By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
```html example columns={1}
```
```html
```
## 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`.
```html code example columns={1}
```
## Animation
Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.
```html code example columns={1}
```
## Live examples
See in the following examples how else you can use the placeholder component
```html code example columns={1} height={1000} separated vertical
```