Alert

{% component "Alert" variant="primary" %}
                A simple primary alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="secondary" %}
                A simple secondary alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="success" %}
                A simple success alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="danger" %}
                A simple danger alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="warning" %}
                A simple warning alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="info" %}
                A simple info alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="light" %}
                A simple light alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="dark" %}
                A simple dark alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="primary" %}
                A simple primary alert with {% component "AlertLink" href="#" %}an example link{% endcomponent %}. Give it a click if you like.
            {% endcomponent %}

{% component "Alert" variant="success" %}
                A simple success alert with {% component "AlertLink" href="#" %}an example link{% endcomponent %}.
            {% endcomponent %}

{% component "Alert" variant="danger" %}
                A simple danger alert with {% component "AlertLink" href="#" %}an example link{% endcomponent %}.
            {% endcomponent %}

{% component "Alert" variant="success" %}
                {% component "AlertHeading" %}Well done!{% endcomponent %}
                <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                <hr>
                <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
            {% endcomponent %}

{% component "Alert" variant="primary" attrs:class="d-flex align-items-center" %}
                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
                <div>
                    An example alert with an icon
                </div>
            {% endcomponent %}

{% component "Alert" variant="primary" dismissible=True %}
                A simple primary dismissible alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="secondary" dismissible=True %}
                A simple secondary dismissible alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="success" dismissible=True %}
                A simple success dismissible alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="danger" dismissible=True %}
                A simple danger dismissible alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="warning" dismissible=True %}
                <strong>Holy guacamole!</strong> You should check in on some of those fields below.
            {% endcomponent %}

{% component "Alert" variant="info" dismissible=True %}
                A simple info dismissible alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="light" dismissible=True %}
                A simple light dismissible alert—check it out!
            {% endcomponent %}

{% component "Alert" variant="dark" dismissible=True %}
                A simple dark dismissible alert—check it out!
            {% endcomponent %}