{% component "Modal" %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Modal title{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>Modal body text goes here.</p>
              {% endcomponent %}
              {% component "ModalFooter" %}
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" size="sm" %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Small Modal{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This is a small modal.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" size="lg" %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Large Modal{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This is a large modal.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" size="xl" %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Extra Large Modal{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This is an extra large modal.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" fullscreen=True %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Fullscreen Modal{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This is a fullscreen modal.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" fullscreen="sm" %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Fullscreen Below SM{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This modal is fullscreen below sm breakpoint.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" fullscreen="md" %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Fullscreen Below MD{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This modal is fullscreen below md breakpoint.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" fullscreen="lg" %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Fullscreen Below LG{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This modal is fullscreen below lg breakpoint.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" centered=True %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Vertically Centered Modal{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This modal is vertically centered.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" scrollable=True %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Scrollable Modal{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This modal has a scrollable body when content is long.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" backdrop="static" keyboard=False %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Static Backdrop Modal{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This modal won't close when clicking outside.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}New message{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <form>
                  <div class="mb-3">
                    <label for="recipient-name" class="col-form-label">Recipient:</label>
                    <input type="text" class="form-control" id="recipient-name">
                  </div>
                  <div class="mb-3">
                    <label for="message-text" class="col-form-label">Message:</label>
                    <textarea class="form-control" id="message-text"></textarea>
                  </div>
                </form>
              {% endcomponent %}
              {% component "ModalFooter" %}
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" fade=False %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}No Fade Modal{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This modal doesn't have fade animation.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" %}
              {% component "ModalHeader" close_button=False %}
                {% component "ModalTitle" %}No Close Button{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This modal header has no close button.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" as_="h1" %}Custom Heading Level{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This modal title uses h1 instead of h5.</p>
              {% endcomponent %}
            {% endcomponent %}

{% component "Modal" centered=True scrollable=True %}
              {% component "ModalHeader" %}
                {% component "ModalTitle" %}Centered & Scrollable{% endcomponent %}
              {% endcomponent %}
              {% component "ModalBody" %}
                <p>This modal is both centered and scrollable.</p>
              {% endcomponent %}
            {% endcomponent %}