GDL - Global Design Language

Subheader 

<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-py-small u-flex  u-column u-row@md  ">
            <h1 class="u-title-01 u-m-none">
                <a href="#" class="u-no-underline c-subheader__title ">
                    Cronaca
                </a>
            </h1>
        </div>

    </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": "Cronaca"
}
  • Content: 
    // 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};
    }
  }
  
}
  • URL: /components/raw/subheader/subheader.scss
  • Filesystem Path: src/lib/components/subheader/subheader.scss
  • Size: 9.8 KB

Subheader

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.

Variations

Possible layout variations:

  • Default - only channel name is present
  • Navbar - there is the name of the channel and its navigation bar
  • Custom - there is the name of the channel, any avatar (in the case of a blog section), the navigation bar and a colored background based on the section it belongs to (eg Gossip)
  • Topic and People - there is the name of the channel, the optional navigation bar and any image (People), a label that points to the section it belongs to and a specific link that refers to the section indicated by the label.

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

Usage

Render subheader

In order to display a default subheader template use following syntax:

  {% render "@subheader" %}