---
title: Placeholder
summary: Placeholder is used to reserve space for content that soon will appear in a layout.
description: Reserve space for upcoming content.
---
## Placeholder line
Placeholder lines can contain have lines of text. Their length is different and depends on the `col-` class.
```html example columns={1}
```
However, it may be useful, however, to specify the full width in order to fit the content more effectively.
```html example columns={1}
```
You can also move the lines to right or to center:
```html example columns={1}
```
## Placeholder heading
A placeholder can contain also a header element looks like header:
```html example columns={1}
```
## Placeholder avatar
You can use a placeholder, which will look like an avatar. You can use the `avatar` component, and get the image in the right proportions.
```html
```
Look at the example below to see how the avatar placeholder looks like.
```html example columns={1} centered
```
You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks like.
```html 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 example columns={1} height={500} scrollable separated 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.
```html
```
Look at the example below to see how the color affects the placeholder.
```html example columns={1} height={240}
```
## 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 example columns={1}
```
## Animation
Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.
```html example columns={1}
```
## Live examples
See in the following examples how else you can use the placeholder component
```html example columns={1} height={1000} separated vertical scrollable
```