Header: Minimal

300 × 150
<header class="c-header c-header--minimal ">

    <div class="c-header__inner">
        <div class="c-header__toolbar">
            <div class='c-toolbar c-toolbar--clean'>
                <div class='c-toolbar__inner'>
                    <div class='c-toolbar__left'>
                        <a href="/components/preview/page-home-travel--default" class='c-toolbar__logo'>
                            <img src="../../images/svgs/logo-adb.svg" class="c-logo" alt="Homepage aeroporto di Bologna">
                        </a>
                        <a href="/components/preview/page-home-travel--default" class="c-toolbar__logo c-toolbar__logo--innovability">
                            <img src="../../images/svgs/logo-innovability.svg" class="c-logo c-logo--innovability" alt="Homepage aeroporto di Bologna">
                        </a>
                    </div>

                    <div class='c-toolbar__center' aria-hidden='true'>
                    </div>

                    <div class='c-toolbar__right'>
                    </div>
                </div>
            </div>

        </div>

    </div>

</header>
<div class='c-overlay'></div>
<header class="c-header c-header--minimal {{modifier}}">

  <div class="c-header__inner">
    <div class="c-header__toolbar">
      {{render "@toolbar--clean"}}
    </div>

    {{#> @partial-block  }}
    {{/ @partial-block }}
  </div>

</header>
<div class='c-overlay'></div>
{
  "name": "default",
  "dropdown-toolbar": {
    "site-areas": {
      "areas": [
        {
          "text": "Viaggiare",
          "class": "is-active",
          "link": "/components/preview/page-home-travel--default"
        },
        {
          "text": "Società",
          "link": "/components/preview/page-society-home"
        },
        {
          "text": "Investor relations",
          "link": "/components/preview/page-investor-home"
        },
        {
          "text": "Innovability",
          "link": "/components/preview/page-innovability-home"
        }
      ],
      "work-with-us": true
    },
    "dropdown-orientation": {
      "main-language": {
        "text": "ita",
        "url": "#",
        "aria-label": "Italiano"
      },
      "sub-languages": [
        {
          "text": "eng",
          "url": "#",
          "aria-label": "Inglese"
        },
        {
          "text": "zh",
          "url": "#",
          "aria-label": "Cinese"
        }
      ]
    }
  },
  "slim-alert": {
    "items": [
      {
        "anchor-text": false,
        "text": "<a href=\"#\">Lavori infrastrutturali</a>"
      }
    ]
  }
}
  • Content:
    $header-bg: secondary(soft, 100);
    
    .c-header {
      position: relative;
      background-color: $header-bg;
      z-index: $zIndex-header;
      @include shadow(medium);
    }
    
    .c-header__switch:has(input[type="checkbox"]:focus) {
      @include outline;
    }
    
    .c-header__shortcuts+.c-header__switch {
      position: absolute;
      z-index: $zIndex-hamburgerMenu;
      right: remify(8px);
      bottom: remify(-36px);
    
      @include min-screen(bp(tablet-p)) {
        position: absolute;
        overflow: hidden;
        clip: rect(0 0 0 0);
        height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
      }
    
      .c-header--chinese & {
        right: remify(8px);
        top: remify(8px);
    
        @include min-screen(bp(tablet-p)) {
          right: remify(16px);
          top: remify(24px);
        }
      }
    }
    
    .c-header__primary-navigation {
      position: relative;
    }
    
    /*------------------------------------*\
      Modifier c-header--host
    \*------------------------------------*/
    
    .c-header--host {
      @include min-screen(bp(tablet-p)) {
        // padding-bottom: remify(100px);
      }
    }
    
    /*------------------------------------*\
      Modifier c-header--stepbar
    \*------------------------------------*/
    
    // .c-header--progress {
    //   padding-bottom: remify(8px);
    // }
    
    /*------------------------------------*\
      Modifier c-header--withSub
    \*------------------------------------*/
    
    .c-header--withSub {
      .c-header__shortcuts+.c-header__switch {
        bottom: remify(-92px);
      }
    }
    
    /*------------------------------------*\
      Emergency modifier
    \*------------------------------------*/
    
    .c-header--emergency {
      background-color: primary(emergency, 120);
      color: #fff;
    
      a {
        color: #fff;
      }
    
      & .c-toolbar a,
      & .c-orientation a,
      & .c-orientation__utilities,
      & .c-orientation__utilities a,
      .c-navigation-shortcuts a {
        color: #fff;
      }
    }
    
    /*------------------------------------*
      Modifier: c-header--minimal
    *------------------------------------*/
    .c-header--minimal {
    
      .c-header__inner:has(.c-header__toolbar + *) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: remify($base-page-width);
        margin-inline: auto;
      } 
    
    }
    
    /*------------------------------------*\
      overlay
    \*------------------------------------*/
    
    .c-overlay {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, .5);
      z-index: $z-Index-overlay;
      display: none;
    
      &.is-visible {
        display: block;
      }
      
    }
    
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: src/views/03-organisms/header/_header.scss
  • Size: 2.4 KB

No notes defined.