<div class="c-subheader c-subheader--branded u-relative">
<div class="o-container u-flex u-items-center ">
<div class="c-subheader__head u-flex u-row u-items-center u-my-base">
<h1 class="u-title-01 u-m-none">
<a href="#" class="u-no-underline c-subheader__title ">
Cronaca
</a>
</h1>
</div>
<span class="c-subheader__menu u-label-02 u-cursor-pointer o-link-text 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>
</div>
<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">
<li tabindex="1" class="c-subheader__item 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 o-link-text">
Bambini
</a>
</div>
</li>
<li tabindex="1" class="c-subheader__item 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 o-link-text">
Casa
</a>
</div>
</li>
<li tabindex="1" class="c-subheader__item 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 o-link-text">
Cibo
</a>
</div>
</li>
<li tabindex="1" class="c-subheader__item 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 o-link-text">
Regali e News
</a>
<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>
</div>
<ul class="c-subheader__list u-justify-between u-wrap u-row u-column@lg u-list-none" data-subheader-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 o-link-text">
Birra
</a>
</li>
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline o-link-text">
Cioccolata
</a>
</li>
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline o-link-text">
Dolci
</a>
</li>
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline o-link-text">
Liquori
</a>
</li>
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline o-link-text">
Street food
</a>
</li>
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline o-link-text">
Vino
</a>
</li>
</ul>
</li>
<li tabindex="1" class="c-subheader__item 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 o-link-text">
Libri
</a>
</div>
</li>
<li tabindex="1" class="c-subheader__item c-subheader__item--active 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 o-link-text">
Moda e bellezza
</a>
</div>
</li>
<li tabindex="1" class="c-subheader__item 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 o-link-text">
Sconti e Offerte
</a>
</div>
</li>
<li tabindex="1" class="c-subheader__item 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 o-link-text">
Sport
</a>
</div>
</li>
<li tabindex="1" class="c-subheader__item 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 o-link-text">
Tecnologia
</a>
<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>
</div>
<ul class="c-subheader__list u-justify-between u-wrap u-row u-column@lg u-list-none" data-subheader-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 o-link-text">
Birra
</a>
</li>
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline o-link-text">
Cioccolata
</a>
</li>
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline o-link-text">
Dolci
</a>
</li>
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline o-link-text">
Liquori
</a>
</li>
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline o-link-text">
Street food
</a>
</li>
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline o-link-text">
Vino
</a>
</li>
</ul>
</li>
<li tabindex="1" class="c-subheader__item 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 o-link-text">
Viaggi
</a>
</div>
</li>
</ul>
</div>
</nav>
</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-flex {% if not modifier %} u-column u-row@md {% else %} u-row u-items-center {% endif %} {% if avatar %}u-items-center{% endif %} u-my-base">
<a href="#" class="u-no-underline c-subheader__title u-size-fit">
{% if approfondimento %}
<svg viewBox="0 0 146 25" class="c-dossier-logo" xmlns="http://www.w3.org/2000/svg" width="0%" height="auto" fill="none">
<g clip-path="url(#a)">
<path fill="currentColor" d="M43.3 3.7c4.7 0 7.3 3.8 7.3 9.6 0 5.5-2.3 9-5.7 9h-.3c-1.4 0-2-.4-2-2.2V3.7h.7Zm1.8 20c7 0 11.7-4 11.7-11 0-5.9-4-10.4-12.4-10.4h-10v1.3c2 .2 2.2.5 2.2 2v14.8c0 1.6-.2 1.8-2.3 2v1.3h10.8Zm22-1c-2 0-2.6-3.2-2.6-8.2 0-3.9.5-6.2 2.4-6.2 2 0 2.6 3.2 2.6 8.2 0 3.9-.5 6.2-2.4 6.2ZM67 24c5 0 8.5-3.7 8.5-8.8 0-5-3.5-8.2-8.5-8.2s-8.5 3.7-8.5 8.8c0 5 3.5 8.2 8.5 8.2Zm16.2 0c4.1 0 6.8-2 6.8-5.6 0-3.3-2-4.5-5.7-5.8-2-.7-2.9-1.2-2.9-2.5 0-1.1.9-1.8 2.2-1.8 2.1 0 3.5 1.7 3.8 3.7h1.3V8.4A9.7 9.7 0 0 0 83.5 7c-3.6 0-6.3 1.9-6.3 5.3 0 3.1 1.9 4.5 5.3 5.6 2.1.7 3.3 1.2 3.3 2.7 0 1.4-1.2 2.1-2.6 2.1-2.4 0-4-1.9-4.6-4.4h-1.4l.2 4.1c1.3 1 3.3 1.6 5.8 1.6Zm14.5 0c4.1 0 6.8-2 6.8-5.6 0-3.3-2-4.5-5.7-5.8-2-.7-2.9-1.2-2.9-2.5 0-1.1.9-1.8 2.2-1.8 2.1 0 3.5 1.7 3.9 3.7h1.3V8.4A9.7 9.7 0 0 0 98 7c-3.6 0-6.3 1.9-6.3 5.3 0 3.1 2 4.5 5.3 5.6 2.1.7 3.3 1.2 3.3 2.7 0 1.4-1.2 2.1-2.6 2.1-2.4 0-4-1.9-4.6-4.4h-1.4l.2 4.1c1.3 1 3.3 1.6 5.8 1.6Zm15.6-17h-1L106 8.7v.9l1.7 1v10.7c0 1-.5 1.1-1.7 1.2v1.2h9v-1.2c-1.2 0-1.7-.2-1.7-1.2V7Zm-2.7-1.4c1.8 0 3-1.3 3-2.8 0-1.5-1.2-2.8-3-2.8-2 0-3 1.3-3 2.8 0 1.5 1 2.8 3 2.8ZM124.3 7c-4.4 0-8.2 3.4-8.2 8.9 0 5 3.4 8.1 8 8.1 3.8 0 6.1-2.2 7-5.6l-.6-.3a5.3 5.3 0 0 1-4.6 2.2c-2.7 0-4.7-2.3-4.7-5.9h9.7v-.8c0-3.8-2.2-6.6-6.6-6.6Zm-.4 1.3c1.6 0 2.2 1.8 2.2 4.7h-4.9c.2-2.8 1-4.7 2.7-4.7Zm15.6 4.5c1.4-1 3.1-1 5-1h.8V7.4c-.3-.3-.9-.5-1.6-.5-1.9 0-3 1.1-4.2 4.7l.1-4.7h-1l-6.4 1.7v.9l1.7 1v10.7c0 1-.5 1.1-1.7 1.2v1.2h9.7v-1.2c-1.7-.2-2.4-.3-2.4-1.6v-8Z"></path>
<path fill="#C84A04" d="m29.8 11.6-6.2-6a12 12 0 0 0-17 0l-6 6a2 2 0 0 0 0 2.8l5 5L7 18c.2-.2.4-.3.7-.3l.5.1 1-1A7.4 7.4 0 0 1 8 10.6 7.5 7.5 0 0 1 20.7 7a7.5 7.5 0 0 1-5.5 12.6c-1.6 0-3.2-.6-4.4-1.5l-1 1a1 1 0 0 1-.2 1.1L8 21.7a12 12 0 0 0 15.6-1.2l6-6a2 2 0 0 0 0-2.9Z"></path>
<path fill="#C84A04" d="M20.5 10a5.7 5.7 0 0 0-5.2-3.6 5.7 5.7 0 0 0-2.2 11c.7.3 1.5.4 2.2.4a5.7 5.7 0 0 0 5.2-7.9Zm-1.9 3a.7.7 0 0 1-.5.6H18c-.2 0-.4 0-.5-.2a.7.7 0 0 1-.1-.5V12a3.2 3.2 0 0 0-2-2.7h-.1a.7.7 0 0 1-.4-.5.6.6 0 0 1 .2-.5.7.7 0 0 1 .5-.2h.4l.1.1.9.5c.8.6 1.3 1.5 1.6 2.4.2.7.2 1.3.1 2Z"></path>
</g>
</svg>
{% else %}
<img decoding="async" referrerpolicy="no-referrer" src="{{ logo }}" class="c-subheader__logo">
{% endif %}
</a>
{% 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-flex {% if not modifier %} u-column u-row@md {% else %} u-row u-items-center {% endif %} {% if avatar %}u-items-center{% endif %} u-my-base">
<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">
{% for nav in navigation %}
<a href="#" class="c-subheader__item {% if nav.status=='active' %}c-subheader__item--active{% endif %} u-nav-02 u-mr-small u-cursor-pointer u-nowrap u-no-underline u-relative">
{{ nav.item }}
</a>
{% endfor %}
</nav>
{% endif %}
{% if cta %}
<div class="u-ml-auto u-px-xlarge">
{% render "@button--approfondimento",{label:'Abbonati', size: 'small'},true %}
</div>
{% 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 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://www.previewtoday.it/~shared/images/v7/channel-custom/best-channel-logo.svg?v=2",
"title": "Cronaca",
"modifier": "large",
"channetitle": "Moda e bellezza",
"channel": "/best/",
"logo": false,
"navigation": [
{
"item": "Bambini"
},
{
"item": "Casa"
},
{
"item": "Cibo"
},
{
"item": "Regali e News",
"list": [
{
"item": "Birra"
},
{
"item": "Cioccolata"
},
{
"item": "Dolci"
},
{
"item": "Liquori"
},
{
"item": "Street food"
},
{
"item": "Vino"
}
]
},
{
"item": "Libri"
},
{
"item": "Moda e bellezza",
"status": "active"
},
{
"item": "Sconti e Offerte"
},
{
"item": "Sport"
},
{
"item": "Tecnologia",
"list": [
{
"item": "Birra"
},
{
"item": "Cioccolata"
},
{
"item": "Dolci"
},
{
"item": "Liquori"
},
{
"item": "Street food"
},
{
"item": "Vino"
}
]
},
{
"item": "Viaggi"
}
]
}
// Name: Subheader
// Description: Subheader of website
//
// Component: `c-subheader`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/colors.mode`
// `settings/v7/spacing.tokens`
//
// ========================================================================
// Variables
// ========================================================================
$subheader-nav-line-height: 4px;
$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});
@each $category, $name in $categories {
@if ($category!="notizie"){
[data-theme="today"][data-channel*="#{$category}"] & {
--subheader-border: #{color($categories, $category, base)};
--subheader-background: #{color($categories, $category, lighter)};
--subheader-text: #{color($categories, $category, darker)};
--subheader-text-hover: #{color($categories, $category, base)};
}
@media (prefers-color-scheme: dark) {
[data-theme="today"][data-channel*="#{$category}"]:not([data-color-scheme*="light"]) & {
--subheader-background: #{rgba(color($categories, $category, darker), .25)};
--subheader-text: #{$inverse-01};
--subheader-border: #{color($categories, $category, darker)};
}
}
[data-color-scheme*="dark"][data-theme="today"][data-channel*="#{$category}"] & {
--subheader-background: #{rgba(color($categories, $category, darker), .25)};
--subheader-text: #{$inverse-01};
--subheader-border: #{color($categories, $category, darker)};
}
}
}
// ======================================================================
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--subheader-border);
background-color: var(--subheader-background, --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;
&::after {
position: absolute;
right: 0;
bottom: -5px;
content: '';
width: 100%;
height: 1px;
background-color: var(--subheader-border);
[data-channel*="dossier"] & {
display: none;
}
}
// Hide ::after border when modifier is branded
&.c-subheader--branded::after{
display: none;
}
//
// Subheader List
//
&__list {
position: relative;
display: none;
width: 100%;
margin-top: $margin-xxsmall;
margin-left: 0;
padding-left: 0;
@include bp(lg) {
position: absolute;
left: 0;
width: auto;
min-width: 100%;
margin-top: 0;
}
[data-subheader-item]:focus &,
[data-subheader-item]:hover & {
top: 100%;
display: flex;
background-color: var(--subheader-background-active, var(--background-color));
}
}
//
// Subheader Main List
//
&__main-list {
margin-right: -$padding-small;
margin-left: -$padding-small;
@include bp(lg) {
margin: 0;
}
}
//
// Subheader Title
//
&__title {
color: var(--subheader-title);
}
//
// Subheader Navbar
//
&__navbar {
margin-right: -$margin-small;
margin-left: -$margin-small;
padding-top: var(--subheader-navbar-spacing);
.c-subheader__head ~ & {
// Remove padding top when adiacent to subheader head
--subheader-navbar-spacing: 0;
// Restore padding top on medium devices
@include bp(md) {
--subheader-navbar-spacing: #{$subheader-custom-spacing};
margin-left: $margin-large;
}
}
// 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;
}
}
}
//
// Subheader Item
//
&__item {
@include z(cover);
padding-top: var(--subheader-item-spacing);
padding-bottom: var(--subheader-item-spacing );
color: var(--subheader-text);
&:first-child {
margin-left: $margin-small;
}
&: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: $brevier;
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: #{$approfondimento-gray-light};
--subheader-title: #{$approfondimento-gray-darker};
}
@media (prefers-color-scheme: dark) {
body[data-channel*="dossier"]:not([data-color-scheme*="light"]) & {
--subheader-background: #{$approfondimento-gray-darker};
--subheader-text-hover: #{$inverse-01};
--subheader-title: #{$inverse-01};
}
}
[data-color-scheme*="dark"][data-channel*="dossier"] & {
--subheader-background: #{$approfondimento-gray-darker};
--subheader-text-hover: #{$inverse-01};
--subheader-title: #{$inverse-01};
}
.c-btn {
position: absolute;
right: $padding-base;
top: 1.2rem;
@include bp(lg){
position: relative;
top: auto;
right: auto;
}
}
}
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 subheaer template use following syntax:
{% render "@subheader" %}