GDL - Global Design Language

Header 

<div class="c-navbar__toggle-shadow u-fixed u-none@md"></div>

<header id="c-header" class="c-header  u-z-high u-relative ">

    <div class="o-container u-flex@lg u-justify-betweenlg">

        <div class="u-relative u-size-full">

            <div class="c-header__top u-py-base u-py-xsmall@md u-pr-base">
                <a href="/">

                    <svg class="c-brand 
  c-brand--resize-medium 
   
   
  " viewBox="0 0 500 50" xmlns="http://www.w3.org/2000/svg">

                        <path d="M22.5 40.6l1.5 8.5h10.5L24.5.9H10L0 49.1h10.2l1.4-8.5h10.9zM278.3 0c11 0 17.7 6.6 17.7 25 0 18.3-6.6 25-17.7 25-11 0-17.7-6.5-17.7-25 0-18.3 6.6-25 17.7-25zM53.2 0c9.7 0 14.3 5.5 15.6 13.8l-9.6 2.6c-.7-3.7-2.2-6.8-6.4-6.8-4.6 0-6.8 4-6.8 14.5 0 11.9 2.5 16.3 7.8 16.3 4 0 5.8-2.2 6.3-4.3v-4.8h-7v-9.5h16.4V49h-9.2v-3h-.2a11 11 0 01-8.6 3.6c-8.3 0-15.9-5.7-15.9-25C35.6 6.2 42.6 0 53.2 0zm86.7 0c9.8 0 14.3 5.5 15.6 13.8l-9.6 2.6c-.7-3.7-2.2-6.8-6.3-6.8-4.7 0-7 4-7 14.5 0 11.9 2.6 16.3 8 16.3 3.9 0 5.7-2.2 6.3-4.3v-4.8h-7v-9.5h16.3V49h-9.1v-3h-.2a11 11 0 01-8.6 3.6c-8.4 0-16-5.7-16-25 0-18.6 7-24.7 17.6-24.7zM89.1.9c9.5 0 14.4 6.5 14.4 15.9 0 5.9-2.2 10.5-6.5 12.7l7.6 19.6H93.3l-6-17.4-1.4.1h-1.4v17.3h-10V.9zm29.1 0v48.2h-10V.9h10zm69.3 0v9.6h-16.3v9.3h12.2V29h-12.2v10.4H188V49h-26.7V.9h26.3zm15.2 0l12.9 28h.2V.9h9.6v48.2h-10.2l-12.9-27h-.2v27h-9.6V.9h10.2zm56.2 0v9.6h-9.8V49h-10V10.5h-9.8V.9h29.6zm19.4 8.7c-5 0-7.4 3.6-7.4 15.3 0 11.9 2.4 15.5 7.4 15.5s7.4-3.5 7.4-15.3c0-12-2.5-15.5-7.4-15.5zm-261.1.8l1.5 9 2.1 12h-7.5l2.1-12.1 1.5-8.9h.3zm71.2 0h-4v13h4.2c2.9 0 4.8-2 4.8-6.5 0-4-1.7-6.5-5-6.5z" class="c-brand__edition"></path>
                        <path d="M356.8 0c11 0 17.8 6.6 17.8 25 0 18.3-6.6 25-17.8 25-11 0-17.8-6.5-17.8-25 0-18.3 6.7-25 17.8-25zm-44.6.9l13 28h.1V.9h9.6v48.2h-10.2l-12.9-27h-.2v27H302V.9h10.2zm93.8 0v9.6h-10V49h-10V10.5h-9.9V.9H406zm14 0v48.2h-10.1V.9h10zm33 0V11l-13.4 22.2-3.7 6 .1.3h17.2v9.6h-28.7v-9.7L438.8 16l3.3-5.4-.1-.2h-17V.9h28zm14.9 0v48.2h-10.1V.9h10zm31.8 0v9.6h-16.4v9.3h12.2V29h-12.2v10.4H500V49h-26.8V.9h26.5zM356.8 9.6c-5 0-7.4 3.6-7.4 15.3 0 11.9 2.4 15.5 7.4 15.5s7.4-3.5 7.4-15.3c0-12-2.5-15.5-7.4-15.5z" class="c-brand__network"></path>

                    </svg>

                </a>
            </div>

            <!-- <div class="c-navbar__subscription u-absolute u-none@md">
				
