Placeholders can be used to enhance the experience of your application. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.

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

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

The size of .placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-{xs|sm|lg}.

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