Toast

{% component "Toast" %}
                  {% component "ToastHeader" %}
                    <img src="https://placehold.net/600x400.png" class="rounded me-2" alt="Toast icon">
                    <strong class="me-auto">Bootstrap</strong>
                    <small>11 mins ago</small>
                  {% endcomponent %}
                  {% component "ToastBody" %}
                    Hello, world! This is a toast message.
                  {% endcomponent %}
                {% endcomponent %}

{% component "Toast" autohide=False %}
                  {% component "ToastHeader" %}
                    <img src="https://placehold.net/600x400.png" class="rounded me-2" alt="Toast icon">
                    <strong class="me-auto">Bootstrap</strong>
                    <small>11 mins ago</small>
                  {% endcomponent %}
                  {% component "ToastBody" %}
                    Hello, world! This is a toast message.
                  {% endcomponent %}
                {% endcomponent %}

{% component "Toast" %}
                  {% component "ToastHeader" %}
                    <img src="https://placehold.net/600x400.png" class="rounded me-2" alt="Toast icon">
                    <strong class="me-auto">Bootstrap</strong>
                    <small class="text-body-secondary">11 mins ago</small>
                  {% endcomponent %}
                  {% component "ToastBody" %}
                    Hello, world! This is a toast message.
                  {% endcomponent %}
                {% endcomponent %}

<div class="toast-container position-static">
                  {% component "Toast" %}
                    {% component "ToastHeader" %}
                      <img src="https://placehold.net/600x400.png" class="rounded me-2" alt="Toast icon">
                      <strong class="me-auto">Bootstrap</strong>
                      <small class="text-body-secondary">just now</small>
                    {% endcomponent %}
                    {% component "ToastBody" %}
                      See? Just like this.
                    {% endcomponent %}
                  {% endcomponent %}

                  {% component "Toast" %}
                    {% component "ToastHeader" %}
                      <img src="https://placehold.net/600x400.png" class="rounded me-2" alt="Toast icon">
                      <strong class="me-auto">Bootstrap</strong>
                      <small class="text-body-secondary">2 seconds ago</small>
                    {% endcomponent %}
                    {% component "ToastBody" %}
                      Heads up, toasts will stack automatically
                    {% endcomponent %}
                  {% endcomponent %}
                </div>

{% component "Toast" attrs:class="align-items-center" %}
                  <div class="d-flex">
                    {% component "ToastBody" %}
                      Hello, world! This is a toast message.
                    {% endcomponent %}
                    {% component "CloseButton" attrs:class="me-2 m-auto" attrs:data-bs-dismiss="toast" / %}
                  </div>
                {% endcomponent %}

{% component "Toast" %}
                  {% component "ToastBody" %}
                    Hello, world! This is a toast message.
                    <div class="mt-2 pt-2 border-top">
                      {% component "Button" variant="primary" size="sm" %}Take action{% endcomponent %}
                      {% component "Button" variant="secondary" size="sm" attrs:data-bs-dismiss="toast" %}Close{% endcomponent %}
                    </div>
                  {% endcomponent %}
                {% endcomponent %}

{% component "Toast" attrs:class="align-items-center text-bg-primary border-0" %}
                  <div class="d-flex">
                    {% component "ToastBody" %}
                      Hello, world! This is a toast message.
                    {% endcomponent %}
                    {% component "CloseButton" variant="white" attrs:class="me-2 m-auto" attrs:data-bs-dismiss="toast" / %}
                  </div>
                {% endcomponent %}

{% component "ToastContainer" position="end" attrs:class="bottom-0 p-3" %}
                  {% component "Toast" %}
                    {% component "ToastHeader" %}
                      <img src="https://placehold.net/600x400.png" class="rounded me-2" alt="Toast icon">
                      <strong class="me-auto">Bootstrap</strong>
                      <small>11 mins ago</small>
                    {% endcomponent %}
                    {% component "ToastBody" %}
                      Hello, world! This is a toast message.
                    {% endcomponent %}
                  {% endcomponent %}
                {% endcomponent %}