<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-none u-flex@md ">
<a href="#" class="c-navbar__item u-no-underline is-active" data-item-navigation data-channel="">Notizie</a>
<a href="#" class="c-navbar__item u-no-underline " data-item-navigation data-channel="">Cosa fare in città</a>
<a href="#" class="c-navbar__item u-no-underline " data-item-navigation data-channel="">Zone</a>
<a href="#" class="c-navbar__item u-no-underline " data-item-navigation data-channel="">Dossier</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-ml-auto u-mr-xxsmall u-size-1-2">
<article class="c-story c-story--inline-sm " data-channel="/notizie/">
<div class="c-story__media ">
<figure class="o-skeleton o-skeleton-media--responsive u-relative">
<a class="u-block u-size-full u-absolute u-left u-top" href="#">
<picture>
<source srcset="https://unsplash.it/600/338?random" media="(min-width: 740px)">
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="Angels there and shore with or. The visiter chamber clasp.">
</picture>
</a>
</figure>
</div>
<div class="c-story__content u-relative">
<header class="c-story__header ">
<div class="c-story__kicker u-mb-xsmall">
<span class="u-label-02 ">Label</span>
</div>
<a class="o-link-text" href="#">
<h1 class="
u-truncate u-truncate-3
c-story__heading
u-heading-06
u-m-none">Angels there and shore with or. The visiter chamber clasp.</h1>
</a>
<p class="
u-block u-none@md
u-truncate
u-truncate-3
c-story__summary u-body-03 u-truncate u-mb-none ">Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</p>
</header>
</div>
</article>
</div>
<div class="c-header__focus u-size-1-2">
<article class="c-story c-story--inline-sm " data-channel="/notizie/">
<div class="c-story__media ">
<figure class="o-skeleton o-skeleton-media--responsive u-relative">
<a class="u-block u-size-full u-absolute u-left u-top" href="#">
<picture>
<source srcset="https://unsplash.it/600/338?random" media="(min-width: 740px)">
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="Angels there and shore with or. The visiter chamber clasp.">
</picture>
</a>
</figure>
</div>
<div class="c-story__content u-relative">
<header class="c-story__header ">
<div class="c-story__kicker u-mb-xsmall">
<span class="u-label-02 ">Label</span>
</div>
<a class="o-link-text" href="#">
<h1 class="
u-truncate u-truncate-3
c-story__heading
u-heading-06
u-m-none">Angels there and shore with or. The visiter chamber clasp.</h1>
</a>
<p class="
u-block u-none@md
u-truncate
u-truncate-3
c-story__summary u-body-03 u-truncate u-mb-none ">Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</p>
</header>
</div>
</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",
"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": "Cosa fare in città",
"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": "Zone",
"active": false,
"list": [
{
"item": null,
"name": "Cinena"
},
{
"item": null,
"name": "Eventi"
},
{
"item": null,
"name": "Formazione"
},
{
"item": null,
"name": "Scienze"
}
]
},
{
"nav": null,
"name": "Dossier"
}
],
"local": true
}
// 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;
}
}
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 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.
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.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">