<button class="c-btn c-btn--primary u-relative  u-flex u-cursor-pointer  u-items-center u-nowrap
  
    c-btn--rounded
   
 
  

   
    c-btn--small u-label-05
   

  " 
   
  
   true 
  >

  

  Abbonati 
  
</button>
			</div> -->

            <div class="c-navbar__toggle u-none@md" data-toggle-menu onclick="this.classList && 
				document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
				document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
				document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
				document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
				document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
				document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">

                <svg class="o-icon o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open>
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
                </svg>
                <svg class="o-icon o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close>
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
                </svg>
            </div>

            <div class="u-none u-flex@md u-items-center u-mr-small@lg">

                <nav class="c-navbar  u-flex ">

                    <a href="#" class="c-navbar__item u-no-underline is-active" data-item-navigation data-channel="/notizie/">Notizie</a>

                    <a href="#" class="c-navbar__item u-no-underline " data-item-navigation data-channel="/life/">Life</a>

                    <a href="#" class="c-navbar__item u-no-underline " data-item-navigation data-channel="/cultura/">Cultura</a>

                    <a href="#" class="c-navbar__item u-no-underline " data-item-navigation data-channel="/opinioni/">Opinioni</a>

                </nav>

                <div class="c-navbar__toggle" data-toggle-menu onclick="this.classList && 
					document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
					document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
					document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
					document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
					document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
					document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">

                    <svg class="o-icon o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
                    </svg>
                    <svg class="o-icon o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
                    </svg>
                </div>

                <div class="c-navbar__search u-none u-block@md" data-search onclick="this.classList && 

					document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
					document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
					document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.toggle('is-hidden');}),
					document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.remove('is-open');})">

                    <svg class="o-icon o-icon--md u-cursor-pointer" data-search-open>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
                    </svg>
                    <svg class="o-icon o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-search-close>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
                    </svg>
                </div>

            </div>

        </div>

        <div class="c-header__focus u-py-xsmall u-px-small u-ml-auto u-my-xsmall u-mr-xxsmall u-size-1-2 u-none u-flex@lg u-justify-center">
            <span class="logo-europa logo-europa--parlamento"> </span>
        </div>

        <div class="c-header__focus u-size-1-2">
            <article class="c-story c-story--editorial  u-relative" data-channel="/opinioni/">

                <figure class="c-avatar u-ratio-1    u-relative u-radius-circle u-overflow-hidden ">
                    <a href="#">
                        <img decoding="async" referrerpolicy="no-referrer" class="c-avatar__thumb u-absolute u-left u-bottom u-size-full" src="https://admin.previewtoday.strategy.it/images/test/alberto_berlini.png" loading="lazy" alt="" />
                    </a>
                </figure>

                <header class="c-story__header">
                    <a class="o-link-text" href="#">
                        <h1 class="u-heading-05 u-truncate u-truncate-3 u-mb-none u-mt-none">Angels there and shore with or. The visiter chamber clasp.</h1>
                    </a>

                </header>

                <span class="c-story__byline u-label-09 u-inline-block">
                    <svg class="o-icon o-icon--sm o-icon--fill">
                        <use xlink:href="#icon-apex" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                    </svg>
                    <span class="u-inline-block">Massimiliano Dona</span>
                </span>

            </article>
        </div>

    </div>

    <div class="c-searchbar u-shadow-bottom u-z-upside u-size-full u-absolute u-px-base u-py-large  is-hidden " data-search-bar>
        <div class="o-container u-px-small@md">

            <div class="u-relative">
                <input class="u-size-full   " type="text" placeholder="Cerca nel sito">
                <button class="c-form-action c-btn c-btn--reset u-absolute u-cursor-pointer" type="submit">

                    <svg class="c-form-icon o-icon o-icon--md">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
                    </svg>

                </button>
            </div>

        </div>
    </div>
</header>
 
<div class="c-navbar__toggle-shadow u-fixed u-none@md"></div>

