<header id="c-header" class="c-header u-py-medium u-py-medium@md c-header--vanilla c-header--inverse u-z-high u-relative u-relative u-flex u-justify-center u-size-full">
<a class="u-flex u-justify-center" href="/">
<svg class="c-brand
c-brand--resize-small
" 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>
</header>
<header id="c-header" class="c-header u-py-medium u-py-medium@md c-header--vanilla c-header--inverse u-z-high u-relative {% if(mobile) %} u-none@md {% endif %} u-relative u-flex u-justify-center u-size-full">
<a class="u-flex u-justify-center" href="/">
{% render "@brand",{local: true, logo: true, modifier: "resize-small"},true %}
</a>
</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"
}
]
}
]
}
// 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;
}
}
}
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">In order to display a header component use following syntax:
{% render "@header--default" %} {% render "@header--slim" %} {% render "@header--slim-inverted" %} {% render "@header--wide" %} {% render "@header--cibo" %} {% render "@header--local" %}