Header: Default

Ready

HTML
View
Context
Assets
Info
Notes


        
        <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="/">

                    <style>
                        @font-face {
                            font-family: 'NovecentoNarrow';
                            src: url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff2"),
                                url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff");
                            font-style: normal;
                            font-display: swap;
                        }
                    </style>

                    <div class="c-brand c-brand__text u-uppercase u-no-underline c-brand--resize-medium c-brand--inverse ">
                        <span class="c-brand__edition">agrigento</span><span class="c-brand__network">notizie</span>
                    </div>

                </a>
            </div>

            <!-- <div class="c-navbar__subscription u-absolute u-none@md">
				
<button class="c-btn c-btn--primary 
  
    c-btn--rounded
   
  
    u-flex
  
   
    c-btn--small 
    u-label-05
   
   
  u-cursor-pointer  u-items-center" 
  
>
  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="/lifestyle/">Lifestyle</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-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 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", {modifier:'resize-medium', inverse: true, local: true} %}
				</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 %}
			<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": "Lifestyle",
      "channel": "/lifestyle/",
      "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"
        }
      ]
    }
  ]
}

File:

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
// ========================================================================

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

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

.c-header {

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

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

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

  // 
  // Inverse variant
  //

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

  // 
  // Wide variant
  //

  &--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;
      @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);
        }
      }
    }
  } 

  
  //
  // Header channel
  //

  &__channel {
    --channel-link: var($ui-04);
    color: var(--channel-link);
    text-decoration: none;
    @include type(title-07);
    @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;

    @include bp(md) {
      min-width: 60%;
    }

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

  }

}

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

.c-navbar {

  &__subscription {
    right: 2rem;
    top: .9rem;
    @include bp(sm) {
      top: 1.2rem;
    }
  }

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

  }

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

  &__search {
    .c-header:not(.c-header--slim) &{
      @include bp(md) {
        margin-left: $margin-small;
      }
    }
  }

  &__item {
    --item-link-color: #{$ui-01};
    color: var(--item-link-color);
    @include bp(md) {
      --item-link-color: #{$ui-02};
    }
    white-space: nowrap;
    text-decoration: $link-decoration;
    position: relative;
    padding: $padding-small 0;
    transition: box-shadow .3s ease-in;
    @include type(nav-04);
    @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-channel*="foto"] &,
    body[data-model*="video"] &,
    body[data-channel*="video"] &,
    [data-color-scheme*="dark"] &{
      --item-link-color: #{$ui-01};
    }
  }

  &__search,
  &__controller {
    
    color: $icon-inverse;
    
    .c-header--inverse & {
      color: $icon-color;
    }
    @include bp(md) {
      color: $icon-color;
      @if $layout == amp {
        [data-theme="today"] & {
          color: $ui-01;
        }
      }
    }
  }
}

[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;
  }
}

[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: 5.8 KB

Handle: @header--default
Variants (5): Default , Slim , Slim Inverted , Wide , Local
Preview:
- With layout
- Component only
Filesystem Path: src/lib/components/header/header.njk
References (6): @brand, @button--primary, @story, @logo-europa, @story--editorial, @searchbar
Referenced by (5): @channel--parent, @channel--opinioni, @homepage, @homepage--preview, @preview--fullpage

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">