OCDE - Pattern Library v1.13.0

Header: Map (Example) 

<div class="header header-map">
    <a class="backlink" href="#" aria-label="back to homepage">
        <div class="backlink-x-icon">
            <svg aria-hidden="true">
                <use xlink:href="#icon-arrowleft"></use>
            </svg>
        </div>
    </a>
    <div class="header-x-text">
        <h2 class="header-x-title">Hospitality, Tourism, and Recreation</h2>
    </div>
</div>
 
<div class="header header-map">
  <a class="backlink" href="#" aria-label="back to homepage">
    <div class="backlink-x-icon">
      <svg aria-hidden="true">
        <use xlink:href="#icon-arrowleft"></use>
      </svg>
    </div>
  </a>
  <div class="header-x-text">
    <h2 class="header-x-title">Hospitality, Tourism, and Recreation</h2>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .header {
  background-color: $color-light1;
  display: flex;
  align-items: center;
  height: $header-height;
  // Needed for overflow-x: hidden causes overflow-y: auto issue.
  position: relative;
  z-index: 1;

  svg {
    fill: $color-interactive1;
    display: block;
    height: 48px;
    width: 146px;
  }

  .iconlink-x-icon {
    flex-shrink: 0;
  }

  @media print {
    display: none;
  }
}

.header-map {
  display: flex;
  align-items: center;
  padding: $gridspacing * 2;
  height: auto;

  .header-x-title {
    @include textstyle-h1;
  }

  .header-x-text {
    @include textstyle-bodylarge;
    padding-left: 32px;
  }

  @media (min-width: $media-tablet) {
    padding-left: $gridspacing * 5;
    padding-right: $gridspacing * 5;
  }

  @media (min-width: $media-hd) {
    .header-x-title {
      font-size: 48px;
      line-height: 48px;
    }
  }
}
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: src/scss/02-modules/header/_header.scss
  • Size: 869 Bytes

No notes defined.