<header id="c-header" class="c-header {% if inverse %}c-header--inverse{% endif %} u-z-high u-relative {% if(mobile) %} u-none@md {% endif %}">	

	<div class="o-container u-flex@lg u-justify-betweenlg"> 

		<div class="u-relative u-size-full">		

			<div class="c-header__top u-py-base u-py-xsmall@md u-pr-base">
				<a href="/">
					{% render "@brand",{local: true, logo: true, modifier:'resize-medium'},false %}
				</a>
			</div>

			<!-- <div class="c-navbar__subscription u-absolute u-none@md">
				{% render "@button--primary",{label:'Abbonati', size: 'small', rounded:'true'},true %}
			</div> -->

			<div class="c-navbar__toggle u-none@md" data-toggle-menu onclick="this.classList && 
				document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
				document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
				document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
				document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
				document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
				document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">

				<svg class="o-icon o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open >
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
				</svg>
				<svg class="o-icon o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close >
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
				</svg>
			</div>

			<div class="u-none u-flex@md u-items-center u-mr-small@lg">
				
				<nav class="c-navbar {% if local %}u-none u-flex@md {% else %} u-flex {% endif %}">
					
					{% for nav in navigation %}
						{% if nav.name!= 'Altre sezioni' %}
							<a href="#" class="c-navbar__item u-no-underline {% if nav.active %}is-active{% endif %}" data-item-navigation data-channel="{{nav.channel}}">{{nav.name}}</a>
						{% endif %}
					{% endfor %}
					
				</nav>

				<div class="c-navbar__toggle" data-toggle-menu onclick="this.classList && 
					document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
					document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
					document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
					document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
					document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
					document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">

					<svg class="o-icon o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open >
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
					</svg>
					<svg class="o-icon o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close >
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
					</svg>
				</div>

				<div class="c-navbar__search u-none u-block@md" data-search onclick="this.classList && 

					document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
					document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
					document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.toggle('is-hidden');}),
					document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.remove('is-open');})">

					<svg class="o-icon o-icon--md u-cursor-pointer" data-search-open >
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
					</svg>
					<svg class="o-icon o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-search-close >
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
					</svg>
				</div>

			</div>

		</div>

		{% if local or cibo %}
			<div class="c-header__focus u-ml-auto u-mr-xxsmall u-size-1-2">
				{% render "@story", {modifier: "inline-sm", size:"tiny", detailed: false, hideSummary:true, sublinks: false, truncate: 3}, true %}
			</div>
			<div class="c-header__focus u-size-1-2">
				{% render "@story", {modifier: "inline-sm", size:"tiny", detailed: false, hideSummary:true, sublinks: false, truncate: 3}, true %}
			</div>
		{% else  %}
			{% render "@logo-europa" %}
			
			<div class="c-header__focus u-size-1-2">
				{% render "@story--editorial", {hideSummary:true, simpleLayout: true}, true %}
			</div>
		{% endif %}

	</div>

		{% render "@searchbar", {open:false},true %}
</header>
 
{
  "channel": "Cronaca",
  "navigation": [
    {
      "nav": null,
      "name": "Notizie",
      "channel": "/notizie/",
      "active": true,
      "list": [
        {
          "item": null,
          "name": "Politica"
        },
        {
          "item": null,
          "name": "Economia"
        },
        {
          "item": null,
          "name": "Europa"
        },
        {
          "item": null,
          "name": "Cronaca"
        },
        {
          "item": null,
          "name": "Mondo"
        },
        {
          "item": null,
          "name": "Ambiente"
        },
        {
          "item": null,
          "name": "Green"
        },
        {
          "item": null,
          "name": "Attualità"
        },
        {
          "item": null,
          "name": "Città"
        }
      ]
    },
    {
      "nav": null,
      "name": "Life",
      "channel": "/life/",
      "active": false,
      "list": [
        {
          "item": null,
          "name": "Benessere"
        },
        {
          "item": null,
          "name": "Casa"
        },
        {
          "item": null,
          "name": "Cucina"
        },
        {
          "item": null,
          "name": "Donna"
        },
        {
          "item": null,
          "name": "Gossip"
        },
        {
          "item": null,
          "name": "Salute"
        },
        {
          "item": null,
          "name": "Viaggi"
        },
        {
          "item": null,
          "name": "Spettacoli"
        },
        {
          "item": null,
          "name": "Motori"
        }
      ]
    },
    {
      "nav": null,
      "name": "Cultura",
      "channel": "/cultura/",
      "active": false,
      "list": [
        {
          "item": null,
          "name": "Cinena"
        },
        {
          "item": null,
          "name": "Eventi"
        },
        {
          "item": null,
          "name": "Formazione"
        },
        {
          "item": null,
          "name": "Scienze"
        }
      ]
    },
    {
      "nav": null,
      "name": "Opinioni",
      "channel": "/opinioni/",
      "active": false,
      "list": [
        {
          "item": null,
          "name": "Asso di denari"
        },
        {
          "item": null,
          "name": "Cronache marziane"
        },
        {
          "item": null,
          "name": "Curarsi mangiando"
        },
        {
          "item": null,
          "name": "Famiglia creativa"
        },
        {
          "item": null,
          "name": "FotoGrammi"
        }
      ]
    },
    {
      "nav": null,
      "name": "Altre sezioni",
      "active": false,
      "list": [
        {
          "item": null,
          "name": "Foto"
        },
        {
          "item": null,
          "name": "Video"
        },
        {
          "item": null,
          "name": "Best - Guida allo shopping"
        }
      ]
    }
  ]
}
  • Content: 
    // Name:            Header
