Header¶

The header module is used to render a single header on the page.

Configuration parameters¶

content¶

string Text content of a header

level¶

string 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. We provide the following levels for the header module:

h2
h3
h4
h5
h6

shouldDisplayUnderline¶

int (optional) If set to 1 the header underline will be displayed

classNames¶

string (optional) A list of additional classes that will be added to the header element. For example "class-1 class-2".

Module source code¶

{% set hasUnderline = moduleConfig.shouldDisplayUnderline == 1 %}

<{{ moduleConfig.level }}
    class="header header_{{ moduleConfig.level }} {% if hasUnderline %} header_underline {% endif %} {{ moduleConfig.classNames }}"
>
    <span {% if hasUnderline %} class="header_highlight" {% endif %}>
        {{ moduleConfig.content }}
    </span>
</{{ moduleConfig.level }}>

Module configuration schema¶

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "%s Related settings in the Shoper Visual Editor%s- heading appearance (including color, size, text thickness) in the [\"Colors and Styles\"](%s) tab.%s- main color in the [\"Colors and Styles\"](%s) tab (responsible for the underline color below the heading).",
                    "placeholderValues": [
                        "####",
                        "\n",
                        "#theme-and-colors",
                        "\n",
                        "#theme-and-colors"
                    ]
                }
            },
            {
                "type": "text",
                "name": "content",
                "label": "Heading content",
                "isRequired" : true,
                "supportsTranslations": 1
            },
            {
                "type": "select",
                "name": "level",
                "label": "Heading level",
                "hint": "The numbers 2 to 6 indicate the hierarchy of headings, with H2 being the most important and H6 being the least. H1 is reserved for the page title. If you need to add a page title, use the \"Page title\" module.",
                "defaultValue": "h2",
                "options": {
                    "isWithSearch" : 0,
                    "selectOptions": [
                        { "key": "h2", "label": "H2" },
                        { "key": "h3", "label": "H3" },
                        { "key": "h4", "label": "H4" },
                        { "key": "h5", "label": "H5" },
                        { "key": "h6", "label": "H6" }
                    ]
                }
            },
            {
                "type": "checkbox",
                "name": "shouldDisplayUnderline",
                "label": "Add underline below the heading",
                "defaultValue": 1
            }
        ]
    },
    {
        "state": "unfolded",
        "label": "CSS",
        "elements": [
            {
                "type": "text",
                "name": "classNames",
                "label": "CSS class",
                "labelDescription": "Enter the class name without a dot at the beginning. You can add multiple classes by separating them with spaces."
            }
        ]
    }
]

Styles reference¶

Header