Maui Jim Style Guide

Secondary: Logo 

<div class="secondary-hero">
    <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-logo-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-logo-small.jpg 432w, /assets/images/hero-logo-large.jpg 1420w">
    <div class="secondary-hero__copy">
        <img class="secondary-hero__logo" src="/assets/images/mauijim-brand-logo-large-white.png" alt="Maui Jim">
    </div>
</div>
 
<div class="secondary-hero">
  {{#if image}}
  <img class="secondary-hero__image u-object-fit-cover" src="{{image.large.src}}" sizes="(min-width: 1420px) 1420px, {{vw}}vw"
    srcset="{{image.small.src}} {{image.small.width}}w, {{image.large.src}} {{image.large.width}}w">
  {{/if}}
  <div class="secondary-hero__copy">
    {{#if logo}}
    <img class="secondary-hero__logo" src="{{logo.src}}" alt="{{logo.alt}}">
    {{/if}}
    {{#if titleImage}}
    <img class="secondary-hero__title-image" src="{{titleImage.src}}" alt="{{titleImage.alt}}">
    {{/if}}
    {{#if pretitle}}
    <p class="secondary-hero__pretitle">{{pretitle}}</p>
    {{/if}}
    {{#if title}}
    <h1 class="secondary-hero__title">{{title}}</h1>
    {{/if}}
    {{#if subtitle}}
    <h2 class="secondary-hero__subtitle">{{subtitle}}</h2>
    {{/if}}
    {{#if description}}
    <p class="secondary-hero__description secondary-hero__description--short">{{description.short}}</p>
    <p class="secondary-hero__description secondary-hero__description--full">{{description.full}}</p>
    {{/if}}
    {{#each callsToAction}}
    {{render (dynamicVariant 'buttons' modifier) this}}
    {{/each}}
  </div>
</div>
 
{
  "logo": {
    "src": "/assets/images/mauijim-brand-logo-large-white.png",
    "alt": "Maui Jim"
  },
  "image": {
    "small": {
      "src": "/assets/images/hero-logo-small.jpg",
      "width": "432"
    },
    "large": {
      "src": "/assets/images/hero-logo-large.jpg",
      "width": "1420"
    },
    "vw": "100"
  }
}
  • Content: 
    .secondary-hero {
  position: relative;

  &:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: $color-black;
    content: '';
    opacity: .3;
    z-index: 1;
  }

  @include breakpoint($page-width-max) {
    // Heros within the restricted main container should have gutters at this
    // width to align with all other content.
    .u-page-width-max & {
      margin: 0 $gutter-width-half;
    }
  }
}

.secondary-hero,
.secondary-hero__image {
  @include breakpoint($breakpoint-sm-only) {
    min-height: 300px;
  }
}

.secondary-hero__copy {
  position: absolute;
  top: 50%;
  right: 20px;
  left: 20px;
  transform: translateY(-50%);
  text-align: center;
  z-index: 2;
}

.secondary-hero__logo {
  max-width: 50%;
  margin: 0 auto;

  @include breakpoint($breakpoint-md) {
    max-width: 25%;
  }
}

.secondary-hero__title-image {
  max-width: 62.5%;
  margin: 20px auto;
}

.secondary-hero__pretitle,
.secondary-hero__title,
.secondary-hero__subtitle,
.secondary-hero__description {
  margin: 0;
  color: $color-white;
  font-weight: $font-weight-normal;
  letter-spacing: 1px;
  text-shadow: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

.secondary-hero__pretitle {
  margin-bottom: 5px;
  font-size: 1.6rem;
  line-height: 1.9rem;

  @include breakpoint($breakpoint-md) {
    margin-bottom: 10px;
  }

  @include breakpoint($breakpoint-xl) {
    font-size: 2.4rem;
    line-height: 2.8rem;
  }
}

.secondary-hero__title {
  font-size: 2.4rem;
  line-height: 2.8rem;

  @include breakpoint($breakpoint-md) {
    font-size: 3.8rem;
    line-height: 4.6rem;
  }

  @include breakpoint($breakpoint-xl) {
    font-size: 5.7rem;
    line-height: 6.8rem;
  }
}

.secondary-hero__subtitle,
.secondary-hero__description {
  margin-top: 5px;
  font-size: 1.6rem;
  line-height: 1.9rem;

  @include breakpoint($breakpoint-md) {
    margin-top: 10px;
  }

  @include breakpoint($breakpoint-xl) {
    font-size: 2.4rem;
    line-height: 2.8rem;
  }
}

.secondary-hero__subtitle {
  @include breakpoint($breakpoint-md) {
    margin-right: 30px;
    margin-left: 30px;
  }

  @include breakpoint($breakpoint-xl) {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
  }
}

.secondary-hero__description {
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
}

.secondary-hero__description--short {
  @include breakpoint($breakpoint-md) {
    display: none;
  }
}

.secondary-hero__description--full {
  font-weight: $font-weight-bold;

  @include breakpoint($breakpoint-sm-only) {
    display: none;
  }
}

.secondary-hero__call-to-action {
  margin: 10px 5px 0;
  line-height: 3.0rem;
  box-sizing: border-box;

  &:hover {
    color: $color-white;
  }

  &.button--outlined {
    border-color: $color-white;
    color: $color-white;
  }

  @include breakpoint($breakpoint-sm-only) {
    &.button--outlined {
      line-height: 2.8rem;
    }
  }

  @include breakpoint($breakpoint-md) {
    margin: 10px 10px 0;
    line-height: 5.0rem;

    &.button--outlined {
      line-height: 4.8rem;
    }
  }

  @include breakpoint($breakpoint-xl) {
    margin-top: 30px;
  }
}
  • URL: /components/raw/secondary-hero/secondary-hero.scss
  • Filesystem Path: src/components/02-components/hero/secondary-hero/secondary-hero.scss
  • Size: 3.2 KB

There are no notes for this item.