Page Header

The header component for this site has optional links to display. The links are shown on the homepage template.

This component should be present on every template.

Page Header (without links)

<!-- start `page-header` component;-->
<header class="page-header">
  <div class="page-header__banner">
    <div class="page-header__logo"><img src="../images/page-header/acme__logo.png" alt="ACME Logo" /></div>
  </div>
</header>
<!-- end `page-header` component; -->

{
  "logo": {
    "img": "../images/page-header/acme__logo.png",
    "alt": "ACME Logo"
  }
}

.page-header {
  background: $color__backgroundDark;
  padding: size(1) 0 0;

  &__logo {
    padding: 0 0 size(1);

    img {
      display: block;
      margin: 0 auto;
      width: auto;
      min-height: size(2);
    }
  }

  &__tabs {
    text-align: center;

    a {
      color: $color__textLight;
      padding: size(0.5);
      text-decoration: none;
      transition: color $duration__color;

      &:first-child {
        text-decoration: underline;
      }

      &:hover,
      &:focus {
        color: $color__highlightDark;
        text-decoration: underline;
      }
    }
  }
}

Page Header (with links)

<!-- start `page-header` component;-->
<header class="page-header">
  <div class="page-header__banner">
    <div class="page-header__logo"><img src="../images/page-header/acme__logo.png" alt="ACME Logo" /></div>
    <nav class="page-header__tabs d-none d-sm-block"><a href="#">Home</a> <a href="#">News</a> <a href="#">Sports</a> <a href="#">Business</a> <a href="#">Real Estate</a> 
    </nav>
  </div>
</header>
<!-- end `page-header` component; -->

{
  "logo": {
    "img": "../images/page-header/acme__logo.png",
    "alt": "ACME Logo"
  },
  "links": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "News",
      "url": "#"
    },
    {
      "title": "Sports",
      "url": "#"
    },
    {
      "title": "Business",
      "url": "#"
    },
    {
      "title": "Real Estate",
      "url": "#"
    }
  ]
}

.page-header {
  background: $color__backgroundDark;
  padding: size(1) 0 0;

  &__logo {
    padding: 0 0 size(1);

    img {
      display: block;
      margin: 0 auto;
      width: auto;
      min-height: size(2);
    }
  }

  &__tabs {
    text-align: center;

    a {
      color: $color__textLight;
      padding: size(0.5);
      text-decoration: none;
      transition: color $duration__color;

      &:first-child {
        text-decoration: underline;
      }

      &:hover,
      &:focus {
        color: $color__highlightDark;
        text-decoration: underline;
      }
    }
  }
}