<div class="teaser ">
    <a href="http://www.example.com" class="block-link">
        <div class="teaser__content">
            <div class="content-meta">
                <time datetime="2023-08-24" class="">
        August 24, 2023
    </time>
                <span class="taxonomy">Taxonomy Tag</span>

            </div>
            <div class="headline-group teaser__headline-group">

                <span class="headline-group__head">This the teaser headline, which can often be somewhat long, detailed, and wordy</span>

            </div>

            <p class="">
                This is customizable read-more text for this story
            </p>
        </div>
    </a>
</div>
{% if teaser is not empty %}
<div class="teaser {{ teaser.variant }}">
  <a href="{{ teaser.link.url }}" class="block-link">
    {% if teaser.icon is not empty %}
      <div class="teaser__icon">
        {% include '@icon' with { icon: teaser.icon } %}
      </div>
    {% endif %}
    {% if teaser.image is not empty %}
      <div class="teaser__image">
        {% include '@image' with { image: teaser.image } %}
      </div>
    {% endif %}
    <div class="teaser__content">
      {% block teaser_content %}
        {% include '@content-meta' with { content_meta: teaser.content_meta } %}
        {% include '@event-meta' with { event_meta: teaser.event_meta } %}
        {% include '@headline-group' with { hg: teaser.hg } %}
        {% include '@p' with { p: teaser.p } %}
        {% include '@p' with { p: teaser.read_more } %}
      {% endblock %}
    </div>
  </a>
</div>
{% endif %}
{
  "teaser": {
    "hg": {
      "headline": "This the teaser headline, which can often be somewhat long, detailed, and wordy",
      "tag": "div",
      "variant": "teaser__headline-group"
    },
    "content_meta": {
      "taxonomy": {
        "tag": "Taxonomy Tag"
      },
      "datetime": {
        "date": "now",
        "format": "F d, Y",
        "machine": "Y-m-d"
      }
    },
    "link": {
      "url": "http://www.example.com",
      "title": "Teaser"
    },
    "read_more": {
      "content": "This is customizable read-more text for this story"
    }
  }
}
  • Content:
    .teaser {
      .teaser__image {
        margin-bottom: rr-gridbase(2);
      }
    
      .teaser__icon {
        margin-bottom: rr-gridbase(2);
    
        .icon__glyph {
          font-size: 2.8125rem;
          color: color(gray-darker);
        }
        
        .icon__label {
          position: absolute;
          width: 0;
          color: rgba(0, 0, 0, 0);
        }
      }
    
      .content-meta,
      .event-meta,
      .headline-group .headline-group__super {
        // @include rr-font-compute(s, tight);
        font-size: 1rem;
        line-height: 1.45rem;
        text-transform: uppercase;
        font-family: $font-rubik;
        font-weight: $rubik-heavier-weight;
        color: color(gray-dark);
        margin-bottom: rem(16px);
        .daterange__time,
        .taxonomy {
          font-weight: normal;
          font-style: normal;
          display: block;
          color: color(gray-dark);
        }
        .taxonomy {
          a {
            @include underline-link;
          }
        }
      }
    
      .event-meta {
        flex: 0 0 auto;
      }
      .headline-group {
        flex: 0 1 auto;
      }
    
      .headline-group {
        .headline-group__head {
          @include link-fancy;
          color: color(dark-teal);
        }
      }
    
      .block-link {
        &:hover,
        &:active {
          .headline-group {
            .headline-group__head {
              @include link-fancy-hover;
            }
          }
        }
      }
    
      &.teaser--video {
        .teaser__image {
          position: relative;
          &:before,
          &:after {
            display: inline-block;
            content: '';
            position: absolute;
          }
          &:after {
            bottom: 0;
            right: 0;
            background-color: color(davidson-red);
            width: rem(40px);
            height: rem(40px);
            z-index: 1;
          }
          &:before {
            bottom: rem(10px);
            right: rem(14px);
            width: 0;
            height: 0;
            border-top: rem(10px) solid transparent;
            border-bottom: rem(10px) solid transparent;
            border-left: rem(10px) solid color(davidson-white);
            z-index: 2;
          }
        }
      }
    
      &.teaser--archive {
        border-bottom: color(gray-light) 1px solid;
        padding-bottom: rr-gridbase(1);
        display: flex;
        flex-flow: row wrap;
        @include rr-break-directive(m) {
          flex-flow: row nowrap;
        }
        &:first-child {
          border-top: color(gray-light) 1px solid;
          padding-top: rr-gridbase(4);
        }
        .block-link {
          display: flex;
          flex-flow: row wrap;
          width: 100%;
          @include rr-break-directive(m) {
            flex-flow: row nowrap;
          }
        }
        .teaser__content {
          flex: 0 1 100%;
          order: 1;
          @include rr-break-directive(m) {
            flex: 1 1 auto;
          }
        }
        .teaser__image {
          order: 2;
          flex: 0 1 100%;
          @include rr-break-directive(m) {
            margin-left: rr-gridbase(3);
            flex: 0 0 25%;
          }
        }
      }
    
      &.teaser--top-stroke {
        .block-link {
          @include block-top-stroke;
          display: block;
          transition: border-color $transition-time $transition-easing;
          &:hover,
          &:active {
            border-top-color: color(bright-yellow);
          }
    
          .teaser__content {
            margin-top: rr-gridbase(3);
          }
        }
      }
    
      &.teaser--card {
        @include teaser-card;
      }
    
      &.teaser--event-card {
        @include teaser-event-card;
      }
    
      &.teaser--cover {
        position: relative;
        margin-bottom: rr-gridbase(6);
        @include rr-break-directive(l) {
          margin-bottom: rr-gridbase(10);
        }
        .teaser__content {
          background: color(davidson-black);
          color: color(davidson-white);
          padding: rr-gridbase(4);
          @include rr-break-directive(l) {
            box-sizing: border-box;
            position: absolute;
            top: auto;
            right: 0;
            bottom: 0;
            left: auto;
            margin: 0;
            background: rgba(#000, 0.8);
            max-width: 50%;
            padding: rr-gridbase(6) rr-gridbase(8);
          }
    
          & > * {
            @include rr-break-directive(l) {
              margin-right: 20%;
            }
          }
    
          .headline-group {
            .headline-group__head {
              color: color(davidson-white);
              font-weight: normal;
              font-family: $font-nunito;
              @include rr-font-compute(3xl, tight);
              &::after {
                display: none;
              }
            }
          }
    
          .teaser__read-more {
            padding: rr-gridbase(3);
            background: color(davidson-red);
            text-transform: uppercase;
            font-family: $font-rubik;
            font-weight: $rubik-heavier-weight;
            @include rr-font-compute(xl, tight);
            transition: color $transition-time $transition-easing;
            margin-top: rr-gridbase(4);
            margin-right: -(rr-gridbase(6));
            margin-left: -(rr-gridbase(6));
            margin-bottom: -(rr-gridbase(8));
    
            @include rr-break-directive(l) {
              box-sizing: border-box;
              position: absolute;
              top: 100%;
              left: 0;
              width: 100%;
              margin: 0;
            }
    
            @include rr-break-directive(l) {
              padding: rr-gridbase(3) rr-gridbase(8);
            }
    
            &:after {
              font-family: iconfont;
              font-size: .7em;
              content: $icon-angle-right;
              margin-left: 0.3em;
            }
          }
        }
    
        .block-link {
          &:hover,
          &:active {
            .headline-group {
              .headline-group__head {
                color: color(davidson-red);
                // background-color: transparent;
              }
            }
            .teaser__read-more {
              color: color(bright-yellow);
            }
          }
        }
    
        .teaser__image {
          margin-bottom: 0;
        }
      }
    
      &.teaser--experience {
        background-color: color(davidson-white);
        .teaser__content {
          padding: rr-gridbase(3);
        }
        .teaser__image {
          margin-bottom: 0;
        }
        .content-meta,
        .event-meta,
        .headline-group__super {
          font-weight: $rubik-heavier-weight;
          position: relative;
          margin-bottom: rr-gridbase(3);
          padding-bottom: rr-gridbase(1.5);
          .taxonomy {
            font-weight: $rubik-heavier-weight;
          }
          &:after {
            display: inline-block;
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: rem(30px);
            height: rem(2px);
            background-color: color(bright-yellow);
          }
        }
    
        .headline-group .headline-group__head {
          &:after {
            display: none;
          }
        }
    
        &.teaser--experience-gray {
          @include autoscheme($background-color: color(gray-lightest));
        }
    
        &[class*="teaser--experience-overlay"] {
          position: relative;
          overflow: hidden;
          @include autoscheme($background-color: color(davidson-black));
    
          // overlays are square
          &:after {
            content: "";
            display: block;
            padding-bottom: 100%;
          }
    
          .teaser__image {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: 0;
            z-index: 1;
            opacity: 0.32;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            img {
              display: none;
            }
          }
          .teaser__content {
            position: absolute;
            z-index: 2;
            .content-meta,
            .event-meta {
              .daterange__time,
              .taxonomy {
                color: color(gray-light);
                &:before {
                  background-color: color(gray-light);
                }
              }
            }
            .headline-group {
              .headline-group__head {
                color: color(davidson-white);
              }
            }
          }
    
          .block-link {
            &:hover,
            &:active {
              color: color(davidson-white);
              .headline-group {
                .headline-group__head {
                  // color: color(davidson-red);
                  background-color: $fancy-on-dark-highlight;
                }
              }
            }
          }
        }
    
        &.teaser--experience-overlay-red {
          @include autoscheme($background-color: color(davidson-red));
        }
    
        &.teaser--experience-overlay-blue {
          @include autoscheme($background-color: color(dark-teal));
        }
    
      }
    }
    
    // unstack meta when teasers are in a wide/one-per-row format
    .grid.grid--xlarge {
      .teaser {
        @include teaser-meta-wide;
      }
    }
    
    
    // animate yellow line on card and experience styles
    .teaser.teaser--card,
    .teaser.teaser--experience {
      .content-meta,
      .event-meta,
      .headline-group__super {
        &:after {
          transition: width $transition-time $transition-easing;
        }
      }
      .block-link {
        &:hover,
        &:active {
          .content-meta,
          .event-meta,
          .headline-group__super {
            &:after {
              width: rem(50px);
            }
          }
        }
      }
    }
    
    // special cases where teasers should have larger headline text, strokes, etc
    .paragraph--type--custom-teasers {
      .teaser {
        .block-link {
          .teaser__image {
            @include block-top-stroke;
            transition: border-color $transition-time $transition-easing;
          }
          &:hover,
          &:active {
            .teaser__image {
              border-top-color: color(bright-yellow);
            }
          }
        }
      }
    }
    :not(.with-sidebar) .paragraph--type--custom-teasers,
    .collection--archive {
      .teaser {
        .headline-group {
          .headline-group__head {
            font-size: 1.5rem;
            line-height: 1.75rem;
          }
        }
      }
    }
  • URL: /components/raw/teaser/teaser.scss
  • Filesystem Path: patterns/molecules/blocks/teaser/teaser.scss
  • Size: 9.3 KB

There are no notes for this item.