There's a new version of UIDS!

UIDS - UI Design System

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: Medium, content centered

Component Preview 
<div class="banner banner--gradient-bottom banner--gradient-dark banner--medium banner--stacked banner--vertical-center banner--horizontal-center 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--medium banner__pre-title">
                        <span class="headline__text">University of Iowa</span>
                    </div>
                    <h2 class="headline headline--serif headline headline--negative headline--medium">
                        <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: var(--brand-secondary); } }
  @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: var(--brand-secondary); } }
      [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: var(--brand-secondary); }
        @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: var(--brand-secondary); }
    .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: var(--brand-secondary); }
    [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: var(--brand-primary); }
  .banner[class*="bg--gray"] .banner__text {
    color: var(--brand-secondary); }
    .banner[class*="bg--gray"] .banner__text a {
      color: var(--brand-secondary); }
    .banner[class*="bg--gray"] .banner__text p {
      color: var(--brand-secondary);
      font-weight: normal;
      text-shadow: none; }
      .banner[class*="bg--gray"] .banner__text p a {
        color: var(--brand-secondary); }
  .banner[class*="bg--gold"] .banner__text, .banner[class*="bg--white"] .banner__text, .banner[class*="banner--gradient-light"]:not([class*="bg-"]) .banner__text {
    color: var(--brand-secondary); }
    .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: var(--brand-secondary);
      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: var(--brand-secondary); }
    .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: var(--brand-secondary); }
  [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: var(--brand-secondary); } }
    [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: var(--brand-secondary); } }
    [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: var(--brand-secondary); } }
      [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: var(--brand-secondary); } }
  .banner--stacked .banner__text {
    color: var(--brand-secondary); }
    @media (min-width: 768px) {
      .banner--stacked .banner__text {
        color: #fff; } }
    .banner--stacked .banner__text a {
      color: var(--brand-secondary); }
      @media (min-width: 768px) {
        .banner--stacked .banner__text a {
          color: #fff; } }
  .banner--stacked[class*="banner--gradient-dark"]:not([class*="bg--"]) .banner__text p {
    color: var(--brand-secondary);
    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: var(--brand-secondary); }
      @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: var(--brand-primary); } }
  [class*="bg--gold"] .banner--stacked[class*="banner--gradient-light"]:not([class*="bg--black"]) .banner__text p {
    color: var(--brand-secondary); }
    [class*="bg--gold"] .banner--stacked[class*="banner--gradient-light"]:not([class*="bg--black"]) .banner__text p a {
      color: var(--brand-secondary); }
  .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: var(--brand-secondary); }
    [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: var(--brand-secondary); }
    [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: var(--brand-secondary); }
      [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: var(--brand-secondary); }
  .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: var(--brand-secondary);
    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 var(--brand-secondary); }
  .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: var(--brand-secondary); } }
  .banner.banner--gradient-dark:not([class*="bg-"]):not([class*="banner--stacked"]) {
    background: var(--brand-secondary); }
  .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: var(--brand-secondary);
    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: var(--brand-secondary);
      text-shadow: none; }
  .banner--stacked[class*="banner--gradient-dark"] .headline--negative {
    color: var(--brand-secondary);
    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: var(--brand-secondary); }
      @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: var(--brand-secondary);
    text-shadow: none; }
    .banner[class*="bg--gray"] .headline--negative a {
      color: var(--brand-secondary); }
  .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: var(--brand-secondary);
    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: var(--brand-secondary); }
  [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: var(--brand-secondary); } }
    [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: var(--brand-secondary); } }

@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: 29.1 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