header

The header macro is used to render a header in a given context.

Definition

{% header(options) %}

Input parameters

options

object represents an object of header options

Option key	Type	Default	Required	Description
options.level	string	""	yes	Section level of a header describing the size and importance of the element in a given context. You can read more about heading elements here. Following levels for the header module are supported: h2, h3, h4, h5, h6
options.content	string	""	yes	Text content of a header
options.hasUnderline	string	""	no	If set to true the header underline will be displayed
options.classNames	string	""	no	A list of styling classes that will be added to the header element
options.linkUrl	string	""	no	If specified, a link will be displayed next to a header
options.linkTitle	string	""	no	Title of the link if specified
options.contentClassNames	string	""	no	A list of styling classes that will be added to the inner content element of the header

Example

Here is an example of a basic header

{% from "@macros/header.twig" import header %}
{{ header({
    level: 'h5',
    content: 'Basic header'
}) }}

Example

Here is an example of a header with a link

{% from "@macros/header.twig" import header %}
{{ header({
    level: 'h3',
    content: 'Header with link',
    linkUrl: 'https://google.com',
    linkTitle: 'My link'
}) }}

Example

Here is an example of a header with additional underline and classnames

{% from "@macros/header.twig" import header %}
{{ header({
    level: 'h2',
    content: 'Header with underline and classnames',
    hasUnderline: true,
    classNames: 'class-1 class-2 class-3',
    contentClassNames: 'content-class-1 content-class-2 content-class-3',
}) }}

Macro source code

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

    <{{ options.level }}
        class="
            header
            header_{{ options.level }}
            {% if options.hasUnderline %} header_underline {% endif %}
            {{ options.classNames }}
        "
    >
        {% if options.linkUrl %}
            <div class="module__link-wrapper">
        {% endif %}
            <span
                class="
                    {% if options.hasUnderline %} header_highlight {% endif %}
                    {{ options.contentClassNames }}
                "
            >
                {{ options.content }}
            </span>

            {% if options.linkUrl %}
                <a href="{{ options.linkUrl }}" class="module__link">
                    {{ options.linkTitle }}

                    {{
                        icon('icon-arrow-right', {
                            variant: 'link',
                            ariaHidden: true
                        })
                    }}
                </a>
            {% endif %}
        {% if options.linkUrl %}
            </div>
        {% endif %}
    </{{ options.level }}>
{% endmacro %}