Headers

Ready

HTML
View
Context
Info
Notes


        
        <!-- ### Begin: Element headers ### -->
<div id="c981" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h1 class="element-header">
                    Header 1. level
                </h1>
                <h2 class="element-subheader">Subheader 2</h2>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c684" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Header 2. level
                </h2>
                <h3 class="element-subheader">Subheader 3</h3>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c657" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h3 class="element-header">
                    Header 3. level
                </h3>
                <h4 class="element-subheader">Subheader 4</h4>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c357" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h4 class="element-header">
                    Header 4. level
                </h4>
                <h5 class="element-subheader">Subheader 5</h5>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c716" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h5 class="element-header">
                    Header 5. level
                </h5>
                <h6 class="element-subheader">Subheader 6</h6>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c353" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h1 class="element-header text-left">
                    <a href="#"> Header 1. level (left + with link)
                    </a>
                </h1>
                <h2 class="element-subheader text-left">Subheader 2</h2>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c319" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header text-left">
                    <a href="#"> Header 2. level (left + with link)
                    </a>
                </h2>
                <h3 class="element-subheader text-left">Subheader 3</h3>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c255" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h3 class="element-header text-left">
                    <a href="#"> Header 3. level (left + with link)
                    </a>
                </h3>
                <h4 class="element-subheader text-left">Subheader 4</h4>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c267" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h4 class="element-header text-left">
                    <a href="#"> Header 4. level (left + with link)
                    </a>
                </h4>
                <h5 class="element-subheader text-left">Subheader 5</h5>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c594" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h5 class="element-header text-left">
                    <a href="#"> Header 5. level (left + with link)
                    </a>
                </h5>
                <h6 class="element-subheader text-left">Subheader 6</h6>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c73" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h1 class="element-header text-center">
                    Header 1. level (center)
                </h1>
                <h2 class="element-subheader text-center">Subheader 2</h2>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c251" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header text-center">
                    Header 2. level (center)
                </h2>
                <h3 class="element-subheader text-center">Subheader 3</h3>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c805" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h3 class="element-header text-center">
                    Header 3. level (center)
                </h3>
                <h4 class="element-subheader text-center">Subheader 4</h4>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c549" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h4 class="element-header text-center">
                    Header 4. level (center)
                </h4>
                <h5 class="element-subheader text-center">Subheader 5</h5>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c15" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h5 class="element-header text-center">
                    Header 5. level (center)
                </h5>
                <h6 class="element-subheader text-center">Subheader 6</h6>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c881" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h1 class="element-header text-right">
                    Header 1. level (right)
                </h1>
                <h2 class="element-subheader text-right">Subheader 2</h2>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c923" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header text-right">
                    Header 2. level (right)
                </h2>
                <h3 class="element-subheader text-right">Subheader 3</h3>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c958" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h3 class="element-header text-right">
                    Header 3. level (right)
                </h3>
                <h4 class="element-subheader text-right">Subheader 4</h4>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c894" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h4 class="element-header text-right">
                    Header 4. level (right)
                </h4>
                <h5 class="element-subheader text-right">Subheader 5</h5>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>

<!-- ### Begin: Element headers ### -->
<div id="c98" class="frame frame-default frame-type-headers frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h5 class="element-header text-right">
                    Header 5. level (right)
                </h5>
                <h6 class="element-subheader text-right">Subheader 6</h6>
            </header>
        </div>
    </div>
</div>
<!-- ### End: Element headers ### -->
<hr>


        {% import _self as header %}

{% macro frame(header_layout, header_position, header_link) %}
    {% import _self as header %}

    {% set header_layout = header_layout|default(2) %}
    {% set subheader_layout = (header_layout + 1) %}
    {% if header_position %}
        {% set addToHeader = ' (' ~ header_position ~ ')' %}
    {% endif %}
    {% if header_link %}
        {% set addToHeader = addToHeader|trim(")") ~ ' + with link)' %}
    {% endif %}

    {% include "@frame-header" with {
        header: 'Header ' ~ header_layout ~ '. level' ~ addToHeader,
        subheader: 'Subheader ' ~ subheader_layout,
        header_layout: header_layout,
        header_link: header_link,
        header_position: header_position
    } %}
    <hr>
{% endmacro %}

{{ header.frame(1) }}
{{ header.frame(2) }}
{{ header.frame(3) }}
{{ header.frame(4) }}
{{ header.frame(5) }}

{{ header.frame(1,'left','#') }}
{{ header.frame(2,'left','#') }}
{{ header.frame(3,'left','#') }}
{{ header.frame(4,'left','#') }}
{{ header.frame(5,'left','#') }}

{{ header.frame(1,'center') }}
{{ header.frame(2,'center') }}
{{ header.frame(3,'center') }}
{{ header.frame(4,'center') }}
{{ header.frame(5,'center') }}

{{ header.frame(1,'right') }}
{{ header.frame(2,'right') }}
{{ header.frame(3,'right') }}
{{ header.frame(4,'right') }}
{{ header.frame(5,'right') }}


        
            
            /* No context defined. */

Handle: @variants-headers
Preview:
- With layout
- Component only
Filesystem Path: ../template/components/03-typo3/variants/01-text/02-headers/headers.twig
References (1): @frame-header

No notes defined.