##### 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

#### Width

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

#### Color

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

#### 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.

#### 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`.

##### Layout

###### Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### RTL Mode

###### Change Language Direction.

checkbox

##### Color Scheme

###### Choose Light or Dark Scheme.

##### Blue

##### Light

##### Dark

##### Orange

##### Brink Pink

##### Green

##### Layout Width

###### Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

##### Layout Position

###### Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

##### Topbar Color

###### Choose Light or Dark Topbar Color.

##### Light

##### Dark