@@include("./partials/title-meta.html", {"title": "Placeholders"}) @@include('./partials/head-css.html')
@@include('./partials/topbar.html') @@include('./partials/sidenav.html')
@@include("./partials/page-title.html", {"subtitle":"UI", "title":"Placeholders"})

#### Placeholders

In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”. Size and proportions are the same between the two.

##### Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#####

Read Only

#### Color

By default, the `placeholder` uses `currentColor` . This can be overriden with a custom color or utility class.

#### Width

You can change the `width` through grid column classes, width utilities, or inline styles.

#### Sizing

The size of `.placeholder` s are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg` , `.placeholder-sm` , or `.placeholder-xs` .

#### How it works

Create placeholders with the `.placeholder` class and a grid column class (e.g., `.col-6` ) to set the `width` . They can replace the text inside an element or as be added as a modifier class to an existing component.

#### Animation

Animate placehodlers with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.

@@include('./partials/footer.html')
@@include('./partials/customizer.html') @@include('./partials/footer-scripts.html')