// Description:     Header of website
//
// Component:       `c-header`
//
// Variants:        `c-header--inverse`
// Variants:        `c-header--wide`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//                  `settings/v7/spacing.tokens`
//                  `settings/v7/typography.map`
//                  `tools/v7/typography`
//
// ========================================================================

// Variables
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/objects/v7/links' as *;
@use '../../../assets/sass/objects/v7/icons' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/typography' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;

$header-navbar-line: $global-active-line;

// ========================================================================

.c-header {

  // Custom properties
  // ========================================================================

  --header-background: var(--theme-color);
  --nav-border: #{$ui-01};
  
  // ========================================================================
	
  background-color: var(--header-background);
  
  @if $layout == amp {
    [data-theme="today"] & {
      --header-background: var(--theme-color);
    }
  }

  @if $responsive-breakpoints {
    @include bp(md) {
      --nav-border: var(--theme-color);
      --header-background: var(--background-color-gray-dark);
    }
  }

  @if $layout == wide  {
    position: fixed;
    z-index: var(--header-z-index);
  }

  // 
  // Wide variant
  //
  @if $layout != amp  {
    &--wide-transparent {
      --header-z-index:99;
      z-index: var(--header-z-index);
      background-color: #{rgba($ui-06,.1)};
      body[data-model="sponsor"] & {
        --header-z-index: 999;
      }
    }
  }

  // 
  // Header focus area
  //

  // Check if $amp IS NOT true
  @if $layout != amp  {
    &__focus {
      display: none;
      @if $responsive-breakpoints {
        @include bp(lg) {
          display: block;
          margin-top: $margin-xsmall;
          margin-bottom: $margin-xsmall;
          padding: $padding-xsmall $padding-small;
          overflow: hidden;
        }
      }
  
      // Set background and link colors depending on [data-theme]
  
      body[data-theme="today"] & {
        background-color: var(--theme-color-darker);
  
        .o-link-text {
          color: $link-01;
        }
      }
  
      // Set background and link colors depending on [data-theme]
  
      body:not([data-theme="today"]) & {
        background-color: var(--background-color);

        .o-link-text {
          color: var(--link-color-dark);
        }
      }
    }
  }

  // 
  // Inverse variant
  //

  &--inverse{
    --header-background: var(--background-color);
  }

  
  //
  // Header channel
  //

  &__channel {
    --channel-link: var($ui-04);
    color: var(--channel-link);
    text-decoration: none;
    @include type(title-07);

    @if $responsive-breakpoints {
      @include bp(md){
        @include type(title-03);
      }
    }

    // Hide channel title when header varianti is 'inverse'
    
    .c-header--inverse & {
      display: none;
    }
  }

  //
  // Header top section
  //

  &__top {
    position: relative;
    @if $responsive-breakpoints {
      @include bp(md) {
        min-width: 60%;
      }
    }
    // box-shadow: inset 0 -1px rgba($ui-01, .15);
    
    &::after {
      display: block;
      position: absolute;
      bottom: 0;
      content: '';
      margin: 0 calc(var(--outer-gutter) * -1);
      width: calc(100% + var(--outer-gutter) * 2);
      height: 1px;
      background-color: $ui-01-10;
      @if $responsive-breakpoints {
        @include bp(md) {
          display: none;
        }
      }
    }

  }

}

// Navbar
// ========================================================================

