--- title: 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. ```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
```