Wellcome Web Components

Header: Home Page 

<div class="header-wrapper homepage">
    <div id="header" class="site-header wt-grid-main">
        <div class="site-header__contents">
            <a class="site-header__logo wt-grid-left" href="/">
                <div class="site-header__logo__wrapper">
                    <img class="site-header__logo__wellcome--white png-to-svg" src="../../assets/images/new-logos/wellcome-logo--white.png" alt="Wellcome">
                    <img class="site-header__logo__w--white" src="../../assets/images/new-logos/wellcome-logo-w--white.svg" alt="Wellcome">
                    <img class="site-header__logo__mobile--white" src="../../assets/images/new-logos/wellcome-logo-mobile--white.svg" alt="Wellcome">
                </div>
            </a>
            <div class="nav-links">
                <a class="site-navigation-link" href="#site-navigation">menu</a>
                <a class="site-navigation-link" href="#site-search">search</a>
            </div>
            <div class="nav-large">
                <div class="nav site-nav" role="navigation">
                </div>
            </div>
            <div class="search-enhanced wt-grid-right">
                <div class="site-search site-search--header">
                    <label id="site-search__label" class="site-search__heading">Search</label>
                </div>
            </div>
        </div>
        <div class="nav-small">
            <div class="nav site-nav" role="navigation">
                <a class="nav-small__overlay collapsible__switch--additional" aria-label="Close menu"></a>
            </div>
        </div>
    </div>
    <div class="nav-large wt-grid-full"></div>
</div>
  • Content: 
    /* stylelint-disable declaration-no-important */

.header-wrapper {
  background: $white;
  top: 0;
  transform: none;
  transition: transform $stickyHeadingTransLength;
  width: 100%;
  z-index: 4;

  .enhanced & {
    position: fixed;

    + .wt-grid-main,
    + .wrapper--full,
    + iframe + .wt-grid-main,
    + iframe + .wrapper--full {
      margin-top: $headerHeightSticky + $secondaryNavHeight !important;

      @include respond-to($grid-breakpoint-s) {
        margin-top: $headerHeightNormal + $secondaryNavHeight !important;
      }
    }

    + .wt-grid-full,
    + iframe + .wt-grid-full {
      padding-top: $headerHeightSticky + $grid-typo-spacing-xxs !important;

      @include respond-to($grid-breakpoint-s) {
        padding-top: $headerHeightNormal + $grid-typo-spacing-xxs !important;
      }
    }

    + .main {
      padding-top: $header-height-s;
      width: 100%;

      @include respond-to($grid-breakpoint-s) {
        padding-top: $header-height-l;
      }
    }

    + .wt-grid-main-top {
      margin-top: 0;
    }

    &.homepage {
      background: transparent;
      padding-bottom: $grid-typo-spacing-xl;
      position: absolute;
      z-index: auto;

      &:before {
        @include gradientBackgroundWithOffset(100%);
        @include rem(padding-bottom, $grid-typo-spacing-xl);

        content: '';
        height: $headerHeightNormal;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
      }
    }

    @media print {
      position: static;
    }
  }

  @include respond-to($grid-breakpoint-s) {
    &.sticky {
      transform: translateY(-1 * $secondaryNavStickyOffset);
    }

    .enhanced .no-subnav &.sticky {
      transform: translateY(-1 * $secondaryNavStickyOffset - $grid-typo-spacing-xxs);
    }
  }

  @include respond-to($grid-breakpoint-s) {
    + .wt-grid-main,
    + .wrapper--full,
    + iframe + .wt-grid-main,
    + iframe + .wrapper--full {
      padding-top: $grid-typo-spacing-xl;
    }

    .no-subnav & + iframe + .wt-grid-main,
    .no-subnav & + iframe + .wrapper--full,
    .no-subnav & + iframe + .wt-grid-main,
    .no-subnav & + iframe + .wrapper--full {
      padding-top: $grid-typo-spacing-xl - $secondaryNavStickyOffset * 2;
    }

    + .wt-grid-main-top {
      padding-top: 0;
    }
  }
}

.site-header {
  border-bottom: $grid-typo-spacing-xxs solid $navBackgroundColour;
  outline: none;
  overflow: hidden;
  position: relative;

  &.menu-open {
    border: 0;
    height: auto;
    overflow: visible;
  }

  .enhanced .homepage & {
    background: transparent;
    border-bottom: 0;
    overflow: visible;
    z-index: 3;
  }

  @include respond-to($grid-breakpoint-s) {
    border-bottom: 0;
  }

  @media print {
    border-bottom: 0;
    margin: 0 0 0 $grid-content-padding;
    padding-top: 0;
  }
}

.site-header__contents {
  display: flex;
}

// need to subtract 1 from the breakpoint, as we want it to fall back to the grid styling rather than reapply it here
@media all and (max-width: $grid-breakpoint-ml - 1) {
  .site-header {
    width: 100%;
  }

  .header-wrapper > .nav-large .secondary-nav {
    width: 100%;
  }
}

.nav-links {
  text-align: center;
  // anchor links to search and menu for non javascript version
  @include respond-to($grid-breakpoint-s) {
    float: right;
  }

  .enhanced & {
    display: none;
  }
}
  • URL: /components/raw/header/_site-header.scss
  • Filesystem Path: ../../modules/custom/corp_markup/theme/sitewide/header.tpl.php/_site-header.scss
  • Size: 3.4 KB

Description

The sitewide header.

Content notes

UX notes

Design notes

Back-end notes

Front-end notes

{
  "logo": "\n<div class=\"site-header__logo__wrapper\">\n  <img class=\"site-header__logo__wellcome--white png-to-svg\" src=\"{{ path /assets/images/new-logos/wellcome-logo--white.png }}\" alt=\"Wellcome\">\n  <img class=\"site-header__logo__w--white\" src=\"{{ path /assets/images/new-logos/wellcome-logo-w--white.svg }}\" alt=\"Wellcome\">\n  <img class=\"site-header__logo__mobile--white\" src=\"{{ path /assets/images/new-logos/wellcome-logo-mobile--white.svg }}\" alt=\"Wellcome\">\n</div>\n",
  "search": null,
  "is_homepage": true,
  "navigation": null,
  "hamburger": null,
  "secondary_navigation": null
}