<div class="c-subheader u-relative">
<div class="o-container u-flex u-column u-row@md u-items-center@md ">
<div class="c-subheader__head u-flex u-column u-row@md u-my-base">
<h1 class="u-title-01 u-m-none">
<a href="#" class="u-no-underline c-subheader__title ">
Attualità
</a>
</h1>
</div>
<nav class="c-subheader__navbar u-flex u-items-center u-overflow-auto">
<a href="#" class="c-subheader__item c-subheader__item--active u-nav-02 u-mr-small u-cursor-pointer u-nowrap u-no-underline u-relative">
Cronaca nera
</a>
<a href="#" class="c-subheader__item u-nav-02 u-mr-small u-cursor-pointer u-nowrap u-no-underline u-relative">
Incidenti
</a>
<a href="#" class="c-subheader__item u-nav-02 u-mr-small u-cursor-pointer u-nowrap 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-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://via.placeholder.com/56",
"title": "Attualità",
"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`
//
// ========================================================================
// 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" %}