Modal

The Modal component creates dialogs which can be used as a way to inform users amongst other uses.

{% embed '@Forumify/components/modal.html.twig' %}
    {% block modalOpenButton %}
        ...
    {% endblock %}
    {% block modalContent %}
        ...
    {% endblock %}
{% endembed %}

This component utilises the twig embed tag which allows you to include another template's contents. Learn more about twig embed here

The intended structure for the modal component can be seen in the below example:

{% embed '@Forumify/components/modal.html.twig' %}
    {% block modalOpenButton %}
        <button class="btn-link">Open</button>
    {% endblock %}
    {% block modalContent %}
        <div class="box">
            <h1>Hello World!</h1>
        </div>
    {% endblock %}
{% endembed %}

Both box and card are perfect for modalContent.