TEASER-SINGLE (Teaser Module )
src/app/shared/components/teaser-single/templates
Demo Section
Each variation will be presented in the following section.
Readme
teaserSingle (component)
Description
The teaser module serves as the template for teaser component variants:
- Default-Teaser (background-color: dark gray)
- Event-Teaser (background-color: dark gray)
- News-Teaser (background-color: dark gray)
- External Link-Teaser (background-color: dark gray)
- Socialmedia-Teaser (background-color: dark blue)
JIRA
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/teaser-single
Fields
teaser-single.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.teaserSingleClasses | String | '' |
Modifier classes for component |
| settings.teaserSingleContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.teaserSingleField | String | Please add a description |
| content.headlineAddInfo | String | Additional Text information for the Icons for Instagram, Facebook, Twitter - used in the social media teaser |
teaser-single__date.hbs
Settings
| Parameter | Type | Default | Description |
|---|
Content
| Parameter | Type | Description |
|---|
teaser-single__image.hbs
Settings
| Parameter | Type | Default | Description |
|---|
Content
| Parameter | Type | Description |
|---|
teaser-single__news.hbs
Settings
| Parameter | Type | Default | Description |
|---|
Content
| Parameter | Type | Description |
|---|
SASS
Modifier Classes
You can add the following modifiers to teaser-single:
| Modifier | Description |
|---|---|
| is-image | This will add an image to the teaser used in the social media teaser |
You can add the following modifiers to the headline teaser-single__headline:
| Modifier | Description |
|---|---|
| is-instagram | This will add the instagram icon to the headline. Used in the social media teaser |
| is-facebook | This will add the facebook icon to the headline. Used in the social media teaser |
| is-twitter | This will add the twitter icon to the headline. Used in the social media teaser |
You can add the following modifiers to the button teaser-single__link:
| Modifier | Description |
|---|---|
| is-video | This will add a video icon to the link. Used in the video teaser |
| is-external | This will add an external icon to the link. Used in the external teaser |
Templates
teaser-single.hbs
<article class="c-teaser-single{{#if settings.teaserSingleContextClass}}--{{settings.teaserSingleContextClass}}{{else}}--default{{/if}}{{#if settings.teaserSingleClasses}} {{settings.teaserSingleClasses}}{{/if}}"
data-css="c-teaser-single" {{#is settings.teaserSingleContextClass "video"}} data-js-module="overlay-handler" {{/is}}>
{{#if settings.teaserSingleClasses}}
{{#is settings.teaserSingleClasses "is-image"}}
<div class="teaser-single__instagram-area">
{{/is}}
{{/if}}
{{#if content.figure}}
{{> teaser-single__image}}
{{/if}}
<div class="teaser-single__text-section">
{{#if content.dates}}
{{> teaser-single__date}}
{{/if}}
{{#if content.newstitle}}
{{> teaser-single__news}}
{{/if}}
<h3 class="teaser-single__headline{{#if content.headlineClasses}} {{content.headlineClasses}}{{/if}}">
{{#if content.headlineAddInfo}}<span class="is-aural">{{content.headlineAddInfo}}</span>{{/if}}{{content.headline}}
</h3>
{{#if content.text}}<p class="teaser-single__text">{{content.text}}</p>{{/if}}
{{#if content.text2}}<p class="teaser-single__text">{{content.text2}}</p>{{/if}}
</div>
{{#is settings.teaserSingleContextClass "video"}}
<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta"
data-content='{ {{#unless settings.youtubeId}}"video": { "videoPoster": "http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg", "videoMp4": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", "videoWebm": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"}, "caption": {"captionHeadline":"HTML5 Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "4:00 Min."}, {"text": "25.03.2018"}, {"text": "@motionworks"}, {"link": {"linkText": "Interner Link zu einer Detailseite", "href": "#", "type": "internal"}}]} {{else}}"youtube": {"id": "{{settings.youtubeId}}","format": "16_9"}, "caption": {"captionHeadline":"Youtube Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}{{/unless}} }'
class="teaser-single__link{{#if content.linkClasses}} {{content.linkClasses}}{{/if}}" {{#if settings.linkExternal}}
target="_blank" title="Link öffnet im neuen Fenster" {{/if}}>
{{else}}
<a class="teaser-single__link{{#if content.linkClasses}} {{content.linkClasses}}{{/if}}" href="{{content.linkHref}}"
{{#if settings.linkExternal}} target="_blank" title="Link öffnet im neuen Fenster" {{/if}}>
{{/is}}
{{content.linkText}}
{{#is settings.teaserSingleContextClass "video"}}
</button>
{{else}}
</a>
{{/is}}
{{#is settings.teaserSingleContextClass "video"}}
<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta"
data-content='{ {{#unless settings.youtubeId}}"video": { "videoPoster": "http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg", "videoMp4": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", "videoWebm": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"}, "caption": {"captionHeadline":"HTML5 Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "4:00 Min."}, {"text": "25.03.2018"}, {"text": "@motionworks"}, {"link": {"linkText": "Interner Link zu einer Detailseite", "href": "#", "type": "internal"}}]} {{else}}"youtube": {"id": "{{settings.youtubeId}}","format": "16_9"}, "caption": {"captionHeadline":"YouTube Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}{{/unless}} }'
class="teaser-single__a11y-clickarea" {{#if settings.linkExternal}} target="_blank" title="Link öffnet im neuen Fenster"
{{/if}} aria-hidden="true" tabindex="-1">
{{else}}
<a href="{{content.linkHref}}" class="teaser-single__a11y-clickarea" {{#if settings.linkExternal}} target="_blank"
title="Link öffnet im neuen Fenster" {{/if}} aria-hidden="true" tabindex="-1">
{{/is}}
{{#is settings.teaserSingleContextClass "video"}}
</button>
{{else}}
</a>
{{/is}}
{{#if settings.teaserSingleClasses}}
{{#is settings.teaserSingleClasses "is-image"}}
</div>
{{/is}}
{{/if}}
</article>
teaser-single__date.hbs
<div class="teaser-single__dates">
{{#each content.dates}}
{{#if @last}}
{{#unless @first}}
<div class="teaser-single__date is-connector">
<abbr aria-label="bis" title="bis" class="teaser-single__date-connect">—</abbr>
</div>
{{/unless}}
{{/if}}
<div class="teaser-single__date">
<span aria-label="{{dateDay}}" class="teaser-single__date-day">{{dateDay}}</span>
<abbr aria-label="{{dateMonth}}" title="{{dateMonth}}" class="teaser-single__date-month">{{dateMonthAbbr}}</abbr>
</div>
{{/each}}
</div>
teaser-single__image.hbs
<div class="teaser-single__image-section">
{{#with content.figure}}
{{> figure}}
{{/with}}
</div>
teaser-single__news.hbs
<div class="teaser-single__news">
<div class="teaser-single__news-text">{{content.newstitle}}</div>
</div>
Data File
teaser-single.hjson
{
"title": "Teaser Single",
"variations": {
"default": {
"docs": {
"variationName": "Default",
"onBG": "dark"
},
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
},
"download": {
"docs": {
"variationName": "Download",
"onBG": "dark"
},
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Download",
"linkClasses": "is-download"
}
},
"event": {
"docs": {
"variationName": "Event",
"onBG": "dark"
},
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": false
},
"content": {
"headline": "Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich",
"type": "Event",
"linkHref": "#",
"linkText": "Weiterlesen",
"dates": [
{
"dateDay": "24",
"dateMonth": "Januar",
"dateMonthAbbr": "Jan"
},
{
"dateDay": "27",
"dateMonth": "Januar",
"dateMonthAbbr": "Jan"
}
]
}
},
"video": {
"docs": {
"variationName": "Video",
"onBG": "dark"
},
"settings": {
"teaserSingleContextClass": "video",
"teaserSingleClasses": false,
"youtubeId": "z8lE3UTfG8s"
},
"content": {
"headline": "360 Grad Campus Tour",
"linkHref": "#",
"linkClasses": "is-video",
"linkText": "Video ansehen"
}
},
"instagram": {
"docs": {
"variationName": "Social Instagram",
"onBG": "blue"
},
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": "is-image"
},
"content": {
"headline": "@lmu.muenchen",
"headlineClasses": "is-instagram",
"linkHref": "#",
"linkText": "Weiterlesen",
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "teaser-single",
"figureJsModule": true
},
"content": {
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://via.placeholder.com/40x40",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://via.placeholder.com/300x300",
"imageWidth": "300w"
},
{
"src": "https://via.placeholder.com/600x600",
"imageWidth": "600w"
},
{
"src": "https://via.placeholder.com/1200x1200",
"imageWidth": "1200w"
}
],
"media": "(min-width: 768px)",
"sizes": [
{
"screenWidth": "(min-width: 768px)",
"imageWidth": "41.66667%"
},
{
"screenWidth": "(min-width:1024px)",
"imageWidth": "33.33333%"
},
{
"screenWidth": "(max-width: 1280px)",
"imageWidth": "25%"
},
{
"screenWidth": "",
"imageWidth": "calc(100% - ((100% / 14) * 2))"
}
]
},
{
"srcset": [
{
"src": "https://via.placeholder.com/600x300",
"imageWidth": "600w"
},
{
"src": "https://via.placeholder.com/1200x600",
"imageWidth": "1200w"
}
],
"media": "(max-width: 767px)",
"sizes": [
{
"screenWidth": "",
"imageWidth": "calc(100% - ((100% / 14) * 2))"
}
]
}
]
}
}
}
}
}
},
"facebook": {
"docs": {
"variationName": "Social Facebook",
"onBG": "blue"
},
"settings": {
"teaserSingleContextClass": "default"
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"headlineClasses": "is-facebook",
"text": "Lorem ipsum dolor sit amet",
"linkHref": "#",
"linkText": "Weiterlesen"
}
},
"twitter": {
"docs": {
"variationName": "Social Twitter",
"onBG": "blue"
},
"settings": {
"teaserSingleContextClass": "default"
},
"content": {
"headline": "@LMU_Muenchen",
"headlineClasses": "is-twitter",
"text": "Twitter Teaser Box http://bit.ly/2djw39u",
"text2": "#LMU",
"linkHref": "#",
"linkText": "Weiterlesen"
}
},
"news": {
"docs": {
"variationName": "News",
"onBG": "dark"
},
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": false
},
"content": {
"headline": "Wissenschaft Macht Politik: Die Münchener Räterepublik",
"type": "Event",
"linkHref": "#",
"linkText": "Weiterlesen",
"newstitle": "News"
}
}
}
}
Styles
teaser-single.scss
/* ===================================================
component: teaser-single
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-teaser-single"] {
position: relative;
display: flex;
width: 100%;
min-height: 100%;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
background-color: rgba($color-white, 0);
transition: background-color $animation-duration-std $animation-easing-std;
@include bp($bp-tablet-p) {
padding: 20px;
}
@include bp($bp-tablet-l) {
padding: 20px;
}
@include bp($bp-desktop-m) {
padding: 30px;
}
@include print() {
border: 1px solid $color-gray-border;
}
&:hover {
background-color: rgba($color-white, 1);
cursor: pointer;
&::before {
border-color: $color-green;
}
.teaser-single__type,
.teaser-single__headline {
color: $color-green;
.is-bg-light & {
color: $color-green;
}
&.is-instagram {
&::before {
@include pseudo();
@include sprites-icon-instagram-small-green();
position: relative;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
top: -2px;
@include bp($bp-tablet-l) {
@include sprites-icon-instagram-green();
margin-right: 10px;
}
}
}
&.is-twitter {
&::before {
@include pseudo();
@include sprites-icon-twitter-small-green();
position: relative;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
top: -2px;
@include bp($bp-tablet-l) {
@include sprites-icon-twitter-green();
margin-right: 10px;
}
}
}
&.is-facebook {
&::before {
@include pseudo();
@include sprites-icon-facebook-small-green();
position: relative;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
top: -2px;
@include bp($bp-tablet-l) {
@include sprites-icon-facebook-green();
margin-right: 10px;
}
}
}
}
.teaser-single__text {
color: $color-green;
}
.teaser-single__link {
transform: translateX(10px);
&::before {
@include sprites-icon-arrow-green100();
}
.is-bg-dark & {
&::before {
@include sprites-icon-arrow-green100();
}
}
.is-bg-blue & {
&::before {
@include sprites-icon-arrow-green100();
}
}
.is-bg-green & {
&::before {
@include sprites-icon-arrow-green100();
}
}
&.is-video {
color: $color-green;
&::before {
@include sprites-icon-video-button-hover();
}
}
&.is-download {
color: $color-green;
&::before {
@include sprites-icon-download-green100();
.is-bg-green & {
@include sprites-icon-download-green100();
}
.is-bg-blue & {
@include sprites-icon-download-green100();
}
}
}
&.is-external {
color: $color-green;
&::before {
@include sprites-icon-externalarrow-green100();
.is-bg-green & {
@include sprites-icon-externalarrow-green100();
}
.is-bg-blue & {
@include sprites-icon-externalarrow-green100();
}
}
}
}
.teaser-single__dates {
border-color: $color-green;
background-color: rgba($color-green, 1);
.is-bg-light & {
border-color: $color-green;
background-color: rgba($color-green, 1);
}
}
.teaser-single__date-day,
.teaser-single__date-month,
.teaser-single__date-connect {
.is-bg-light & {
color: $color-white;
}
}
.teaser-single__news {
@include sprites-icon-news-tag-small-green-hover();
@include bp($bp-tablet-l) {
@include sprites-icon-news-tag-green-hover();
}
/*
MODIFIERS
----------------------- */
.is-bg-blue &,
.is-bg-green &,
.is-bg-light &,
.is-bg-dark & {
@include sprites-icon-news-tag-small-green-hover();
@include bp($bp-tablet-l) {
@include sprites-icon-news-tag-green-hover();
}
}
}
}
&::before {
@include pseudo();
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: calc(100% - 2px);
height: calc(100% - 2px);
border: 1px solid transparent;
transition: border-color $animation-duration-std $animation-easing-std;
}
/*
MODIFIERS
----------------------- */
&.is-image {
padding: 0;
display: block;
z-index: 3;
@include print() {
display: none;
}
&:hover {
.teaser-single__link {
background-color: $color-white;
border: 1px solid $color-blue;
transform: translateX(0);
&::before {
@include sprites-icon-arrow-blue();
@include centering(hv);
}
}
.teaser-single__headline {
background: $color-white;
border-bottom: 1px solid $color-blue;
color: $color-blue;
&.is-instagram {
&::before {
@include pseudo();
@include sprites-icon-instagram-small-blue();
position: relative;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
top: -2px;
@include bp($bp-mobile-p) {
transform: scale(1);
}
@include bp($bp-tablet-p) {
margin-right: 0;
}
@include bp($bp-tablet-l) {
@include sprites-icon-instagram-blue();
margin-right: 10px;
}
}
}
}
}
.teaser-single__instagram-area {
position: relative;
padding-top: 1px;
height: 0;
overflow: hidden;
padding-bottom: 66.66666666666667%;
@include bp($bp-tablet-p) {
padding-bottom: 100%;
}
}
.teaser-single__text-section {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 20px;
@include bp($bp-desktop-m) {
padding: 30px;
}
}
.teaser-single__link {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 50px;
background-color: $color-blue;
border: 1px solid $color-blue;
&::before {
@include centering(hv);
@include sprites-icon-arrow-white();
}
@include hcm() {
line-height: (50/16);
width: auto;
padding: 0 3px;
}
}
.teaser-single__headline {
background: $color-blue;
display: block;
padding: 12px 20px;
margin: -20px -20px 0 -20px;
@include bp($bp-desktop-m) {
margin: -30px -30px 0 -30px;
padding: 15px 30px;
}
/*
MODIFIERS
----------------------- */
.is-bg-light & {
color: $color-dark;
}
&.is-instagram {
&::before {
@include pseudo();
@include sprites-icon-instagram-small-white();
position: relative;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
top: -2px;
transition: background-image $animation-duration-std $animation-easing-std;
@include bp($bp-mobile-p) {
transform: scale(1);
}
@include bp($bp-tablet-p) {
margin-right: 0;
}
@include bp($bp-tablet-l) {
@include sprites-icon-instagram-white();
margin-right: 10px;
}
@include print() {
display: none;
}
}
}
.hcm & {
.is-aural {
font-size: 15px;
color: $color-black;
margin-right: 10px;
}
}
}
}
.teaser-single__text-section {
display: flex;
flex-direction: unset;
flex-wrap: wrap;
}
.teaser-single__type {
font-family: $font-regular;
font-weight: 400;
font-size: 1.2rem;
letter-spacing: 1px;
line-height: (20/12);
color: $color-gray-light;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
transition: color $animation-duration-std $animation-easing-std;
width: 100%;
@include bp($bp-tablet-l) {
font-size: 1.4rem;
}
@include bp($bp-desktop-l) {
font-size: 1.5rem;
letter-spacing: 1.2px;
}
/*
MODIFIERS
----------------------- */
.is-bg-light & {
color: $color-dark;
}
.is-bg-blue & {
color: $color-blue;
}
}
/*
HEADLINE
----------------------- */
.teaser-single__headline {
@include headline-h4-styles();
font-family: $font-bold;
font-size: 1.7rem;
line-height: (24/17);
letter-spacing: .3px;
font-weight: 700;
color: $color-white;
display: block;
margin-bottom: 20px;
transition: color $animation-duration-std $animation-easing-std;
flex: 0 0 100%;
@include bp($bp-tablet-p) {
letter-spacing: .28px;
margin-bottom: 5px;
line-height: (21/17);
}
@include bp($bp-tablet-l) {
margin-bottom: 15px;
font-size: 1.8rem;
line-height: (25/18);
letter-spacing: .3px;
}
@include bp($bp-desktop-m) {
margin-bottom: 18px;
font-size: 2rem;
line-height: (28/20);
letter-spacing: .3px;
}
/*
MODIFIERS
----------------------- */
.is-bg-light & {
color: $color-dark;
}
&.is-instagram {
&::before {
@include pseudo();
@include sprites-icon-instagram-small-white();
position: relative;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
top: -2px;
transition: background-image $animation-duration-std $animation-easing-std;
@include bp($bp-tablet-l) {
@include sprites-icon-instagram-white();
margin-right: 10px;
}
@include print() {
display: none;
}
}
}
&.is-twitter {
&::before {
@include pseudo();
@include sprites-icon-twitter-small-white();
position: relative;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
top: -2px;
transition: background-image $animation-duration-std $animation-easing-std;
@include bp($bp-tablet-l) {
@include sprites-icon-twitter-white();
margin-right: 10px;
}
@include print() {
display: none;
}
}
}
&.is-facebook {
&::before {
@include pseudo();
@include sprites-icon-facebook-small-white();
position: relative;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
top: -2px;
transition: background-image $animation-duration-std $animation-easing-std;
@include bp($bp-tablet-l) {
@include sprites-icon-facebook-white();
margin-right: 10px;
}
@include print() {
display: none;
}
}
}
&.is-stage-frontpage {
@include bp(990px) {
font-size: 1.5rem;
line-height: (22/15);
letter-spacing: .25px;
}
@include bp(1150px) {
font-size: 1.7rem;
line-height: (24/17);
letter-spacing: .03rem;
}
@include bp($bp-desktop-m) {
margin-bottom: 18px;
font-size: 2rem;
line-height: (28/20);
letter-spacing: .3px;
}
}
}
/*
TEXT
----------------------- */
.teaser-single__text {
display: block;
width: 100%;
color: $color-white;
font-family: $font-regular;
font-weight: 400;
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: .25px;
transition: color $animation-duration-std $animation-easing-std;
margin-bottom: 20px;
a {
color: inherit;
font-family: $font-regular;
font-weight: 400;
border-bottom: 1px solid $color-white;
transition: color $animation-duration-std $animation-easing-std;
}
}
/*
DATE
----------------------- */
.teaser-single__dates {
border: 1px solid $color-white;
display: inline-block;
padding: 0 10px;
margin-bottom: 10px;
background-color: rgba($color-green, 0);
transition: border-color $animation-duration-std $animation-easing-std, background-color $animation-duration-std $animation-easing-std;
@include bp($bp-desktop-m) {
margin-bottom: 20px;
}
@include print() {
border: 1px solid $color-gray-border;
}
/*
MODIFIERS
----------------------- */
.is-bg-light & {
border: 1px solid $color-dark;
}
}
.teaser-single__date {
height: 42px;
display: inline-flex;
flex-direction: column;
justify-content: center;
text-align: center;
vertical-align: top;
@include bp($bp-tablet-p) {
height: 52px;
}
@include bp($bp-tablet-l) {
height: 60px;
}
@include bp($bp-desktop-m) {
height: 60px;
margin-bottom: -2px;
}
@include bp($bp-desktop-l) {
height: 72px;
margin-bottom: 0;
}
/*
MODIFIERS
----------------------- */
&.is-connector {
height: 42px;
@include bp($bp-tablet-l) {
height: 60px;
}
@include bp($bp-desktop-m) {
height: 60px;
}
@include bp($bp-desktop-l) {
height: 72px;
margin-bottom: 0;
}
}
}
.teaser-single__date-day {
font-family: $font-bold;
font-weight: 700;
font-size: 1.7rem;
line-height: (16/17);
letter-spacing: .38px;
color: $color-white;
display: block;
transition: color $animation-duration-std $animation-easing-std;
@include bp($bp-tablet-p) {
font-size: 2.2rem;
line-height: (14/22);
letter-spacing: .27px;
}
@include bp($bp-tablet-l) {
font-size: 2.5rem;
line-height: (20/25);
letter-spacing: .3px;
}
@include bp($bp-desktop-m) {
font-size: 3.2rem;
line-height: (24/32);
}
&::after {
@include print() {
display: none;
}
}
/*
MODIFIERS
----------------------- */
.is-bg-light & {
color: $color-dark;
}
}
.teaser-single__date-month {
font-family: $font-bold;
font-weight: 700;
font-size: 1rem;
line-height: (14/10);
letter-spacing: .28px;
color: $color-white;
text-transform: uppercase;
text-decoration: none;
transition: color $animation-duration-std $animation-easing-std;
@include bp($bp-tablet-p) {
font-size: 1.3rem;
line-height: (18/13);
letter-spacing: .5px;
}
@include bp($bp-tablet-l) {
font-size: 1.5rem;
line-height: (20/15);
letter-spacing: .3px;
}
@include bp($bp-desktop-m) {
font-size: 2rem;
line-height: (24/20);
letter-spacing: 0;
}
&::after {
@include print() {
display: none;
}
}
/*
MODIFIERS
----------------------- */
.is-bg-light & {
color: $color-dark;
}
}
.teaser-single__date-connect {
font-family: $font-bold;
font-weight: 700;
font-size: 2rem;
line-height: (26/20);
letter-spacing: .2px;
color: $color-white;
display: block;
transition: color $animation-duration-std $animation-easing-std;
text-decoration: none;
@include bp($bp-tablet-l) {
font-size: 2.2rem;
}
@include bp($bp-desktop-m) {
font-size: 2.4rem;
}
@include bp($bp-desktop-l) {
font-size: 2.6rem;
}
&::after {
@include print() {
display: none;
}
}
/*
MODIFIERS
----------------------- */
.is-bg-light & {
color: $color-dark;
}
}
/*
NEWS
----------------------- */
.teaser-single__news {
@include sprites-icon-news-tag-small-green();
display: inline-block;
margin-bottom: 10px;
color: $color-white;
position: relative;
@include bp($bp-tablet-l) {
@include sprites-icon-news-tag-green();
}
@include bp($bp-desktop-m) {
margin-bottom: 20px;
}
@include print() {
border: 1px solid $color-gray-border;
padding: 15px 0 0 6px;
}
/*
MODIFIERS
----------------------- */
.is-bg-light & {
@include sprites-icon-news-tag-small-black();
@include bp($bp-tablet-l) {
@include sprites-icon-news-tag-black();
}
}
.is-bg-dark & {
@include sprites-icon-news-tag-small-black();
@include bp($bp-tablet-l) {
@include sprites-icon-news-tag-black();
}
}
.is-bg-green & {
@include sprites-icon-news-tag-small-green();
@include bp($bp-tablet-l) {
@include sprites-icon-news-tag-green();
}
}
.is-bg-blue & {
@include sprites-icon-news-tag-small-green();
@include bp($bp-tablet-l) {
@include sprites-icon-news-tag-green();
}
}
.teaser-single__news-text {
width: 1px;
height: 1px;
display: block;
font-size: .00001rem;
color: transparent;
@include print() {
font-size: inherit;
}
}
}
.teaser-single__link {
@include hidden-text();
transition: transform $animation-duration-std $animation-easing-std;
background-color: transparent;
text-align: left;
border: none;
&::before {
@include pseudo();
@include sprites-icon-arrow-black();
position: relative;
display: inline-block;
margin-right: 10px;
@include print() {
display: none;
}
/*
MODIFIERS
----------------------- */
.is-bg-dark & {
@include sprites-icon-arrow-white();
}
.is-bg-blue & {
@include sprites-icon-arrow-white();
}
.is-bg-green & {
@include sprites-icon-arrow-white();
}
}
/*
MODIFIERS
----------------------- */
&.a11y-focus-key {
.is-bg-dark &,
.is-bg-blue & {
@include a11y-focus-key-gray();
}
}
&.is-video {
@include visuallyvisible();
color: $color-white;
font-size: 1.6rem;
font-family: $font-bold;
font-weight: 700;
line-height: (28/16);
letter-spacing: .24px;
text-decoration: none;
transition: color $animation-duration-std $animation-easing-std, transform $animation-duration-std $animation-easing-std;
top: 5px;
&::before {
@include sprites-icon-video-button-white();
display: inline-block;
vertical-align: middle;
@include print() {
display: none;
}
}
}
&.is-external {
@include hidden-text();
transition: transform $animation-duration-std $animation-easing-std;
&::before {
@include sprites-icon-externalarrow-white();
display: inline-block;
vertical-align: middle;
.is-bg-light & {
@include sprites-icon-externalarrow-green60();
}
.is-bg-green & {
@include sprites-icon-externalarrow-white();
}
.is-bg-blue & {
@include sprites-icon-externalarrow-white();
}
@include print() {
display: none;
}
}
}
&.is-download {
@include hidden-text();
transition: transform $animation-duration-std $animation-easing-std;
&::before {
@include sprites-icon-download-white();
display: inline-block;
vertical-align: middle;
.is-bg-light & {
@include sprites-icon-download-green100();
}
.is-bg-green & {
@include sprites-icon-download-white();
}
.is-bg-blue & {
@include sprites-icon-download-white();
}
@include print() {
display: none;
}
}
}
@include hcm() {
font-size: 1.6rem;
color: $color-dark;
display: block;
visibility: visible;
}
@include print() {
font-family: $font-regular !important;
}
}
.teaser-single__a11y-clickarea {
@include hidden-text();
@include clickarea();
background-color: transparent;
cursor: pointer;
border: none;
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-teaser-single--default {
}
HTML Output
Default
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>Download
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-download" href="#">
Download
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>Event
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<div class="teaser-single__dates">
<div class="teaser-single__date">
<span aria-label="24" class="teaser-single__date-day">24</span>
<abbr aria-label="Januar" title="Januar" class="teaser-single__date-month">Jan</abbr>
</div>
<div class="teaser-single__date is-connector">
<abbr aria-label="bis" title="bis" class="teaser-single__date-connect">—</abbr>
</div>
<div class="teaser-single__date">
<span aria-label="27" class="teaser-single__date-day">27</span>
<abbr aria-label="Januar" title="Januar" class="teaser-single__date-month">Jan</abbr>
</div>
</div>
<h3 class="teaser-single__headline">
Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>Video
<article class="c-teaser-single--video" data-css="c-teaser-single" data-js-module="overlay-handler">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
360 Grad Campus Tour
</h3>
</div>
<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "youtube": {"id": "z8lE3UTfG8s","format": "16_9"}, "caption": {"captionHeadline":"Youtube Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }' class="teaser-single__link is-video">
Video ansehen
</button>
<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "youtube": {"id": "z8lE3UTfG8s","format": "16_9"}, "caption": {"captionHeadline":"YouTube Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }' class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</button>
</article>Social Instagram
<article class="c-teaser-single--default is-image" data-css="c-teaser-single">
<div class="teaser-single__instagram-area">
<div class="teaser-single__image-section">
<figure class="c-figure--teaser-single" data-css="c-figure" data-js-module="true">
<div class="figure__wrapper">
<picture class="c-picture--animated-objects
lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://via.placeholder.com/300x300 300w ,
https://via.placeholder.com/600x600 600w ,
https://via.placeholder.com/1200x1200 1200w " sizes="
(min-width: 768px) 41.66667%
, (min-width:1024px) 33.33333%
, (max-width: 1280px) 25%
, calc(100% - ((100% / 14) * 2)) " media=" (min-width: 768px)" />
<source data-srcset="
https://via.placeholder.com/600x300 600w ,
https://via.placeholder.com/1200x600 1200w " sizes="
calc(100% - ((100% / 14) * 2)) " media=" (max-width: 767px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://via.placeholder.com/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline is-instagram">
@lmu.muenchen
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</div>
</article>Social Facebook
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline is-facebook">
Der LMU Studien-Informations-Service
</h3>
<p class="teaser-single__text">Lorem ipsum dolor sit amet</p>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>Social Twitter
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline is-twitter">
@LMU_Muenchen
</h3>
<p class="teaser-single__text">Twitter Teaser Box http://bit.ly/2djw39u</p>
<p class="teaser-single__text">#LMU</p>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>News
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<div class="teaser-single__news">
<div class="teaser-single__news-text">News</div>
</div>
<h3 class="teaser-single__headline">
Wissenschaft Macht Politik: Die Münchener Räterepublik
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>