<div class="c-subheader u-relative">
<div class="o-container u-flex u-column u-row@md u-items-center@md ">
<nav class="c-subheader__navbar u-flex u-items-center u-overflow-auto u-gap-medium">
<a href="#" class="c-subheader__item c-subheader__item--active u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
Cronaca nera
</a>
<a href="#" class="c-subheader__item u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
Incidenti
</a>
<a href="#" class="c-subheader__item u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
Covid-19
</a>
</nav>
</div>
</div>
<div class="c-subheader {% if sticky %} u-sticky u-top u-z-cover {% endif %} {% if modifier %} c-subheader--branded {% endif %} u-relative" >
<div class="{% if not wide %}o-container{% else %}u-px-large{% endif %} u-flex {% if not modifier %}u-column u-row@md u-items-center@md {% elif modifier=="sponsor" or modifier %} u-items-center{% endif %} ">
{% if logo %}
<div class="c-subheader__head u-py-small u-flex u-row u-items-center u-items-center u-justify-between">
<a href="#" class="o-link-text u-m-none u-size-fit u-contents">
{% if dossier %}
<svg xmlns="http://www.w3.org/2000/svg" class="c-dossier-logo" fill="none" viewBox="0 0 111 24">
<path fill="currentColor" d="M85.4 4a.3.3 0 0 1-.3-.3V.3a.3.3 0 0 1 .3-.3h7.3a.3.3 0 0 1 .4.3v3.4a.3.3 0 0 1-.4.3h-7.3ZM.4 24a.3.3 0 0 1-.4-.4V.3A.3.3 0 0 1 .4 0H4a.3.3 0 0 1 .4.3v23.4a.3.3 0 0 1-.4.3H.4ZM12.6 1.7a5.5 5.5 0 0 1 2 4v12.5c0 3.2-3 5.8-6.6 5.8H6.6a.3.3 0 0 1-.3-.3v-3.4a.3.3 0 0 1 .3-.3H8a2 2 0 0 0 2-1.8V5.8A2 2 0 0 0 8 4H6.6a.3.3 0 0 1-.3-.3V.3a.3.3 0 0 1 .3-.3H8a7 7 0 0 1 4.6 1.7M24 .1a.3.3 0 0 1 .1.3v3.4a.3.3 0 0 1-.2.3A2 2 0 0 0 22.3 6v12a2 2 0 0 0 1.6 1.9.3.3 0 0 1 .2.3v3.4a.3.3 0 0 1 0 .2.4.4 0 0 1-.4.1c-3.3-.4-5.9-2.9-5.9-5.9V6c.1-3 2.6-5.6 6-6l.2.1ZM32.3 6v12c0 3-2.6 5.5-6 6a.4.4 0 0 1-.2-.2.3.3 0 0 1-.1-.2v-3.4a.3.3 0 0 1 .2-.3 2 2 0 0 0 1.6-1.9V6a2 2 0 0 0-1.6-2 .3.3 0 0 1-.2-.3V.4a.3.3 0 0 1 0-.3h.4C29.7.4 32.3 3 32.3 6Zm9.3 14.2v3.4a.3.3 0 0 1-.1.2l-.3.1c-3.4-.4-6-3-6-6v-1.8a.3.3 0 0 1 .2-.2h4.1a.3.3 0 0 1 .3.2v1.8a2.2 2.2 0 0 0 1.5 2 .3.3 0 0 1 .3.3M41.5.1a.3.3 0 0 1 0 .3v3.4a.3.3 0 0 1-.1.3 2 2 0 0 0-1.6 2v1.1a2.3 2.3 0 0 0 1.5 2.1l.1.1a.3.3 0 0 1 .2.3v3.8a.3.3 0 0 1-.2.3.4.4 0 0 1-.3 0l-2-1a6.3 6.3 0 0 1-3.8-5.6v-1c0-3 2.5-5.7 5.9-6.1h.3ZM49.7 6v1.7a.3.3 0 0 1-.2.3h-4a.3.3 0 0 1-.3-.3V6.1a2.2 2.2 0 0 0-1.6-2 .3.3 0 0 1-.2-.3V.4a.3.3 0 0 1 0-.3.4.4 0 0 1 .4 0c3.4.4 6 3 6 6m-.1 10.7v1c0 3-2.6 5.7-6 6.1a.4.4 0 0 1-.2 0 .3.3 0 0 1-.1-.3v-3.4a.3.3 0 0 1 .2-.3 2 2 0 0 0 1.6-2v-1.1a2.4 2.4 0 0 0-1.5-2.2h-.1a.3.3 0 0 1-.2-.3v-3.8a.3.3 0 0 1 .2-.3.4.4 0 0 1 .3 0l2 .9a6.3 6.3 0 0 1 3.9 5.7m8.9 3.4v3.4a.3.3 0 0 1 0 .2l-.4.1c-3.4-.4-6-3-6-6v-1.8a.3.3 0 0 1 .4-.3h4a.3.3 0 0 1 .2.3v1.8a2.2 2.2 0 0 0 1.6 2 .3.3 0 0 1 .2.3M58.6.1a.3.3 0 0 1 .1.3v3.4a.3.3 0 0 1-.2.3 2 2 0 0 0-1.6 2v1.1a2.4 2.4 0 0 0 1.5 2.1l.1.1a.3.3 0 0 1 .2.3v3.8a.3.3 0 0 1-.1.3.4.4 0 0 1-.4 0l-1.9-1a6.3 6.3 0 0 1-3.9-5.6v-1c0-3 2.6-5.7 6-6.1h.2ZM66.9 6v1.7a.3.3 0 0 1-.3.3h-4a.3.3 0 0 1-.3-.3V6.1a2.2 2.2 0 0 0-1.5-2 .3.3 0 0 1-.3-.3V.4a.3.3 0 0 1 .2-.3.4.4 0 0 1 .3 0c3.4.4 5.9 3 5.9 6m0 10.7v1c0 3-2.6 5.7-6 6.1a.4.4 0 0 1-.3 0 .3.3 0 0 1 0-.3v-3.4a.3.3 0 0 1 .2-.3 2 2 0 0 0 1.5-2v-1.1a2.4 2.4 0 0 0-1.4-2.2h-.2a.3.3 0 0 1-.2-.3v-3.8a.3.3 0 0 1 .2-.3.4.4 0 0 1 .4 0l1.9.9a6.3 6.3 0 0 1 3.9 5.7m3.7 7.2a.3.3 0 0 1-.4-.4V.3a.3.3 0 0 1 .4-.3h3.8a.3.3 0 0 1 .3.3v23.4a.3.3 0 0 1-.3.3h-3.8Zm8.5 0a.3.3 0 0 1-.3-.4V.3A.3.3 0 0 1 79 0h4a.3.3 0 0 1 .4.3v23.4a.3.3 0 0 1-.4.3h-3.8Zm6.3-10.2a.3.3 0 0 1-.3-.3v-3.3a.3.3 0 0 1 .3-.3h5.1a.3.3 0 0 1 .4.3v3.3a.3.3 0 0 1-.4.3h-5Zm0 10.2a.3.3 0 0 1-.3-.4v-3.3a.3.3 0 0 1 .3-.3h7.3a.3.3 0 0 1 .4.3v3.3a.3.3 0 0 1-.4.4h-7.3Zm15.1-24a.3.3 0 0 1 .1.3v23.4a.3.3 0 0 1-.3.2h-3.9a.3.3 0 0 1-.3-.2V.3a.3.3 0 0 1 .3-.3h4.1m10.1 23.8a.3.3 0 0 1-.3.2h-4.5a.3.3 0 0 1-.2-.2l-3.2-5v-4.6a.3.3 0 0 1 .3-.3h2a1.2 1.2 0 0 0 1.2-1.1V5a1.2 1.2 0 0 0-1.3-1.1h-1.8a.3.3 0 0 1-.4-.3V.3l.1-.2.3-.1h1.8c3.3 0 5.9 2.3 5.9 5.1v7.7a5.2 5.2 0 0 1-3.5 4.7.3.3 0 0 0 0 .3l3.6 5.8a.2.2 0 0 1 0 .2Z"/>
</svg>
{% elif cibo %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.4 50">
<path fill="#fff" d="M0 50V0h105.4v50Z"/>
<path d="M58.5 27.3h-3.9v9.3h4.1c2.8 0 4.1-1.6 4.1-4.6 0-3-1.7-4.7-4.3-4.7Zm27-14.1c-4 0-6 3-6 11.7s2 12 6 12 6.1-3 6.1-12-2-11.7-6-11.7Zm-23.8 4.1c0-2.5-1.3-4-3.7-4h-3.4v8h3.5c2 0 3.6-1.4 3.6-4Z" fill="#e31d57"/>
<path d="M0 0v50h105.4V0Zm19.8 36.8c3.2 0 4.5-2.1 5.4-5.3l6.7 1.9c-1.6 6.2-4.7 10.4-12.2 10.4-8.2 0-13.5-5.2-13.5-19S11.3 6.2 19.7 6.2c6.5 0 11 3 12.3 11.1l-6.7 1.8c-.5-2.5-1.5-6-5.5-6-4.2 0-6 3.6-6 11.5 0 9.1 2 12.2 6 12.2ZM42.7 43h-7.4V6.9h7.4ZM59 43H47.4V6.9h11.3c6.2 0 10 3.5 10 9.4 0 4.5-2.8 7-5.1 7.5v.2c3 .7 6.5 3 6.5 8.8C70.1 39.5 66.8 43 59 43Zm26.5.8c-8.5 0-13.6-5.4-13.6-19S77 6.3 85.5 6.3s13.7 5 13.7 18.7S94 43.8 85.5 43.8Z" fill="#e31d57"/>
</svg>
{% else %}
<img decoding="async" referrerpolicy="no-referrer" src="{{ logo }}" class="c-subheader__logo" height="40">
{% endif %}
</a>
{% if dossier %}
{% render "@button--dossier",{label:'Abbonati', size: 'small'},true %}
{% endif%}
{% if channetitle %}
<a class="c-header__channel o-link-inverse u-ml-xsmall" href="#">
{{ channetitle }}
</a>
{% endif %}
</div>
{% else%}
{% if title %}
<div class="c-subheader__head u-py-small u-flex {% if not modifier %} u-column u-row@md {% else %} u-row u-items-center {% endif %} {% if avatar %}u-items-center{% endif %}">
<h1 class="u-title-01 u-m-none">
<a href="#" class="u-no-underline c-subheader__title ">
{{ title }}
</a>
</h1>
</div>
{% endif %}
{% endif %}
{% if navigation and not modifier %}
<nav class="c-subheader__navbar u-flex u-items-center u-overflow-auto u-gap-medium">
{% for nav in navigation %}
<a href="#" class="c-subheader__item {% if nav.status=='active' %}c-subheader__item--active{% endif %} u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
{{ nav.item }}
</a>
{% endfor %}
</nav>
{% endif %}
{% if sponsor %}
<img decoding="async" referrerpolicy="no-referrer" src="{{ sponsor }}" class="u-ml-auto">
{% endif%}
{% if modifier=="large" %}
<span class="c-subheader__menu u-label-02 u-cursor-pointer {% if logo %}u-color-inverse{% else%}o-link-text{% endif %} u-none@lg u-ml-auto u-mr-small u-my-small" onclick="this.classList && document.querySelectorAll('[data-subheader-nav]').forEach( function(oNode){ oNode.classList.toggle('is-open');})">
MENU
</span>
{% endif %}
</div>
{% if children and not modifier %}
<nav class="c-subheader__subnavbar">
<div class="o-container u-flex u-items-center u-overflow-auto u-gap-small">
{% for child in children %}
<a href="#" class="c-subheader__item {% if child.status=='active' %}c-subheader__item--active{% endif %} u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
{{ child.item }}
</a>
{% endfor %}
</nav>
</div>
{% endif %}
{% if modifier %}
<nav class="c-subheader__navbar c-subheader__navbar--lg u-m-none" data-subheader-nav>
<div class="o-container">
<ul class="c-subheader__main-list u-list-none u-list-reset u-flex u-column u-row@lg u-items-center">
{% for nav in navigation %}
<li tabindex="1" class="c-subheader__item {% if nav.status %}c-subheader__item--active{% endif %} u-relative u-py-base u-cursor-pointer" data-subheader-item>
<div class="u-flex u-justify-between u-justify-center">
<a href="#" class="u-no-underline {% if logo %}u-color-inverse{% else%}o-link-text{% endif %}">
{{ nav.item }}
</a>
{% if nav.list %}
<svg class="o-icon o-icon--sm u-ml-xxsmall u-cursor-pointer u-block" data-subheader-arrow>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
{% endif %}
</div>
{% if nav.list %}
<ul class="c-subheader__list u-justify-between u-wrap u-row u-column@lg u-list-none" data-subheader-list>
{% for a in nav.list %}
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline {% if logo %}u-color-inverse{% else%}o-link-text{% endif %}">
{{ a.item }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</nav>
{% endif %}
</div>
{
"media": "https://via.placeholder.com/56",
"title": false,
"navigation": [
{
"item": "Cronaca nera",
"status": "active"
},
{
"item": "Incidenti"
},
{
"item": "Covid-19"
}
]
}
// Name: Subheader
// Description: Subheader of website
//
// Component: `c-subheader`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/colors.mode`
// `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/objects/v7/links' as *;
@use '../../../assets/sass/objects/v7/icons' as *;
@use '../../../assets/sass/tools/v7/utils'as *;
@use '../../../assets/sass/tools/v7/colors'as *;
@use '../../../assets/sass/tools/v7/mq'as *;
@use '../../../assets/sass/tools/v7/spacing'as *;
@use '../../../assets/sass/tools/v7/typography'as *;
@use '../../../assets/sass/tools/v7/zindex'as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/atomictypography.map' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/colors.map' as *;
@use '../../../assets/sass/settings/v7/sizes.map' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/typography.tokens' as *;
@use '../../../assets/sass/settings/v7/visibility.map' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/properties' as *;
@use '../../../assets/sass/settings/v7/scrollbar' as *;
// Variables
// ========================================================================
$subheader-nav-line-height: 3px;
$subheader-nav-line-active: var(--nav-active-bg);
$subheader-nav-line-hover: var(--nav-active-bg-hover);
$subheader-height-logo: 40px;
$subheader-width-logo: 200px;
$subheader-custom-spacing: 26px;
// ========================================================================
.c-subheader {
// Custom properties
// ======================================================================
--subheader-border: transparent;
--subheader-navbar-spacing: 0;
--subheader-item-spacing: #{$padding-base};
// Category color variations
// Default colors are applied to 'notizie' or '/' data-channel
--subheader-border: var(--divider-color);
--subheader-text: var(--body-color);
--subheader-title: var(--body-color);
--subheader-text-hover: var(--hover-02, #{$hover-04});
// ======================================================================
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--subheader-border);
background-color: var(--subheader-background, var(--background-color)); //var(--subheader-background);
background-image: var(--subheader-background-image);
background-repeat: no-repeat;
background-position: center center;
background-size: var(--subheader-background-size);
transition: $global-interactive-transition;
@each $category, $name in $categories {
@if ($category!="notizie"){
@if $layout!=amp {
@media (prefers-color-scheme: dark) {
[data-theme="today"][data-channel*="#{$category}"]:not([data-color-scheme*="light"]) & {
--subheader-background: #{rgba(grabcolor($categories, $category, darker), .25)};
--subheader-text: #{$inverse-01};
--subheader-border: #{grabcolor($categories, $category, darker)};
}
}
[data-color-scheme*="dark"][data-theme="today"][data-channel*="#{$category}"] & {
--subheader-background: #{rgba(grabcolor($categories, $category, darker), .25)};
--subheader-text: #{$inverse-01};
--subheader-border: #{grabcolor($categories, $category, darker)};
}
}
[data-theme="today"][data-channel*="#{$category}"] & {
--subheader-border: #{grabcolor($categories, $category, base)};
--subheader-background: #{grabcolor($categories, $category, lighter)};
--subheader-text: #{grabcolor($categories, $category, darker)};
--subheader-text-hover: #{grabcolor($categories, $category, base)};
}
[data-theme="today"][data-channel*="/gossip"] & {
--subheader-background: #8947a3;
--subheader-text: #fff;
}
}
}
&::after {
position: absolute;
right: 0;
bottom: -5px;
content: '';
width: 100%;
height: 1px;
background-color: var(--subheader-border);
[data-channel*="dossier"] & {
display: none;
}
}
> div:first-child {
@include bp(md){
gap: #{$padding-small};
}
}
// Hide ::after border when modifier is branded
&.c-subheader--branded::after{
display: none;
}
//
// Subheader List
//
&__list {
display: none;
position: relative;
width: 100%;
margin-top: $margin-xxsmall;
margin-left: 0;
padding-left: 0;
@if $responsive-breakpoints {
@include bp(lg) {
position: absolute;
left: 0;
width: auto;
min-width: 100%;
margin-top: 0;
}
}
[data-subheader-item]:focus &,
[data-subheader-item]:hover & {
display: flex;
top: 100%;
background-color: var(--subheader-background-active, var(--background-color));
}
}
//
// Subheader Main List
//
&__main-list {
margin-right: -$padding-small;
margin-left: -$padding-small;
@if $responsive-breakpoints {
@include bp(lg) {
margin: 0;
}
}
}
//
// Subheader Title
//
&__title {
color: var(--subheader-title);
}
//
// Subheader Navbar
//
&__navbar {
// padding-top: var(--subheader-navbar-spacing);
// Custom Firefox scrollbar style
scrollbar-width: thin;
@if $layout!=amp {
// Navbar Large Variant
&--lg {
--subheader-navbar-spacing: 0;
display: none;
@include bp(lg) {
display: block;
border-top: 1px solid var(--subheader-light-line);
}
&.is-open {
display: block;
}
}
}
// Webkit scrollbar style
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track,
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 8px;
}
&::-webkit-scrollbar-track {
background: var(--background-color-light);
}
&::-webkit-scrollbar-thumb {
background: var(--theme-color-light);
}
.c-subheader__head ~ & {
// Remove padding top when adiacent to subheader head
--subheader-navbar-spacing: 0;
@if $responsive-breakpoints {
// Restore padding top on medium devices
@include bp(md) {
--subheader-navbar-spacing: #{$subheader-custom-spacing};
}
}
}
}
&__subnavbar {
backdrop-filter: brightness(90%);
&::after {
position: absolute;
top: 0;
right: 0;
content: '';
height: 1px;
background-color: var(--subheader-border);
}
}
//
// Subheader Item
//
&__item {
padding-top: var(--subheader-item-spacing);
padding-bottom: var(--subheader-item-spacing );
color: var(--subheader-text);
@include z(cover);
&:hover {
color: var(--subheader-text-hover);
}
// Subheader item children of Main List
.c-subheader__main-list > & {
padding-right: $padding-base;
padding-left: $padding-base;
@include bp(lg) {
padding-right: $padding-xsmall;
padding-left: $padding-xsmall;
}
}
.c-subheader__head ~ .c-subheader__navbar & {
// Remove padding top when adiacent to subheader head
//padding-top: 0;
// Change item spacing from medium devices
@include bp(md) {
--subheader-item-spacing : #{$subheader-custom-spacing};
}
}
// Active state modifier
&--active {
&::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: $subheader-nav-line-height;
background-color: var(--subheader-text);
.c-subheader__navbar--lg & {
width: $subheader-nav-line-height;
height: 100%;
@include bp(lg) {
width: 100% ;
height: $subheader-nav-line-height;
}
}
}
}
// Small modifier
&--small {
width: 50%;
padding-right: $padding-small;
padding-left: 0;
@include bp(lg) {
width: 100%;
padding-left: $padding-small;
}
}
// Subheader item children of Navbar Large
.c-subheader__navbar--lg & {
width: 100%;
@include type(nav-02);
@include bp(lg) {
font-size: type-size("brevier", base);
width: auto;
}
&:focus,
&:hover {
outline: none;
background-color: var(--subheader-background-active, var(--background-color));
color: var(--subheader-text);
&::after {
display: none;
}
[data-subheader-arrow] {
transform: rotate(180deg);
}
}
&:first-child {
margin-left: 0;
}
}
}
//
// Subheader Avatar
//
&__avatar {
margin-bottom: $margin-xsmall;
@include bp(md) {
margin-right: $margin-xsmall;
margin-bottom: 0;
}
}
//
// Subheader Logo
//
&__logo {
max-height: $subheader-height-logo;
// min-width: $subheader-width-logo;
}
// approfondimento custom values
body[data-channel*="dossier"] & {
--subheader-background: #{$ui-02};
--subheader-text: #{$ui-01};
.c-subheader__item--active::after{
@if $layout==amp {
background-color: #FFFF00;
}
@else {
background-color: var(--component-color-accent);
}
}
.c-dossier-logo path {
fill: #{$ui-01};
}
}
}
The peculiarity of this is to provide more navigation information on the page or channel you are visiting.
The Subheader component snaps into place as the header– slim component.
Possible layout variations:
In order to generate a variation you must set parameter declaration in it’s config file. If the evaluation of parameter will result true, because present a value in it’s configuration, it will be rendered in the component
In order to display a default subheader template use following syntax:
{% render "@subheader" %}