Banner

A banner consists of a large image or video with content sitting on top of it.

Must contain an image field and either:

  • Title and/or
  • Body
  • Link

Banner: Small, content centered w/ black background pattern

Component Preview
<div class="banner  banner--small bg-pattern--brain-black banner--vertical-center banner--horizontal-center">

            <div class="banner__container">
                <div class="banner__content">

                    <h2 class="headline bold-headline--serif bold-headline bold-headline--highlight">
                        <a href="https://uiowa.edu/" aria-describedby="desc-a-card">
                            <span class="headline__text">We’re in this together</span>
                        </a>
                    </h2>

                    <div class="banner__text">
                        <p>A member of the Association of American Universities since 1909 and the Big Ten Conference<br /> since 1899, the University of Iowa is home to one of the most acclaimed academic medical centers<br /> in the country, as well as globally recognized leadership in the study and craft of writing.</p>
                    </div>

                    <div class="banner__action">
                        <div aria-hidden="true" class="bttn bttn--secondary bttn--caps" id="desc-a-card">
                            View Story
                            <i class="fas fa-arrow-right"></i>
                        </div>
                    </div>

                </div>
            </div>

        </div>
  • Content:
    .banner {
      min-height: 15rem; }
      .banner--large::before {
        float: left;
        padding-top: 45.25%;
        content: ''; }
      .banner--medium::before {
        float: left;
        padding-top: 32.25%;
        content: ''; }
      .banner--small::before {
        float: left;
        padding-top: 17.75%;
        content: ''; }
      @media (min-width: 84.375em) {
        .banner--full.banner--large {
          height: 100vh; } }
      .banner::after {
        display: block;
        content: '';
        clear: both; }
      .banner.bg-pattern--brain-reversed .bttn--primary, .banner[class*="bg--gold"] .bttn--primary {
        color: #fff;
        background: #151515;
        border: 1px solid #151515; }
        .banner.bg-pattern--brain-reversed .bttn--primary svg, .banner[class*="bg--gold"] .bttn--primary svg {
          color: #FFCD00; }
    
    .banner {
      position: relative;
      overflow: hidden;
      flex-basis: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
      .banner.banner--vertical-bottom {
        align-items: flex-end; }
      .banner:focus-within .bold-headline a:focus {
        text-decoration: underline; }
      .banner__container {
        margin: 0 auto;
        width: 100%;
        z-index: 1; }
        @media (min-width: 768px) {
          .banner__container {
            z-index: 1;
            max-width: 81.875em;
            top: 0; } }
      .banner .media--video .video-controls {
        z-index: 2; }
      .banner img {
        width: 100%; }
      .banner__image {
        overflow: visible; }
        .banner__image img {
          display: block;
          width: 100%;
          -o-object-fit: cover;
          object-fit: cover;
          position: absolute;
          height: 100%;
          top: 0; }
      .banner .headline + .banner__action {
        margin-top: 1rem; }
      .banner .banner__action .bttn {
        margin: 0 1rem 1rem 0; }
        @media (min-width: 768px) {
          .banner .banner__action .bttn + .bttn {
            margin: 0 1rem 1rem 0; } }
      .banner .media--video {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0; }
        .banner .media--video video {
          overflow: visible;
          display: block;
          width: 100%;
          -o-object-fit: cover;
          object-fit: cover;
          position: absolute;
          height: 100%;
          top: 0; }
      .banner__text {
        z-index: 1; }
      .banner__content {
        padding: 1.25rem; }
        @media (min-width: 768px) {
          .banner__content {
            padding: 1.25rem 0 2rem 0; } }
        .banner__content > * {
          flex-basis: 100%; }
        .banner__content .bttn {
          margin-right: auto;
          margin-left: 0;
          z-index: 1; }
        @media (min-width: 84.375em) {
          .banner__content {
            padding: 1.25rem 0; } }
      .banner h2:not([class*="bold-headline"]),
      .banner h3:not([class*="bold-headline"]),
      .banner h4:not([class*="bold-headline"]),
      .banner h5:not([class*="bold-headline"]),
      .banner h6:not([class*="bold-headline"]),
      .banner blockquote {
        color: #fff; }
        .banner h2:not([class*="bold-headline"]) a,
        .banner h3:not([class*="bold-headline"]) a,
        .banner h4:not([class*="bold-headline"]) a,
        .banner h5:not([class*="bold-headline"]) a,
        .banner h6:not([class*="bold-headline"]) a,
        .banner blockquote a {
          color: #fff; }
      .banner p {
        line-height: 1.5;
        margin-top: 0;
        color: #fff;
        text-shadow: 0 1px 1px #000; }
        .banner p a {
          position: relative;
          z-index: 1;
          color: #fff; }
      .banner.bg-pattern--brain, .banner.bg-pattern--brain-reversed, .banner[class*="bg--gold"], .banner[class*="bg--white"], .banner[class*="bg--gray"] {
        color: #151515; }
        .banner.bg-pattern--brain p, .banner.bg-pattern--brain-reversed p, .banner[class*="bg--gold"] p, .banner[class*="bg--white"] p, .banner[class*="bg--gray"] p {
          color: #151515;
          font-weight: normal;
          text-shadow: none; }
          .banner.bg-pattern--brain p a, .banner.bg-pattern--brain-reversed p a, .banner[class*="bg--gold"] p a, .banner[class*="bg--white"] p a, .banner[class*="bg--gray"] p a {
            color: #151515; }
        .banner.bg-pattern--brain h2:not([class*="bold-headline"]),
        .banner.bg-pattern--brain h3:not([class*="bold-headline"]),
        .banner.bg-pattern--brain h4:not([class*="bold-headline"]),
        .banner.bg-pattern--brain h5:not([class*="bold-headline"]),
        .banner.bg-pattern--brain h6:not([class*="bold-headline"]),
        .banner.bg-pattern--brain blockquote, .banner.bg-pattern--brain-reversed h2:not([class*="bold-headline"]),
        .banner.bg-pattern--brain-reversed h3:not([class*="bold-headline"]),
        .banner.bg-pattern--brain-reversed h4:not([class*="bold-headline"]),
        .banner.bg-pattern--brain-reversed h5:not([class*="bold-headline"]),
        .banner.bg-pattern--brain-reversed h6:not([class*="bold-headline"]),
        .banner.bg-pattern--brain-reversed blockquote, .banner[class*="bg--gold"] h2:not([class*="bold-headline"]),
        .banner[class*="bg--gold"] h3:not([class*="bold-headline"]),
        .banner[class*="bg--gold"] h4:not([class*="bold-headline"]),
        .banner[class*="bg--gold"] h5:not([class*="bold-headline"]),
        .banner[class*="bg--gold"] h6:not([class*="bold-headline"]),
        .banner[class*="bg--gold"] blockquote, .banner[class*="bg--white"] h2:not([class*="bold-headline"]),
        .banner[class*="bg--white"] h3:not([class*="bold-headline"]),
        .banner[class*="bg--white"] h4:not([class*="bold-headline"]),
        .banner[class*="bg--white"] h5:not([class*="bold-headline"]),
        .banner[class*="bg--white"] h6:not([class*="bold-headline"]),
        .banner[class*="bg--white"] blockquote, .banner[class*="bg--gray"] h2:not([class*="bold-headline"]),
        .banner[class*="bg--gray"] h3:not([class*="bold-headline"]),
        .banner[class*="bg--gray"] h4:not([class*="bold-headline"]),
        .banner[class*="bg--gray"] h5:not([class*="bold-headline"]),
        .banner[class*="bg--gray"] h6:not([class*="bold-headline"]),
        .banner[class*="bg--gray"] blockquote {
          color: #151515; }
          .banner.bg-pattern--brain h2:not([class*="bold-headline"]) a,
          .banner.bg-pattern--brain h3:not([class*="bold-headline"]) a,
          .banner.bg-pattern--brain h4:not([class*="bold-headline"]) a,
          .banner.bg-pattern--brain h5:not([class*="bold-headline"]) a,
          .banner.bg-pattern--brain h6:not([class*="bold-headline"]) a,
          .banner.bg-pattern--brain blockquote a, .banner.bg-pattern--brain-reversed h2:not([class*="bold-headline"]) a,
          .banner.bg-pattern--brain-reversed h3:not([class*="bold-headline"]) a,
          .banner.bg-pattern--brain-reversed h4:not([class*="bold-headline"]) a,
          .banner.bg-pattern--brain-reversed h5:not([class*="bold-headline"]) a,
          .banner.bg-pattern--brain-reversed h6:not([class*="bold-headline"]) a,
          .banner.bg-pattern--brain-reversed blockquote a, .banner[class*="bg--gold"] h2:not([class*="bold-headline"]) a,
          .banner[class*="bg--gold"] h3:not([class*="bold-headline"]) a,
          .banner[class*="bg--gold"] h4:not([class*="bold-headline"]) a,
          .banner[class*="bg--gold"] h5:not([class*="bold-headline"]) a,
          .banner[class*="bg--gold"] h6:not([class*="bold-headline"]) a,
          .banner[class*="bg--gold"] blockquote a, .banner[class*="bg--white"] h2:not([class*="bold-headline"]) a,
          .banner[class*="bg--white"] h3:not([class*="bold-headline"]) a,
          .banner[class*="bg--white"] h4:not([class*="bold-headline"]) a,
          .banner[class*="bg--white"] h5:not([class*="bold-headline"]) a,
          .banner[class*="bg--white"] h6:not([class*="bold-headline"]) a,
          .banner[class*="bg--white"] blockquote a, .banner[class*="bg--gray"] h2:not([class*="bold-headline"]) a,
          .banner[class*="bg--gray"] h3:not([class*="bold-headline"]) a,
          .banner[class*="bg--gray"] h4:not([class*="bold-headline"]) a,
          .banner[class*="bg--gray"] h5:not([class*="bold-headline"]) a,
          .banner[class*="bg--gray"] h6:not([class*="bold-headline"]) a,
          .banner[class*="bg--gray"] blockquote a {
            color: #151515; }
        .banner.bg-pattern--brain .bold-headline.bold-headline--negative, .banner.bg-pattern--brain-reversed .bold-headline.bold-headline--negative, .banner[class*="bg--gold"] .bold-headline.bold-headline--negative, .banner[class*="bg--white"] .bold-headline.bold-headline--negative, .banner[class*="bg--gray"] .bold-headline.bold-headline--negative {
          color: #151515;
          text-shadow: none; }
          .banner.bg-pattern--brain .bold-headline.bold-headline--negative a, .banner.bg-pattern--brain-reversed .bold-headline.bold-headline--negative a, .banner[class*="bg--gold"] .bold-headline.bold-headline--negative a, .banner[class*="bg--white"] .bold-headline.bold-headline--negative a, .banner[class*="bg--gray"] .bold-headline.bold-headline--negative a {
            color: #151515; }
      .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) {
        color: #151515; }
        .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) h2:not([class*="bold-headline"]),
        .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) h3:not([class*="bold-headline"]),
        .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) h4:not([class*="bold-headline"]),
        .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) h5:not([class*="bold-headline"]),
        .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) h6:not([class*="bold-headline"]),
        .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) blockquote {
          color: #151515; }
          .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) h2:not([class*="bold-headline"]) a,
          .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) h3:not([class*="bold-headline"]) a,
          .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) h4:not([class*="bold-headline"]) a,
          .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) h5:not([class*="bold-headline"]) a,
          .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) h6:not([class*="bold-headline"]) a,
          .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) blockquote a {
            color: #151515; }
        .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) p {
          color: #151515;
          font-weight: normal;
          text-shadow: none; }
          .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) p a {
            color: #151515; }
        .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) .bold-headline.bold-headline--negative {
          color: #151515;
          text-shadow: none; }
          .banner.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) .bold-headline.bold-headline--negative a {
            color: #151515; }
      .banner .bold-headline,
      .banner .headline {
        z-index: 1;
        margin-top: 0;
        margin-bottom: .7rem;
        font-size: calc(100% + 4vw); }
        .banner .bold-headline a:hover,
        .banner .headline a:hover {
          text-decoration: none; }
        .banner .bold-headline a:focus,
        .banner .headline a:focus {
          text-decoration: underline; }
        .banner .bold-headline.bold-headline--negative,
        .banner .headline.bold-headline--negative {
          color: #151515;
          text-shadow: 0 1px 1px #000;
          color: #fff; }
          .banner .bold-headline.bold-headline--negative a,
          .banner .headline.bold-headline--negative a {
            color: #fff; }
        @media (min-width: 768px) {
          .banner .bold-headline,
          .banner .headline {
            font-size: calc(100% + 2.5vw); } }
    
    .banner--horizontal-center {
      text-align: center; }
      .banner--horizontal-center .banner__content > * {
        margin-right: auto;
        margin-left: auto; }
    
    @media (min-width: 768px) {
      .banner--horizontal-left.banner--vertical-bottom .banner__content {
        padding-bottom: 4.25rem; } }
    
    .media--video {
      position: relative; }
      .media--video .video-controls {
        position: absolute;
        z-index: 1;
        left: 1.25rem;
        bottom: 1.25rem; }
        @media (min-width: 84.375em) {
          .media--video .video-controls {
            left: 3rem;
            bottom: 3rem; } }
        @media (min-width: 84.375em) {
          .banner--horizontal-left.banner--vertical-bottom .media--video .video-controls {
            bottom: 1.5rem;
            left: 1.5rem; } }
      .media--video .video-btn {
        display: none;
        width: 40px;
        height: 40px;
        cursor: pointer;
        color: #151515;
        border: 1px solid white;
        border-radius: 50%;
        background: white;
        font-size: 1rem;
        padding: 0; }
        @media (min-width: 768px) {
          .media--video .video-btn {
            display: block; } }
        .media--video .video-btn::after {
          content: "\f04b";
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
          display: inline-block;
          font-style: normal;
          font-variant: normal;
          text-rendering: auto;
          line-height: 1;
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          font-size: 1rem; }
        .media--video .video-btn.video-btn__play::after {
          margin-left: 3px; }
        .media--video .video-btn.video-btn__pause::after {
          content: "\f04c"; }
      @media (hover: none), (hover: on-demand) {
        .media--video .video-btn {
          display: none; } }
    
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .banner {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%; }
      .banner__container {
        align-items: center;
        display: flex;
        justify-content: center;
        height: 100%; }
      .banner__image img,
      .banner .media--video {
        left: 0px; }
      .banner .banner__container {
        min-height: 18rem; } }
    
    @media all and (-ms-high-contrast: none) and (min-width: 768px), (-ms-high-contrast: active) and (min-width: 768px) {
      .banner.banner--large .banner__container {
        min-height: 33rem; } }
    
    @media all and (-ms-high-contrast: none) and (min-width: 855px), (-ms-high-contrast: active) and (min-width: 855px) {
      .banner.banner--large .banner__container {
        min-height: 48rem; } }
    
    @media all and (-ms-high-contrast: none) and (min-width: 768px), (-ms-high-contrast: active) and (min-width: 768px) {
      .banner.banner--medium .banner__container {
        min-height: 33rem; } }
    
    .banner:after {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      content: "";
      transition: all .5s ease-in-out;
      will-change: opacity;
      background: rgba(0, 0, 0, 0.5); }
    
    .banner:not([class*="bg-"]) {
      background: #151515; }
    
    .banner[class*="bg-"]:after {
      background: inherit; }
    
    @media (min-width: 768px) {
      .banner--gradient-left:after {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0, rgba(0, 0, 0, 0.23) 65%, transparent); } }
    
    .banner--gradient-left.banner--gradient-light:after {
      background: rgba(255, 255, 255, 0.7); }
      @media (min-width: 768px) {
        .banner--gradient-left.banner--gradient-light:after {
          background: linear-gradient(90deg, #fff 1%, rgba(255, 255, 255, 0.92) 32%, rgba(255, 255, 255, 0)); } }
    
    .banner--gradient-left.banner--gradient-light[class*="bg-"]:after {
      background: none; }
    
    .banner--gradient-left[class*="bg-"]:after {
      background: none; }
    
    @media (min-width: 768px) {
      .banner--gradient-bottom:after {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 70%); } }
    
    .banner--gradient-bottom.banner--gradient-light:after {
      background: rgba(255, 255, 255, 0.7); }
      @media (min-width: 768px) {
        .banner--gradient-bottom.banner--gradient-light:after {
          background: linear-gradient(180deg, transparent 0, rgba(255, 255, 255, 0.9) 55%); } }
    
    .banner--gradient-bottom.banner--gradient-light[class*="bg-"]:after {
      background: none; }
    
    .banner--transparent:after {
      background: none; }
    
    @media (min-width: 992px) {
      .banner--large .bold-headline,
      .banner--large .headline {
        font-size: calc(100% + 3.5vw); } }
    
  • URL: /components/raw/banner/banner.css
  • Filesystem Path: src/components/banner/banner.css
  • Size: 16.2 KB
  • Content:
    const banners = document.querySelectorAll('.banner');
    const link_queries = ['.banner__content > .headline a', '.banner__action > a.bttn'];
    
    Array.prototype.forEach.call(banners, banner => {
      let up, down, links, link, i = 0;
    
      // Loop through link queries
      for (i; i < link_queries.length; i++) {
        // Break if we find matches.
        links = banner.querySelectorAll(link_queries[i]);
        if (links.length) {
          break;
        }
      }
    
      // If we have exactly one match, attach behaviors.
      if (links && links.length === 1) {
        link = links[0];
        banner.style.cursor = 'pointer';
        banner.onmousedown = () => down = +new Date();
        banner.onmouseup = (e) => {
          // If the user is clicking on the pause/play button of a video BG element...
          // Do not send an event to trigger a click on the banner link.
          if(banner.querySelectorAll('.video-controls').length > 0) {
            if (isEventInElement(e, banner.querySelector('.video-controls'))) {
              return false;
            }
          }
    
          // Trigger click event if the duration is short enough.
          up = +new Date();
          if ((up - down) < 200) {
            link.click();
          }
        }
      }
    });
    
    // This function detects if an event happens inside a specific element.
    function isEventInElement(event, element)   {
      // Get the elements bounds.
      let rect = element.getBoundingClientRect();
      // check if the x and y pos of the event is within the bounds of the previsouly defined bounts of 'element'.
      let x = event.clientX;
      if (x < rect.left || x >= rect.right) return false;
      let y = event.clientY;
      if (y < rect.top || y >= rect.bottom) return false;
      // If it is, return true.
      return true;
    }
    
  • URL: /components/raw/banner/banner.js
  • Filesystem Path: src/components/banner/banner.js
  • Size: 1.7 KB
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    
    .banner {
      // @todo Replace with https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
      min-height: 15rem;
    
      // Banner Heights
      &--large {
        &::before {
          float: left;
          padding-top: 45.25%;
          content: '';
        }
      }
    
      &--medium {
        &::before {
          float: left;
          padding-top: 32.25%;
          content: '';
        }
      }
    
      &--small {
        &::before {
          float: left;
          padding-top: 17.75%;
          content: '';
        }
      }
    
      // Full screen 100vh option
      &--full {
        &.banner--large {
          @include breakpoint(container) {
            height: 100vh;
          }
        }
      }
    
      &::after {
        display: block;
        content: '';
        clear: both;
      }
    
      // Override background color if button is within a gold container
      &.bg-pattern--brain-reversed,
      &[class*="bg--gold"] {
        .bttn--primary {
          color: #fff;
          background: $secondary;
          border: 1px solid $secondary;
    
          svg {
            color: $primary;
          }
        }
      }
    }
    
    // Banner styles
    .banner {
      position: relative;
      overflow: hidden;
      flex-basis: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    
      &.banner--vertical-bottom {
        align-items: flex-end;
      }
    
      &:focus-within .bold-headline a:focus {
        text-decoration: underline;
      }
    
      &__container {
    
        margin: 0 auto;
        width: 100%;
        z-index: 1;
    
        @include breakpoint(sm) {
          z-index: 1;
          max-width: 81.875em;
          top: 0;
        }
      }
        
      .media--video .video-controls { 
        z-index: 2; 
      }
    
      img {
        width: 100%;
      }
    
      &__image {
        overflow: visible;
    
        img {
          display: block;
          width: 100%;
          -o-object-fit: cover;
          object-fit: cover;
          position: absolute;
          height: 100%;
          top: 0;
        }
      }
    
      .headline + .banner__action {
        margin-top: 1rem;
      }
    
      .banner__action .bttn {
        margin: 0 1rem 1rem 0;
        + .bttn {
          @include breakpoint(sm) {
            margin: 0 1rem 1rem 0;
          }
        }
      }
    
      .media--video {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
    
        video {
          overflow: visible;
          display: block;
          width: 100%;
          -o-object-fit: cover;
          object-fit: cover;
          position: absolute;
          height: 100%;
          top: 0;
        }
      }
    
    
      &__text {
        z-index: 1;
      }
    
      &__content {
        padding: $gutter;
    
        @include breakpoint(sm) {
          padding: 1.25rem 0 2rem 0;
        }
    
        >* {
          flex-basis: 100%;
        }
    
        .bttn {
          margin-right: auto;
          margin-left: 0;
          z-index: 1;
        }
    
        @include breakpoint(container) {
          padding: $gutter 0;
        }
      }
    
      h2:not([class*="bold-headline"]),
      h3:not([class*="bold-headline"]),
      h4:not([class*="bold-headline"]),
      h5:not([class*="bold-headline"]),
      h6:not([class*="bold-headline"]),
      blockquote {
        color: #fff;
    
        a {
          color: #fff;
        }
      }
    
    
      p {
        line-height: 1.5;
        margin-top: 0;
        color: #fff;
        text-shadow: 0 1px 1px #000;
    
        a {
          position: relative;
          z-index: 1;
          color: #fff;
        }
      }
    
      // bg variants
      // @todo This should probably be resolved with https://sass-lang.com/documentation/values/maps#using-maps
      &.bg-pattern--brain,
      &.bg-pattern--brain-reversed,
      &[class*="bg--gold"],
      &[class*="bg--white"],
      &[class*="bg--gray"] {
        color: $secondary;
    
        p {
          color: $secondary;
          font-weight: normal;
          text-shadow: none;
    
          a {
            color: $secondary;
          }
        }
    
        h2:not([class*="bold-headline"]),
        h3:not([class*="bold-headline"]),
        h4:not([class*="bold-headline"]),
        h5:not([class*="bold-headline"]),
        h6:not([class*="bold-headline"]),
        blockquote {
          color: $secondary;
    
          a {
            color: $secondary;
          }
        }
    
        .bold-headline.bold-headline--negative {
          color: $secondary;
          text-shadow: none;
    
          a {
            color: $secondary;
          }
        }
      }
    
      &.banner--gradient-light:not([class*="bg--black"]):not([class*="bg-pattern--brain-black"]) {
        color: $secondary;
    
        h2:not([class*="bold-headline"]),
        h3:not([class*="bold-headline"]),
        h4:not([class*="bold-headline"]),
        h5:not([class*="bold-headline"]),
        h6:not([class*="bold-headline"]),
        blockquote {
          color: $secondary;
    
          a {
            color: $secondary;
          }
        }
    
        p {
          color: $secondary;
          font-weight: normal;
          text-shadow: none;
    
          a {
            color: $secondary;
          }
        }
    
        .bold-headline.bold-headline--negative {
          color: $secondary;
          text-shadow: none;
    
          a {
            color: $secondary;
          }
        }
      }
    
      .bold-headline,
      .headline {
        z-index: 1;
    
        a {
          &:hover {
            text-decoration: none;
          }
    
          &:focus {
            text-decoration: underline;
          }
        }
    
        &.bold-headline--negative {
          color: $secondary;
    
          a {
            color: #fff;
          }
    
          text-shadow: 0 1px 1px #000;
          color: #fff;
        }
    
        margin-top: 0;
        margin-bottom: .7rem;
        font-size: calc(100% + 4vw);
    
        @include breakpoint(sm) {
          font-size: calc(100% + 2.5vw);
        }
      }
    }
    
    // Alignment Variants
    .banner--horizontal-center {
      text-align: center;
    
      .banner__content {
        >* {
          margin-right: auto;
          margin-left: auto;
        }
      }
    }
    
    // Bottom/Left Video button alignment
    .banner--horizontal-left.banner--vertical-bottom  {
      .banner__content {
        @include breakpoint(sm) {
          padding-bottom: 4.25rem;
        }
      }
    }
    
    .media--video {
      position: relative;
    
      .video-controls {
        position: absolute;
        z-index: 1;
        left: 1.25rem;
        bottom: 1.25rem;
    
        @include breakpoint(container) {
          left: 3rem;
          bottom: 3rem;
        }
        .banner--horizontal-left.banner--vertical-bottom & {
          @include breakpoint(container) {
            bottom: 1.5rem;
            left: 1.5rem;
          }
        }
      }
    
      .video-btn {
        display: none;
        width: 40px;
        height: 40px;
        cursor: pointer;
        color: $secondary;
        border: 1px solid white;
        border-radius: 50%;
        background: white;
        font-size: 1rem;
        padding: 0;
    
        @include breakpoint(sm) {
          display: block;
        }
    
        &::after {
          content: "\f04b";
          @include fas();
          font-size: 1rem;
        }
    
        &.video-btn__play::after {
          margin-left: 3px;
        }
    
        &.video-btn__pause::after {
          content: "\f04c";
        }
      }
    
      @media (hover:none),
      (hover:on-demand) {
        .video-btn {
          display: none;
        }
      }
    }
    
    // ie11
    @media all and (-ms-high-contrast: none),
    (-ms-high-contrast: active) {
      .banner {
        display:flex;
        justify-content:center;
        align-items:center;
        height: 100%;
      }
      .banner__container  {
        align-items: center;
        display: flex;
        justify-content: center;
        height: 100%;
      }
      .banner__image img,
      .banner .media--video {
        left: 0px;
      }
    
      .banner .banner__container {
        min-height: 18rem;
      }
    
      .banner.banner--large .banner__container {
        @include breakpoint(sm) {
          min-height: 33rem;
        }
        @include breakpoint(menu) {
          min-height: 48rem;
        }
      }
    
      .banner.banner--medium .banner__container {
        @include breakpoint(sm) {
          min-height: 33rem;
        }
      }
    }
    
    // Gradient overlays
    .banner {
      // Default overlay
        &:after {
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 100%;
          height: 100%;
          content: "";
          -webkit-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out;
          will-change: opacity;
          background: rgba(0, 0, 0, .5);
        }
    
        &:not([class*="bg-"]) {
          background: $secondary;
        }
    
        &[class*="bg-"]:after {
          background: inherit;
        }
    
      &--gradient-left {
    
        &:after {
          @include breakpoint(sm) {
            background: linear-gradient(90deg, rgba(0, 0, 0, .86) 0, rgba(0, 0, 0, .23) 65%, transparent);
          }
        }
    
        &.banner--gradient-light {
          &:after {
            background: rgba(255, 255, 255, .7);
    
            @include breakpoint(sm) {
              background: linear-gradient(90deg, #fff 1%, hsla(0, 0%, 100%, .92) 32%, hsla(0, 0%, 100%, 0));
            }
          }
    
          &[class*="bg-"]:after {
            background: none;
          }
        }
    
        &[class*="bg-"]:after {
          background: none;
        }
      }
    
      &--gradient-bottom {
        &:after {
          @include breakpoint(sm) {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 70%);
          }
        }
    
        &.banner--gradient-light {
          &:after {
            background: rgba(255, 255, 255, .7);
    
            @include breakpoint(sm) {
              background: linear-gradient(180deg, transparent 0, hsla(0, 0%, 100%, .9) 55%);
            }
          }
    
          &[class*="bg-"]:after {
            background: none;
          }
        }
      }
    
      &--transparent {
        &:after {
          background: none;
        }
      }
    }
    
    // Set larger heading size for large banner only
    .banner--large {
      .bold-headline,
      .headline {
        @include breakpoint(md) {
          font-size: calc(100% + 3.5vw);
        }
      }
    }
    
  • URL: /components/raw/banner/banner.scss
  • Filesystem Path: src/components/banner/banner.scss
  • Size: 9 KB