modal_header¶

The modal_header macro is used to render a header of a modal with an "x" icon that allows to close it.

Definition¶

{% modal_header(title, options) %}

Input parameters¶

title¶

string represents a text that will be rendered inside the modal header

options¶

object represents an object of modal header configuration options

Option key	Type	Default	Required	Description
options.cssClasses	`string`	""	no	The list of classes that will be added to the modal header

Example¶

In this example we render a modal with the help of a modal header macro

{% from "@macros/modal_header.twig" import modal_header %}

<h-modal id="{{ options.modalName }}">
    {{ modal_header('Open me') }}

    <h-modal-body>
        <p>Some basic modal</p>
    </h-modal-body>
</h-modal>

Example¶

In this example we render the same modal but with additional classes

{% from "@macros/modal_header.twig" import modal_header %}

<h-modal id="{{ options.modalName }}">
    {{ modal_header('Open me', {
        cssClasses: 'color_success-700 mb-xs-4'
    }) }}

    <h-modal-body>
        <p>Some basic modal</p>
    </h-modal-body>
</h-modal>

Macro source code¶

{% macro modal_header(title, options) %}
    {% from "@macros/icon.twig" import icon %}

    <h-modal-header class="mb-xs-2">
        <header><span class="modal__title {{ options.cssClasses }}">{{ title }}</span></header>

        <h-modal-close class="btn btn_icon">
            {{ icon('icon-x', {
                size: 'l',
                classNames: ['btn__icon']
            }) }}
        </h-modal-close>
    </h-modal-header>
{% endmacro %}

Webcomponents reference¶

h-modal