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 centered left banner

Component Preview
<div class="banner banner--gradient-bottom banner--gradient-dark banner--small banner--stacked banner--vertical-center banner--horizontal-left click-container">
            <div class="banner__image">
                <img src="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/pano.jpg" alt="Alt Text">
            </div>

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

                    <div class="headline headline--serif headline headline--negative headline--small banner__pre-title">
                        <span class="headline__text">University of Iowa</span>
                    </div>
                    <h2 class="headline headline--serif headline headline--negative headline--small">
                        <span class="headline__text">Living on Campus</span>
                    </h2>

                    <div class="banner__text">
                        <p>A member of the <a href="/">Association</a> 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>

                </div>
            </div>

        </div>
  • Content:
    .banner {
      flex-basis: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 15rem;
      position: relative;
      overflow: hidden; }
      .banner--large::before {
        float: left;
        padding-top: 45.25%;
        content: ''; }
      .banner--medium::before {
        float: left;
        padding-top: 32.25%;
        content: ''; }
      @media (min-width: 84.375em) {
        .banner--full.banner--large {
          height: 100vh; } }
      .banner::after {
        display: block;
        content: '';
        clear: both; }
        @media (min-width: 84.375em) {
          .banner::after {
            display: block;
            content: '';
            clear: both; } }
      @media (min-width: 768px) {
        .banner {
          flex-basis: 100%;
          display: flex;
          align-items: center;
          justify-content: center; } }
      .banner.banner--vertical-bottom {
        align-items: flex-end; }
      .banner.banner--horizontal-center {
        text-align: center; }
        .banner.banner--horizontal-center blockquote {
          border-left: none; }
        .banner.banner--horizontal-center .banner__content > * {
          margin-right: auto;
          margin-left: auto; }
      .banner:focus-within .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 .headline + .banner__action {
        margin-top: 1.5rem; }
      .banner .banner__action .bttn {
        margin: 0 1rem 1rem 0; }
        @media (min-width: 768px) {
          .banner .banner__action .bttn + .bttn {
            margin: 0 1rem 1rem 0; } }
        .banner .banner__action .bttn:last-child {
          margin-right: 0; }
      @media (min-width: 768px) {
        [class*=bg--black] .banner.banner--gradient-light:not([class*="bg-"]) .banner__action .bttn--tertiary {
          color: #151515; } }
      @media (min-width: 768px) {
        .banner.banner--gradient-dark:not([class*="bg-"]).banner--stacked .banner__action .bttn--tertiary.bttn--outline {
          border-color: rgba(255, 255, 255, 0.525);
          color: #fff; } }
      .banner.banner--gradient-dark:not([class*="bg-"]):not([class*="banner--stacked"]) .banner__action .bttn--tertiary.bttn--outline {
        border: 1px solid #fff;
        color: #fff; }
      .banner__pre-title {
        background: none;
        line-height: 1.1; }
        .banner__pre-title.headline.headline--serif {
          margin-bottom: 0; }
        .banner__pre-title.headline.headline--uppercase {
          margin-bottom: 0.7rem; }
        .banner__pre-title.headline.headline--highlight {
          margin-bottom: -.1rem; }
        .banner__pre-title.headline.headline--highlight.headline--serif {
          margin-bottom: -.4rem; }
        .banner__pre-title.headline.headline--highlight span {
          background: none; }
          @media (min-width: 768px) {
            [class*="bg--black"] .banner--gradient-light:not([class*="bg-"]) .banner__pre-title.headline.headline--highlight span {
              color: #151515; } }
          [class*="bg--black"] .banner__pre-title.headline.headline--highlight span,
          [class*="bg--"] [class*="bg--black"] .banner__pre-title.headline.headline--highlight span,
          [class*="bg--black"] [class*="banner--gradient-dark"]:not([class*="bg--"]) .banner__pre-title.headline.headline--highlight span,
          [class*="bg--gold"] [class*="banner--gradient-dark"][class*="bg--black"] .banner__pre-title.headline.headline--highlight span,
          [class*="banner--gradient-dark"]:not([class*="bg--"]):not([class*="banner--stacked"]) .banner__pre-title.headline.headline--highlight span,
          [class*="bg--black"] [class*="banner--gradient-light"][class*="bg--black"]:not([class*="banner--stacked"]) .banner__pre-title.headline.headline--highlight span {
            color: #fff; }
          @media (min-width: 768px) {
            [class*="banner--gradient-dark"]:not([class*="bg--"]) .banner__pre-title.headline.headline--highlight span {
              color: #fff; } }
          [class*="bg--gold"] [class*="banner--gradient-dark"] .banner__pre-title.headline.headline--highlight span {
            color: #151515; }
            @media (min-width: 768px) {
              [class*="bg--gold"] [class*="banner--gradient-dark"] .banner__pre-title.headline.headline--highlight span {
                color: #fff; } }
          [class*="bg--gold"] [class*="banner--gradient-dark"][class*="bg--gold"] .banner__pre-title.headline.headline--highlight span,
          [class*="bg--gold"] [class*="banner--gradient-dark"][class*="bg--gray"] .banner__pre-title.headline.headline--highlight span,
          [class*="bg--gold"] [class*="banner--gradient-dark"][class*="bg--white"] .banner__pre-title.headline.headline--highlight span,
          [class*="bg--black"] [class*="banner--gradient-light"]:not([class*="banner--stacked"]) .banner__pre-title.headline.headline--highlight span,
          [class*="bg--white"] .banner__pre-title.headline.headline--highlight span,
          [class*="bg--gold"] .banner__pre-title.headline.headline--highlight span,
          [class*="bg--gray"] .banner__pre-title.headline.headline--highlight span {
            color: #151515; }
        .banner__pre-title.headline--large {
          font-size: 1.6rem;
          font-size: clamp(1.2rem, calc(0.9014vw + 0.862rem), 1.6rem); }
        .banner__pre-title.headline--medium {
          font-size: 1.4rem;
          font-size: clamp(1.2rem, calc(0.4507vw + 1.031rem), 1.4rem); }
        .banner__pre-title.headline--small {
          font-size: 1.4rem; }
      .banner__stacked[class*="banner--gradient-dark"] .banner__pre-title.headline--highlight span {
        color: #151515; }
        [class*="bg--black"] .banner__stacked[class*="banner--gradient-dark"] .banner__pre-title.headline--highlight span {
          color: #fff; }
        @media (min-width: 768px) {
          .banner__stacked[class*="banner--gradient-dark"] .banner__pre-title.headline--highlight span {
            color: #fff;
            text-shadow: 0 1px 1px #000; } }
      .banner__content {
        padding: 1.25rem; }
        @media (min-width: 768px) {
          .banner__content {
            padding: 2rem 0; } }
        .banner__content > * {
          flex-basis: 100%; }
        @media (min-width: 84.375em) {
          .banner__content {
            padding: 2rem 0 1.25rem; } }
      .banner__text {
        z-index: 1;
        color: #fff; }
        .banner__text blockquote {
          margin-left: 0; }
        .banner__text a {
          color: #fff; }
        .banner__text p {
          line-height: 1.5;
          margin-top: 0;
          color: #fff;
          text-shadow: 0 1px 1px #000; }
          @media (min-width: 768px) {
            .banner__text p {
              color: #fff;
              text-shadow: 0 1px 1px #000; } }
          .banner__text p a {
            position: relative;
            z-index: 1;
            color: #fff; }
      [class*="bg--gray"] .banner[class*="banner--gradient-dark"]:not([class*="bg-"]):not([class*="banner--stacked"]) .banner__text a,
      [class*="bg--gold"] .banner[class*="banner--gradient-dark"]:not([class*="bg-"]):not([class*="banner--stacked"]) .banner__text a,
      [class*="bg--white"] .banner[class*="banner--gradient-dark"]:not([class*="bg-"]):not([class*="banner--stacked"]) .banner__text a {
        color: #fff; }
      .banner[class*="bg--black"] .banner__text p {
        color: #fff; }
      [class*="bg--gold"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]) .banner__text blockquote {
        border-left-color: #FFCD00; }
      .banner[class*="bg--gray"] .banner__text {
        color: #151515; }
        .banner[class*="bg--gray"] .banner__text a {
          color: #151515; }
        .banner[class*="bg--gray"] .banner__text p {
          color: #151515;
          font-weight: normal;
          text-shadow: none; }
          .banner[class*="bg--gray"] .banner__text p a {
            color: #151515; }
      .banner[class*="bg--gold"] .banner__text, .banner[class*="bg--white"] .banner__text, .banner[class*="banner--gradient-light"]:not([class*="bg-"]) .banner__text {
        color: #151515; }
        .banner[class*="bg--gold"] .banner__text p, .banner[class*="bg--white"] .banner__text p, .banner[class*="banner--gradient-light"]:not([class*="bg-"]) .banner__text p {
          color: #151515;
          font-weight: normal;
          text-shadow: none; }
          .banner[class*="bg--gold"] .banner__text p a, .banner[class*="bg--white"] .banner__text p a, .banner[class*="banner--gradient-light"]:not([class*="bg-"]) .banner__text p a {
            color: #151515; }
        .banner[class*="bg--gold"] .banner__text a, .banner[class*="bg--white"] .banner__text a, .banner[class*="banner--gradient-light"]:not([class*="bg-"]) .banner__text a {
          color: #151515; }
      [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .banner__text, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .banner__text, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .banner__text {
        color: #fff; }
        @media (min-width: 768px) {
          [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .banner__text, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .banner__text, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .banner__text {
            color: #151515; } }
        [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .banner__text a, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .banner__text a, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .banner__text a {
          color: #fff; }
          @media (min-width: 768px) {
            [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .banner__text a, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .banner__text a, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .banner__text a {
              color: #151515; } }
        [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .banner__text p, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .banner__text p, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .banner__text p {
          color: #fff; }
          @media (min-width: 768px) {
            [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .banner__text p, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .banner__text p, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .banner__text p {
              color: #151515; } }
          [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .banner__text p a, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .banner__text p a, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .banner__text p a {
            color: #fff; }
            @media (min-width: 768px) {
              [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .banner__text p a, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .banner__text p a, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .banner__text p a {
                color: #151515; } }
      .banner--stacked .banner__text {
        color: #151515; }
        @media (min-width: 768px) {
          .banner--stacked .banner__text {
            color: #fff; } }
        .banner--stacked .banner__text a {
          color: #151515; }
          @media (min-width: 768px) {
            .banner--stacked .banner__text a {
              color: #fff; } }
      .banner--stacked[class*="banner--gradient-dark"]:not([class*="bg--"]) .banner__text p {
        color: #151515;
        text-shadow: none; }
        [class*="bg--black"] .banner--stacked[class*="banner--gradient-dark"]:not([class*="bg--"]) .banner__text p {
          color: #fff; }
        @media (min-width: 768px) {
          .banner--stacked[class*="banner--gradient-dark"]:not([class*="bg--"]) .banner__text p {
            color: #fff;
            text-shadow: 0 1px 1px #000; } }
        .banner--stacked[class*="banner--gradient-dark"]:not([class*="bg--"]) .banner__text p a {
          color: #151515; }
          @media (min-width: 768px) {
            .banner--stacked[class*="banner--gradient-dark"]:not([class*="bg--"]) .banner__text p a {
              color: #fff; } }
          [class*="bg--black"] .banner--stacked[class*="banner--gradient-dark"]:not([class*="bg--"]) .banner__text p a {
            color: #fff; }
      [class*="bg--gold"] .banner--stacked[class*="banner--gradient-light"]:not([class*="bg--"]) .banner__text blockquote {
        border-left-color: #fff; }
        @media (min-width: 768px) {
          [class*="bg--gold"] .banner--stacked[class*="banner--gradient-light"]:not([class*="bg--"]) .banner__text blockquote {
            border-left-color: #FFCD00; } }
      [class*="bg--gold"] .banner--stacked[class*="banner--gradient-light"]:not([class*="bg--black"]) .banner__text p {
        color: #151515; }
        [class*="bg--gold"] .banner--stacked[class*="banner--gradient-light"]:not([class*="bg--black"]) .banner__text p a {
          color: #151515; }
      .banner--stacked[class*="bg--black"] {
        display: flex; }
        .banner--stacked[class*="bg--black"] .banner__text {
          color: #fff; }
          .banner--stacked[class*="bg--black"] .banner__text a {
            color: #fff; }
          .banner--stacked[class*="bg--black"] .banner__text p {
            color: #fff; }
            .banner--stacked[class*="bg--black"] .banner__text p a {
              color: #fff; }
      [class*="bg--black"] .banner--stacked .banner__text {
        color: #fff; }
        [class*="bg--black"] .banner--stacked .banner__text a {
          color: #fff; }
      [class*="bg--black"] .banner--stacked[class*="bg--white"] .banner__text, [class*="bg--black"] .banner--stacked[class*="bg--gray"] .banner__text, [class*="bg--black"] .banner--stacked[class*="bg--gold"] .banner__text {
        color: #151515; }
        [class*="bg--black"] .banner--stacked[class*="bg--white"] .banner__text a, [class*="bg--black"] .banner--stacked[class*="bg--gray"] .banner__text a, [class*="bg--black"] .banner--stacked[class*="bg--gold"] .banner__text a {
          color: #151515; }
        [class*="bg--black"] .banner--stacked[class*="bg--white"] .banner__text p, [class*="bg--black"] .banner--stacked[class*="bg--gray"] .banner__text p, [class*="bg--black"] .banner--stacked[class*="bg--gold"] .banner__text p {
          color: #151515; }
          [class*="bg--black"] .banner--stacked[class*="bg--white"] .banner__text p a, [class*="bg--black"] .banner--stacked[class*="bg--gray"] .banner__text p a, [class*="bg--black"] .banner--stacked[class*="bg--gold"] .banner__text p a {
            color: #151515; }
      .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--stacked .banner__image img {
        position: relative; }
        @media (min-width: 768px) {
          .banner--stacked .banner__image img {
            position: absolute; } }
      .banner .media--video .video-controls {
        z-index: 2; }
      .banner .media--video {
        height: 100%;
        width: 100%;
        top: 0;
        position: absolute; }
        .banner .media--video video {
          overflow: visible;
          display: block;
          width: 100%;
          -o-object-fit: cover;
          object-fit: cover;
          height: 100%;
          top: 0; }
          @media (min-width: 768px) {
            .banner .media--video video {
              position: absolute; } }
      .banner .media--video .video-controls {
        position: absolute;
        left: 1.25rem;
        bottom: 1.25rem; }
        @media (min-width: 84.375em) {
          .banner .media--video .video-controls {
            left: 3rem;
            bottom: 3rem; } }
        @media (min-width: 84.375em) {
          .banner--horizontal-left.banner--vertical-bottom .banner .media--video .video-controls {
            bottom: 1.5rem;
            left: 1.5rem; } }
      .banner .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) {
          .banner .media--video .video-btn {
            display: block; } }
        .banner .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; }
        .banner .media--video .video-btn.video-btn__play::after {
          margin-left: 3px; }
        .banner .media--video .video-btn.video-btn__pause::after {
          content: "\f04c"; }
      @media (hover: none), (hover: on-demand) {
        .banner .media--video .video-btn {
          display: none; } }
      .banner[class*="banner--gradient-light"] .media--video .video-btn {
        border: 1px solid #151515; }
      .banner--stacked .media--video {
        position: relative; }
        @media (min-width: 768px) {
          .banner--stacked .media--video {
            position: absolute; } }
        .banner--stacked .media--video .video-btn {
          display: block; }
      @media (min-width: 768px) {
        .banner.banner--horizontal-left.banner--vertical-bottom .media--video + .banner__container .banner__content {
          padding-bottom: 4.25rem; } }
      .banner--stacked {
        display: block; }
        @media (min-width: 768px) {
          .banner--stacked {
            display: flex; } }
      .banner:after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        transition: all 0.5s ease-in-out;
        will-change: opacity; }
      @media (min-width: 768px) {
        .banner.banner--gradient-dark:not([class*="bg-"]) {
          background: #151515; } }
      .banner.banner--gradient-dark:not([class*="bg-"]):not([class*="banner--stacked"]) {
        background: #151515; }
      .banner--gradient-left[class*="banner--stacked"]:after {
        background: none;
        width: auto;
        height: auto; }
        @media (min-width: 768px) {
          .banner--gradient-left[class*="banner--stacked"]:after {
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0, rgba(0, 0, 0, 0.23) 65%, transparent); } }
      .banner--gradient-left:after {
        background: rgba(0, 0, 0, 0.5); }
        @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[class*="banner--stacked"]:after {
        background: none;
        width: auto;
        height: auto; }
        @media (min-width: 768px) {
          .banner--gradient-left.banner--gradient-light[class*="banner--stacked"]:after {
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #fff 1%, rgba(255, 255, 255, 0.92) 32%, rgba(255, 255, 255, 0)); } }
      .banner--gradient-left.banner--gradient-light:after {
        background: rgba(255, 255, 255, 0.8); }
        @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; }
      .banner--gradient-bottom[class*="banner--stacked"]:after {
        background: none;
        width: auto;
        height: auto; }
        @media (min-width: 768px) {
          .banner--gradient-bottom[class*="banner--stacked"]:after {
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 70%); } }
      .banner--gradient-bottom:after {
        background: rgba(0, 0, 0, 0.5); }
        @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[class*="banner--stacked"]:after {
        background: none;
        width: auto;
        height: auto; }
        @media (min-width: 768px) {
          .banner--gradient-bottom.banner--gradient-light[class*="banner--stacked"]:after {
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, transparent 0, rgba(255, 255, 255, 0.9) 55%); } }
      .banner--gradient-bottom.banner--gradient-light:after {
        background: rgba(255, 255, 255, 0.8); }
        @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; }
      .banner[class*="bg-"]:after {
        background: inherit; }
      .banner .headline {
        z-index: 1;
        margin-top: 0;
        margin-bottom: 1rem; }
        .banner .headline a:hover {
          text-decoration: none; }
        .banner .headline a:focus {
          text-decoration: underline; }
      .banner .headline--negative {
        color: #fff;
        text-shadow: 0 1px 1px #000; }
        @media (min-width: 768px) {
          .banner .headline--negative {
            color: #fff; } }
        @media (min-width: 768px) {
          .banner .headline--negative a {
            color: #fff; } }
      .banner :where(h2, h3, h4, h5, h6).headline--large, .banner :where(h2, h3, h4, h5, h6).headline--large.headline--serif {
        font-size: 4.7rem;
        font-size: clamp(2.5rem, calc(4.9577vw + 0.6408rem), 4.7rem); }
      .banner :where(h2, h3, h4, h5, h6).headline--medium, .banner :where(h2, h3, h4, h5, h6).headline--medium.headline--serif {
        font-size: 3.7rem;
        font-size: clamp(2.2rem, calc(3.3803vw + 0.9324rem), 3.7rem); }
      .banner :where(h2, h3, h4, h5, h6).headline--small, .banner :where(h2, h3, h4, h5, h6).headline--small.headline--serif {
        font-size: 2.7rem;
        font-size: clamp(2rem, calc(1.5775vw + 1.4085rem), 2.7rem); }
      .banner--stacked[class*="banner--gradient-dark"][class*="bg--black"] .headline--negative {
        color: #fff; }
      [class*="bg--black"] .banner--stacked[class*="banner--gradient-dark"][class*="bg--gray"] .headline--negative, [class*="bg--black"]
      .banner--stacked[class*="banner--gradient-dark"][class*="bg--gray"] .headline--negative.headline--uppercase, [class*="bg--black"] .banner--stacked[class*="banner--gradient-dark"][class*="bg--white"] .headline--negative, [class*="bg--black"]
      .banner--stacked[class*="banner--gradient-dark"][class*="bg--white"] .headline--negative.headline--uppercase {
        color: #151515;
        text-shadow: none; }
        [class*="bg--black"] .banner--stacked[class*="banner--gradient-dark"][class*="bg--gray"] .headline--negative a, [class*="bg--black"]
        .banner--stacked[class*="banner--gradient-dark"][class*="bg--gray"] .headline--negative.headline--uppercase a, [class*="bg--black"] .banner--stacked[class*="banner--gradient-dark"][class*="bg--white"] .headline--negative a, [class*="bg--black"]
        .banner--stacked[class*="banner--gradient-dark"][class*="bg--white"] .headline--negative.headline--uppercase a {
          color: #151515;
          text-shadow: none; }
      .banner--stacked[class*="banner--gradient-dark"] .headline--negative {
        color: #151515;
        text-shadow: none; }
        @media (min-width: 768px) {
          .banner--stacked[class*="banner--gradient-dark"] .headline--negative {
            color: #fff;
            text-shadow: 0 1px 1px #000; } }
        .banner--stacked[class*="banner--gradient-dark"] .headline--negative a {
          color: #151515; }
          @media (min-width: 768px) {
            .banner--stacked[class*="banner--gradient-dark"] .headline--negative a {
              color: #fff; } }
        [class*="bg--black"] .banner--stacked[class*="banner--gradient-dark"] .headline--negative {
          color: #fff;
          text-shadow: 0 1px 1px #000; }
          @media (min-width: 768px) {
            [class*="bg--black"] .banner--stacked[class*="banner--gradient-dark"] .headline--negative {
              color: #fff; } }
          [class*="bg--black"] .banner--stacked[class*="banner--gradient-dark"] .headline--negative a {
            color: #fff; }
            @media (min-width: 768px) {
              [class*="bg--black"] .banner--stacked[class*="banner--gradient-dark"] .headline--negative a {
                color: #fff; } }
      .banner[class*="bg--gray"] .headline--negative {
        color: #151515;
        text-shadow: none; }
        .banner[class*="bg--gray"] .headline--negative a {
          color: #151515; }
      .banner[class*="bg--black"] .headline--negative a {
        color: #fff; }
      .banner[class*="bg--gold"] .headline.headline--negative, .banner[class*="bg--white"] .headline.headline--negative, .banner[class*="banner--gradient-light"]:not([class*="bg-"]) .headline.headline--negative {
        color: #151515;
        text-shadow: none; }
        .banner[class*="bg--gold"] .headline.headline--negative a, .banner[class*="bg--white"] .headline.headline--negative a, .banner[class*="banner--gradient-light"]:not([class*="bg-"]) .headline.headline--negative a {
          color: #151515; }
      [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .headline.headline--negative, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .headline.headline--negative, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .headline.headline--negative {
        color: #fff; }
        @media (min-width: 768px) {
          [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .headline.headline--negative, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .headline.headline--negative, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .headline.headline--negative {
            color: #151515; } }
        [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .headline.headline--negative a, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .headline.headline--negative a, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .headline.headline--negative a {
          color: #fff; }
          @media (min-width: 768px) {
            [class*="bg--black"] .banner[class*="bg--gold"].banner--stacked:not([class*="bg-"]) .headline.headline--negative a, [class*="bg--black"] .banner[class*="bg--white"].banner--stacked:not([class*="bg-"]) .headline.headline--negative a, [class*="bg--black"] .banner[class*="banner--gradient-light"]:not([class*="bg-"]).banner--stacked:not([class*="bg-"]) .headline.headline--negative a {
              color: #151515; } }
    
    @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 .media--video,
      .banner__image img {
        left: 0; }
      .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: 980px), (-ms-high-contrast: active) and (min-width: 980px) {
      .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; } }
    
    [class*="bg--gray"] [class*="banner--gradient-dark"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
    [class*="bg--white"] [class*="banner--gradient-dark"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
      color: inherit; }
    
  • URL: /components/raw/banner/banner.css
  • Filesystem Path: src/components/banner/banner.css
  • Size: 28.4 KB
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    
    // --------------------------------
    // Banner sizes
    //
    // @todo Use https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
    //   when there is better browser support.
    // --------------------------------
    
    .banner {
      flex-basis: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 15rem;
      position: relative;
      overflow: hidden;
    
      &--large {
        &::before {
          float: left;
          padding-top: 45.25%;
          content: '';
        }
      }
    
      &--medium {
        &::before {
          float: left;
          padding-top: 32.25%;
          content: '';
        }
      }
    
      // Full screen 100vh option
      &--full {
        &.banner--large {
          @include breakpoint(page-container) {
            height: 100vh;
          }
        }
      }
    
      &::after {
        display: block;
        content: '';
        clear: both;
        @include breakpoint(page-container) {
          display: block;
          content: '';
          clear: both;
        }
      }
    
    // --------------------------------
    // Alignment
    // --------------------------------
    
      @include breakpoint(sm) {
        flex-basis: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    
      &.banner--vertical-bottom {
        align-items: flex-end;
      }
    
      &.banner--horizontal-center {
        text-align: center;
    
        blockquote {
          border-left: none;
        }
    
        .banner__content {
          > * {
            margin-right: auto;
            margin-left: auto;
          }
        }
      }
    
    // --------------------------------
    // Container
    // --------------------------------
    
      &:focus-within .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;
        }
      }
    
    // --------------------------------
    // Actions/buttons
    // --------------------------------
    
      .headline + .banner__action {
        margin-top: 1.5rem;
      }
    
      .banner__action .bttn {
        margin: 0 1rem 1rem 0;
    
        + .bttn {
          @include breakpoint(sm) {
            margin: 0 1rem 1rem 0;
          }
        }
        &:last-child {
          margin-right: 0;
        }
      }
    
      &.banner--gradient-light:not([class*="bg-"]) {
        .banner__action {
          .bttn--tertiary {
            [class*=bg--black] & {
              @include breakpoint(sm) {
                color: $secondary;
              }
            }
          }
        }
      }
    
      &.banner--gradient-dark:not([class*="bg-"]) {
        &.banner--stacked {
          .banner__action {
            .bttn--tertiary.bttn--outline {
              @include breakpoint(sm) {
                border-color: rgba(255,255,255,.525);
                color: #fff;
              }
            }
          }
        }
        &:not([class*="banner--stacked"]) {
          .banner__action {
            .bttn--tertiary.bttn--outline {
              border: 1px solid #fff;
              color: #fff;
            }
          }
        }
      }
    
    // --------------------------------
    // Pre-title
    // --------------------------------
    
      &__pre-title {
        background: none;
        line-height: 1.1;
    
        &.headline.headline--serif {
          margin-bottom: 0;
        }
    
        &.headline.headline--uppercase {
          margin-bottom: 0.7rem;
        }
    
        &.headline.headline--highlight {
          margin-bottom: -.1rem;
        }
    
        &.headline.headline--highlight.headline--serif {
          margin-bottom: -.4rem;
        }
    
        &.headline.headline--highlight {
          span {
            background: none;
    
            .banner--gradient-light:not([class*="bg-"]) & {
              [class*="bg--black"] & {
                @include breakpoint(sm) {
                  color: $secondary;
                }
              }
            }
    
            [class*="bg--black"] &,
            [class*="bg--"] [class*="bg--black"] &,
            [class*="bg--black"] [class*="banner--gradient-dark"]:not([class*="bg--"]) &,
            [class*="bg--gold"] [class*="banner--gradient-dark"][class*="bg--black"] &,
            [class*="banner--gradient-dark"]:not([class*="bg--"]):not([class*="banner--stacked"]) &,
            [class*="bg--black"] [class*="banner--gradient-light"][class*="bg--black"]:not([class*="banner--stacked"]) & {
              color: #fff;
            }
    
            [class*="banner--gradient-dark"]:not([class*="bg--"]) & {
              @include breakpoint(sm) {
                color: #fff;
              }
            }
    
            [class*="bg--gold"] [class*="banner--gradient-dark"] & {
              color: $secondary;
              @include breakpoint(sm) {
                color: #fff;
              }
            }
    
            [class*="bg--gold"] [class*="banner--gradient-dark"][class*="bg--gold"] &,
            [class*="bg--gold"] [class*="banner--gradient-dark"][class*="bg--gray"] &,
            [class*="bg--gold"] [class*="banner--gradient-dark"][class*="bg--white"] &,
            [class*="bg--black"] [class*="banner--gradient-light"]:not([class*="banner--stacked"]) &,
            [class*="bg--white"] &,
            [class*="bg--gold"] &,
            [class*="bg--gray"] & {
              color: $secondary;
            }
          }
        }
        // Set large heading size
        &.headline--large {
          font-size: $h4-font-size;
          font-size: containerClamp(1.2rem, 1.6rem);
        }
        // Set medium heading size
        &.headline--medium {
          font-size: 1.4rem;
          font-size: containerClamp(1.2rem, 1.4rem);
        }
        // Set small heading size
        &.headline--small {
          font-size: $h5-font-size;
        }
      }
    
      &__stacked {
        &[class*="banner--gradient-dark"] {
          .banner__pre-title.headline--highlight span {
            color: $secondary;
    
            [class*="bg--black"] & {
              color: #fff;
            }
            @include breakpoint(sm) {
              color: #fff;
              text-shadow: 0 1px 1px #000;
            }
          }
        }
      }
    
    // --------------------------------
    // Text & Content
    // --------------------------------
    
      &__content {
        padding: $gutter;
        @include breakpoint(sm) {
          padding: 2rem 0;
        }
    
        > * {
          flex-basis: 100%;
        }
        @include breakpoint(page-container) {
          padding: 2rem 0 $gutter;
        }
      }
    
      &__text {
        z-index: 1;
        color: #fff;
    
        blockquote {
          margin-left: 0;
        }
    
        a {
          color: #fff;
        }
    
        p {
          line-height: 1.5;
          margin-top: 0;
          color: #fff;
          text-shadow: 0 1px 1px #000;
          @include breakpoint(sm) {
            color: #fff;
            text-shadow: 0 1px 1px #000;
          }
    
          a {
            position: relative;
            z-index: 1;
            color: #fff;
          }
        }
      }
      // bg color overrides
      &[class*="banner--gradient-dark"]:not([class*="bg-"]):not([class*="banner--stacked"]) {
        .banner__text a {
          [class*="bg--gray"] &,
          [class*="bg--gold"] &,
          [class*="bg--white"] & {
            color: #fff;
          }
        }
      }
    
      &[class*="bg--black"] {
        .banner__text p {
          color: #fff;
        }
      }
    
      &[class*="banner--gradient-light"]:not([class*="bg-"]) {
        .banner__text {
          blockquote {
            [class*="bg--gold"] & {
              border-left-color: $primary;
            }
          }
        }
      }
    
      &[class*="bg--gray"] {
        .banner__text {
          color: $secondary;
    
          a {
            color: $secondary;
          }
    
          p {
            color: $secondary;
            font-weight: normal;
            text-shadow: none;
    
            a {
              color: $secondary;
            }
          }
        }
      }
    
      &[class*="bg--gold"],
      &[class*="bg--white"],
      &[class*="banner--gradient-light"]:not([class*="bg-"]) {
        .banner__text {
          color: $secondary;
    
          p {
            color: $secondary;
            font-weight: normal;
            text-shadow: none;
    
            a {
              color: $secondary;
            }
          }
    
          a {
            color: $secondary;
          }
        }
    
        &.banner--stacked:not([class*="bg-"]) {
          [class*="bg--black"] & {
            .banner__text {
              color: #fff;
              @include breakpoint(sm) {
                color: $secondary;
              }
    
              a {
                color: #fff;
                @include breakpoint(sm) {
                  color: $secondary;
                }
              }
    
              p {
                color: #fff;
                @include breakpoint(sm) {
                  color: $secondary;
                }
    
                a {
                  color: #fff;
                  @include breakpoint(sm) {
                    color: $secondary;
                  }
                }
              }
            }
          }
        }
      }
    
      &--stacked {
    
        .banner__text {
          color: $secondary;
          @include breakpoint(sm) {
            color: #fff;
          }
    
          a {
            color: $secondary;
            @include breakpoint(sm) {
              color: #fff;
            }
          }
        }
    
        &[class*="banner--gradient-dark"] {
          &:not([class*="bg--"]) {
            .banner__text {
              p {
                [class*="bg--black"] & {
                  color: #fff;
                }
                color: $secondary;
                text-shadow: none;
                @include breakpoint(sm) {
                  color: #fff;
                  text-shadow: 0 1px 1px #000;
                }
    
                a {
                  color: $secondary;
                  @include breakpoint(sm) {
                    color: #fff;
                  }
    
                  [class*="bg--black"] & {
                    color: #fff;
                  }
                }
              }
            }
          }
        }
    
        &[class*="banner--gradient-light"]:not([class*="bg--"]) {
          .banner__text {
            [class*="bg--gold"] & {
              blockquote {
                border-left-color: #fff;
                @include breakpoint(sm) {
                  border-left-color: $primary;
                }
              }
            }
          }
        }
    
        &[class*="banner--gradient-light"]:not([class*="bg--black"]) {
          .banner__text {
            [class*="bg--gold"] & {
              p {
                color: $secondary;
    
                a {
                  color: $secondary;
                }
              }
            }
          }
        }
    
        &[class*="bg--black"] {
          display: flex;
          .banner__text {
            color: #fff;
    
            a {
              color: #fff;
            }
    
            p {
              color: #fff;
    
              a {
                color: #fff;
              }
            }
          }
        }
    
        [class*="bg--black"] & {
          .banner__text {
            color: #fff;
    
            a {
              color: #fff;
            }
          }
        }
    
        &[class*="bg--white"],
        &[class*="bg--gray"],
        &[class*="bg--gold"] {
          [class*="bg--black"] & {
            .banner__text {
              color: $secondary;
    
              a {
                color: $secondary;
              }
    
              p {
                color: $secondary;
    
                a {
                  color: $secondary;
                }
              }
            }
          }
        }
      }
    
    // --------------------------------
    // Image
    // --------------------------------
    
      &__image {
        overflow: visible;
    
        img {
          display: block;
          width: 100%;
          -o-object-fit: cover;
          object-fit: cover;
          position: absolute;
          height: 100%;
          top: 0;
        }
      }
    
      &--stacked {
        .banner__image {
          img {
            position: relative;
            @include breakpoint(sm) {
              position: absolute;
            }
          }
        }
      }
    
    // --------------------------------
    // Video
    // --------------------------------
    
      .media--video .video-controls {
        z-index: 2;
      }
    
      .media--video {
        height: 100%;
        width: 100%;
        top: 0;
        position: absolute;
    
        video {
          overflow: visible;
          display: block;
          width: 100%;
          -o-object-fit: cover;
          object-fit: cover;
          height: 100%;
          top: 0;
          @include breakpoint(sm) {
            position: absolute;
          }
        }
      }
    
      .media--video {
        //position: relative;
        .video-controls {
          position: absolute;
          left: 1.25rem;
          bottom: 1.25rem;
          @include breakpoint(page-container) {
            left: 3rem;
            bottom: 3rem;
          }
    
          .banner--horizontal-left.banner--vertical-bottom & {
            @include breakpoint(page-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;
          }
        }
      }
    
      &[class*="banner--gradient-light"] {
        .media--video .video-btn {
          border: 1px solid $secondary;
        }
      }
    
      &--stacked {
        .media--video {
          position: relative;
          @include breakpoint(sm) {
            position: absolute;
          }
    
          .video-btn {
            display: block;
          }
        }
      }
      // Bottom/Left Video button alignment
      &.banner--horizontal-left.banner--vertical-bottom {
        .media--video + .banner__container .banner__content {
          @include breakpoint(sm) {
            padding-bottom: 4.25rem;
          }
        }
      }
    
    // --------------------------------
    // Stacked
    // --------------------------------
    
      &--stacked {
        display: block;
        @include breakpoint(sm) {
          display: flex;
        }
      }
    
    // --------------------------------
    // Gradients
    // --------------------------------
    
      // Default overlay
      &:after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        will-change: opacity;
      }
    
      &.banner--gradient-dark:not([class*="bg-"]) {
        @include breakpoint(sm) {
          background: $secondary;
        }
    
        &:not([class*="banner--stacked"]) {
          background: $secondary;
        }
      }
    
      &--gradient-left {
        &[class*="banner--stacked"] {
          &:after {
            background: none;
            width: auto;
            height: auto;
            @include breakpoint(sm) {
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, rgba(0, 0, 0, .86) 0, rgba(0, 0, 0, .23) 65%, transparent);
            }
          }
        }
    
        &:after {
          background: rgba(0, 0, 0, .5);
          @include breakpoint(sm) {
            background: linear-gradient(90deg, rgba(0, 0, 0, .86) 0, rgba(0, 0, 0, .23) 65%, transparent);
          }
        }
    
        &.banner--gradient-light {
          &[class*="banner--stacked"] {
            &:after {
              background: none;
              width: auto;
              height: auto;
              @include breakpoint(sm) {
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, #fff 1%, hsla(0, 0%, 100%, .92) 32%, hsla(0, 0%, 100%, 0));
              }
            }
          }
    
          &:after {
            background: rgba(255, 255, 255, .8);
            @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 {
        &[class*="banner--stacked"] {
          &:after {
            background: none;
            width: auto;
            height: auto;
            @include breakpoint(sm) {
              width: 100%;
              height: 100%;
              background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 70%);
            }
          }
        }
    
        &:after {
          background: rgba(0, 0, 0, .5);
          @include breakpoint(sm) {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 70%);
          }
        }
    
        &.banner--gradient-light {
          &[class*="banner--stacked"] {
            &:after {
              background: none;
              width: auto;
              height: auto;
              @include breakpoint(sm) {
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, transparent 0, hsla(0, 0%, 100%, .9) 55%);
              }
            }
          }
    
          &:after {
            background: rgba(255, 255, 255, .8);
            @include breakpoint(sm) {
              background: linear-gradient(180deg, transparent 0, hsla(0, 0%, 100%, .9) 55%);
            }
          }
    
          &[class*="bg-"]:after {
            background: none;
          }
        }
      }
    
      &--transparent {
        &:after {
          background: none;
        }
      }
    
      &[class*="bg-"]:after {
        background: inherit;
      }
    
    // --------------------------------
    // Headlines
    // --------------------------------
    
      .headline {
        z-index: 1;
    
        a {
          &:hover {
            text-decoration: none;
          }
    
          &:focus {
            text-decoration: underline;
          }
        }
        margin-top: 0;
        margin-bottom: 1rem;
      }
    
      .headline--negative {
        color: #fff;
        text-shadow: 0 1px 1px #000;
        @include breakpoint(sm) {
          color: #fff;
        }
    
        a {
          //color: $secondary;
          @include breakpoint(sm) {
            color: #fff;
          }
        }
      }
      // Overriding the serif font size set in typography/headings.scss
      :where(h2, h3, h4, h5, h6) {
        &.headline--large,
        &.headline--large.headline--serif {
          font-size: 4.7rem;
          font-size: containerClamp(2.5rem, 4.7rem);
        }
        // Set medium heading size
        &.headline--medium,
        &.headline--medium.headline--serif {
          font-size: 3.7rem;
          font-size: containerClamp(2.2rem, 3.7rem);
        }
        // Set small heading size
        &.headline--small,
        &.headline--small.headline--serif {
          font-size: 2.7rem;
          font-size: containerClamp(2rem, 2.7rem);
        }
      }
    
      &--stacked {
        &[class*="banner--gradient-dark"][class*="bg--black"] {
          .headline--negative {
            color: #fff;
          }
        }
    
        &[class*="banner--gradient-dark"][class*="bg--gray"],
        &[class*="banner--gradient-dark"][class*="bg--white"] {
          .headline--negative,
          .headline--negative.headline--uppercase {
            [class*="bg--black"] & {
              color: $secondary;
              text-shadow: none;
    
              a {
                color: $secondary;
                text-shadow: none;
              }
            }
          }
        }
        &[class*="banner--gradient-dark"] {
          .headline--negative {
            color: $secondary;
            text-shadow: none;
            @include breakpoint(sm) {
              color: #fff;
              text-shadow: 0 1px 1px #000;
            }
    
            a {
              color: $secondary;
              @include breakpoint(sm) {
                color: #fff;
              }
            }
    
            [class*="bg--black"] & {
              color: #fff;
              text-shadow: 0 1px 1px #000;
              @include breakpoint(sm) {
                color: #fff;
              }
    
              a {
                color: #fff;
                @include breakpoint(sm) {
                  color: #fff;
                }
              }
            }
          }
        }
      }
    
      &[class*="bg--gray"] {
        .headline--negative {
          color: $secondary;
          text-shadow: none;
    
          a {
            color: $secondary;
          }
        }
      }
    
      &[class*="bg--black"] {
        .headline--negative {
          a {
            color: #fff;
          }
        }
      }
    
      &[class*="bg--gold"],
      &[class*="bg--white"],
      &[class*="banner--gradient-light"]:not([class*="bg-"]) {
        .headline.headline--negative {
          color: $secondary;
          text-shadow: none;
    
          a {
            color: $secondary;
          }
        }
    
        &.banner--stacked:not([class*="bg-"]) {
          [class*="bg--black"] & {
            .headline.headline--negative {
              color: #fff;
              @include breakpoint(sm) {
                color: $secondary;
              }
    
              a {
                color: #fff;
                @include breakpoint(sm) {
                  color: $secondary;
                }
              }
            }
          }
        }
      }
    
    }
    // --------------------------------
    // 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 .media--video,
      .banner__image img {
        left: 0;
      }
    
      .banner .banner__container {
        min-height: 18rem;
      }
    
      .banner.banner--large .banner__container {
        @include breakpoint(sm) {
          min-height: 33rem;
        }
        @include breakpoint(md) {
          min-height: 48rem;
        }
      }
    
      .banner.banner--medium .banner__container {
        @include breakpoint(sm) {
          min-height: 33rem;
        }
      }
    }
    
    // set link color for gray and white nesting.
    [class*="bg--gray"] [class*="banner--gradient-dark"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
    [class*="bg--white"] [class*="banner--gradient-dark"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
      color: inherit;
    }
    
  • URL: /components/raw/banner/banner.scss
  • Filesystem Path: src/components/banner/banner.scss
  • Size: 20.6 KB