Placeholder

Basic

<p class="card-text placeholder-glow">
                {% component "Placeholder" xs=7 / %}
                {% component "Placeholder" xs=4 / %}
                {% component "Placeholder" xs=4 / %}
                {% component "Placeholder" xs=6 / %}
                {% component "Placeholder" xs=8 / %}
            </p>

Preview:

Placeholder Width Variants

<div>
                {% component "Placeholder" xs=6 / %}
                {% component "Placeholder" xs=12 / %}
                {% component "Placeholder" xs=3 / %}
            </div>

Preview:

Placeholder Size Large

{% component "Placeholder" xs=12 size="lg" / %}

Preview:

Placeholder Size Small

{% component "Placeholder" xs=12 size="sm" / %}

Preview:

Placeholder Size Extra Small

{% component "Placeholder" xs=12 size="xs" / %}

Preview:

Placeholder Bg Primary

{% component "Placeholder" xs=12 bg="primary" / %}

Preview:

Placeholder Bg Secondary

{% component "Placeholder" xs=12 bg="secondary" / %}

Preview:

Placeholder Bg Success

{% component "Placeholder" xs=12 bg="success" / %}

Preview:

Placeholder Bg Danger

{% component "Placeholder" xs=12 bg="danger" / %}

Preview:

Placeholder Bg Warning

{% component "Placeholder" xs=12 bg="warning" / %}

Preview:

Placeholder Bg Info

{% component "Placeholder" xs=12 bg="info" / %}

Preview:

Placeholder Bg Light

{% component "Placeholder" xs=12 bg="light" / %}

Preview:

Placeholder Bg Dark

{% component "Placeholder" xs=12 bg="dark" / %}

Preview:

Placeholder Animation Glow

<p class="placeholder-glow">
                {% component "Placeholder" xs=12 / %}
            </p>

Preview:

Placeholder Animation Wave

<p class="placeholder-wave">
                {% component "Placeholder" xs=12 / %}
            </p>

Preview:

Placeholder With Animation Prop

{% component "Placeholder" xs=12 animation="glow" / %}

Preview:

Placeholder With Wave Animation

{% component "Placeholder" xs=12 animation="wave" / %}

Preview:

Placeholder Button Primary

{% component "PlaceholderButton" variant="primary" xs=6 / %}

Preview:

Placeholder Button Secondary

{% component "PlaceholderButton" variant="secondary" xs=4 / %}

Preview:

Placeholder Button Success

{% component "PlaceholderButton" variant="success" xs=6 / %}

Preview:

Placeholder Button Danger

{% component "PlaceholderButton" variant="danger" xs=6 / %}

Preview:

Placeholder Custom Element

{% component "Placeholder" as_="div" xs=12 / %}

Preview:

Placeholder Combined Size And Color

{% component "Placeholder" xs=12 size="lg" bg="primary" / %}

Preview:

Placeholder Combined All Props

{% component "Placeholder" xs=8 size="sm" bg="success" animation="wave" / %}

Preview: