<div class="teaser teaser--cover">
<a href="http://www.example.com" class="block-link">
<div class="teaser__image">
<img src="https://magicyeti.us/2000/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
<div class="teaser__content">
<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>
</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": null,
"link": {
"url": "http://www.example.com",
"title": "Teaser"
},
"variant": "teaser--cover",
"image": {
"ratio": "2:1",
"width": 2000,
"alt": "Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
}
}
}
.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;
}
}
}
}
There are no notes for this item.