Main-header section

We can have several variations, helped by embedded modules if it is significantly different, or a modification class. The basic variants are with image and without image.

HTML / Latte

{*
    Example of ImageDetail and ImageExist filter to use for image rendering
    Filter ImageDetail returns either name or alt of an image that has been set on menuitem page

    {var $name = (($page|imageDetail,4|webalize) ?: ($page|name|webalize))}
    {var $alt = (($page|imageDetail,4,true|striptags) ?: ($page|name|striptags))}
    {var $img = ("/menuitem/big/img-{$page['id']}-4.jpg"|imageExist,false,"/menuitem/big/{$name}__img-{$page['id']}-4.jpg")}
*}

{* Main Header *}

<section n:class="'main-header', $img ? 'main-header--image' : 'main-header--color'">

    {* Main Header | Figure *}


    <div class="main-header__figure" n:if="$img">

        {* Single source *}

			{*<img class="main-header__img"
				 src="/userfiles/images/image.jpg" alt="obrazek">*}

			{* Multiple sources *}

			{*<picture class="main-header__picture">
				<source srcset="/userfiles/images/image.jpg"
						type="image/jpg" media="(min-width: 641px)">
				<source srcset="/userfiles/images/image.jpg"
						type="image/jpg">
				<img class="main-header__img"
					 src="/userfiles/images/image.jpg"
					 alt="{$page|name|striptags}">
			</picture>*}

    </div>

	{* Main Header | Content *}

    <div class="main-header__content --content">

        {* Main Header | Breadcrumb *}

        {include "./partials/components/breadcrumb.latte"}

        {* Main Header | Title *}

        <h1 class="main-header__title">
            {$page|header|noescape}
        </h1>

        {* Main Header | Perex *}

        <div class="main-header__perex" n:if="$page['supplements']['Perex']">
            {$page|perex:true|noescape}
        </div>

    </div>

</section>

CSS / SCSS

/* Main header */

.main-header {
  padding-top: 60px;
  padding-bottom: 30px;
  margin-top: 140px;
position: relative;
overflow: hidden;
}

.main-header--color {
  background-color: $color__gray-light;
}

.main-header__figure {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	
	
	&::after {
		@include pseudo;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: -1;
		background: linear-gradient(0deg, #000 0, transparent 50%);
	}
}

.main-header__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}