.c-navbar {
  
  @if $layout != amp  {
    &__search {
      .c-header:not(.c-header--slim) &{
        @if $responsive-breakpoints {
          @include bp(md) {
            margin-left: $margin-small;
          }
        }
      }
    }
  }

  &__subscription {
    top: .9rem;
    right: 2rem;
    @if $responsive-breakpoints {
      @include bp(sm) {
        top: 1.2rem;
      }
    }
  }

  &__toggle {
    position: absolute;
    top: $padding-base;
    right: 0;
    margin-left: auto;
    @include z(higher);
    @if $responsive-breakpoints {
      @include bp(sm) {
        top: 1.25rem;
      }
      @include bp(md) {
        position: relative;
        top: auto;
        right: auto;
        margin-left: $margin-medium;
      }
    }

  }

  &__toggle-shadow {
    top: $padding-xsmall;
    right: $padding-xsmall;
    border-radius: $global-radius;
    background-color: rgba(21,16,16,.55);
    height: $margin-large;
    width: $margin-large;
    @include z(upside);
    body:not([data-homepage]) & {
      display: none;
    }
  }

  &__item {
    --item-link-color: #{$ui-01};
    position: relative;
    color: var(--item-link-color);
    white-space: nowrap;
    text-decoration: $link-decoration;
    padding: $padding-small 0;
    transition: box-shadow .3s ease-in;
    @if $responsive-breakpoints {
      @include bp(md) {
        --item-link-color: #{$ui-02};
      }
    }
    @include type(nav-04);
    @if $responsive-breakpoints {
      @include bp(md) {
        @include type(nav-06);
      }
    }

    & + & {
      margin-left: $margin-base;
    }

    &:hover,
    &.is-active {
      box-shadow: inset 0 -#{$header-navbar-line} var(--nav-border);
     
    }

    body[data-model="show"],
    body[data-channel*="/foto/"] &,
    body[data-model*="video"] &,
    body[data-channel*="/video/"] &,
    [data-color-scheme*="dark"] &{
      --item-link-color: #{$ui-01};
    }
  }

  &__search,
  &__controller {
    
    color: $icon-inverse;

    @if $layout == amp {
      [data-theme="today"] & {
        color: $ui-01;
      }
    }

    @if $responsive-breakpoints {
      @include bp(md) {
        color: $icon-color;
      }
    }
    
    .c-header--inverse & {
      color: $icon-color;
    }
  }
}

[data-toggle-menu] {
  &.is-active {
    [data-toggle-menu-open] {
      display: none;
    }

    [data-toggle-menu-close] {
      display: block;
    }
  }
  
  [data-toggle-menu-open] {
    display: block;
  }

  [data-toggle-menu-close] {
    display: none;
  }
}

@if $layout!=amp {

  [data-search] {
    &.is-active {
      [data-search-open] {
        display: none;
      }

      [data-search-close] {
        display: block;
      }
    }

    [data-search-open] {
      display: block;
    }

    [data-search-close] {
      display: none;
    }
  }
}
  • URL: /components/raw/header/header.scss
  • Filesystem Path: src/lib/components/header/header.scss
  • Size: 7 KB

Header

The Header component as main element is present on all the pages of the project, this contains information on the existing header, on any focus in evidence, and on all pages navigable through the navigation bar.

The structure of the component, in detail, provides

  • the logo of the magazine
  • two possible highlights
  • a navigation bar
  • a menu
  • a button (hamburger icon) for opening and closing the menu
  • a button to activate the search (lens icon).

The component is completely responsive, based on the spatial resolution adopted on the device it presents or omits information, e.g. in the mobile version the two focuses are automatically hidden.

Templates

It comes along with 2 different templates:

  • hedaer.njk default layout;
  • header--slim.njk generally this version will be used in the internal pages of the websites of the publications.

Render color variation

The background color of the component varies according to the newspaper (blue for Today.it, yellow for the RomaToday.it header, etc …) through a global class set on body HTML node:

<body class="t-today" style="margin: 0; padding: 0">

Usage

Render header

In order to display a header component use following syntax:

  1. for a default header:
  {% render "@header--default" %}
  1. for a slim header:
  {% render "@header--slim" %}
  1. for a slim inverted header:
  {% render "@header--slim-inverted" %}
  1. for a wide header:
  {% render "@header--wide" %}
  1. for a cibo header:
  {% render "@header--cibo" %}
  1. for a local header:
  {% render "@header--local" %}