Demo Section

Each variation will be presented in the following section.

Default

Alternative text that describes the image

Der LMU Studien-Informations-Service

Custom position & HTML5 standard video

360 Grad Campus Tour

Custom position & YouTube video

360 Grad Campus Tour

Readme

teaserPremium (`component`)

Description

This blueprint is based on the blueprint of Veams. This component represents a text-image teaser available with either an image or a video.

JIRA

LMU-160

Requirements

@veams/component-picture - Picture component in Veams.

Fields

`teaser-premium.hbs`

Settings

Parameter	Type	Default	Description
settings.teaserPremiumClasses	String	`''`	Modifier classes for component
settings.teaserPremiumContextClass	String	`'default'`	Context class of component
settings.bgGreen	Boolean	`true`	Modifier class of component for green bg will be set
settings.bgBlue	Boolean	`false`	Modifier class of component for blue bg will be set
settings.bgDark	Boolean	`false`	Modifier class of component for dark bg will be set
settings.bgLight	Boolean	`false`	Modifier class of component for light bg will be set
settings.singleTeaserPositioning.modifierHorizontal	String	`''`	Modifier class for horizontal position of single teaser, use `'is-left'` or `'is-right'`
settings.singleTeaserPositioning.modifierVertical	String	`''`	Modifier class for vertical position of single teaser, use `'is-top'` or `'is-bottom'`

Content

Parameter	Type	Description
content.picture	Object	Contains data for picture component
content.singleTeaser	Object	Contains data single teaser component

Templates

teaser-premium.hbs

<div class="c-teaser-premium{{#if settings.teaserPremiumContextClass}}--{{settings.teaserPremiumContextClass}}{{else}}--default{{/if}}{{#if settings.teaserPremiumClasses}} {{settings.teaserPremiumClasses}}{{/if}}"
     data-css="c-teaser-premium">
	<div class="teaser-premium__image-wrapper">
		{{#with content.picture}}
			{{> picture }}
		{{/with}}
	</div>

	<div class="teaser-premium__box{{#if settings.bgBlue}} is-bg-blue{{/if}}{{#if settings.bgDark}} is-bg-dark{{/if}}{{#if settings.bgLight}} is-bg-light{{/if}}{{#if settings.bgGreen}} is-bg-green{{/if}}{{#if settings.singleTeaserPositioning.modifierVertical}} {{settings.singleTeaserPositioning.modifierVertical}}{{/if}}{{#if settings.singleTeaserPositioning.modifierHorizontal}} {{settings.singleTeaserPositioning.modifierHorizontal}}{{/if}}">
		<div class="teaser-premium__box-content">
			{{#with content.singleTeaser}}
				{{> teaser-single }}
			{{/with}}
		</div>
	</div>
</div>

Data File

teaser-premium.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default",
				"onDark": true
			},
			"settings": {
				"teaserPremiumContextClass": "default",
				"teaserPremiumClasses": false,
				"bgGreen": true,
				"singleTeaserPositioning": {
					"modifierVertical": "is-bottom",
					"modifierHorizontal": "is-right"
				}
			},
			"content": {
				"picture": {
					"settings": {
						"pictureContextClass": "animated-objects",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/40x40",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://placehold.co/300x300",
										"imageWidth": "300w"
									},
									{
										"src": "https://placehold.co/600x600",
										"imageWidth": "600w"
									},
									{
										"src": "https://placehold.co/1200x1200",
										"imageWidth": "1200w"
									}
								],
								"sizes": [
									{
										"screenWidth": "(min-width: 768px)",
										"imageWidth": "66.66667vw"
									},
									{
										"screenWidth": "(min-width:1100px)",
										"imageWidth": "50vw"
									},
									{
										"screenWidth": "",
										"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
									}
								]
							}
						]
					}
				},
				"singleTeaser": {
					"settings": {
						"teaserSingleContextClass": "default",
						"teaserSingleClasses": false
					},
					"content": {
						"headline": "Der LMU Studien-Informations-Service",
						"linkHref": "#",
						"linkText": "Weiterlesen"
					}
				}
			}
		},
		"customPosition": {
			"docs": {
				"variationName": "Custom position & HTML5 standard video",
				"onDark": true
			},
			"settings": {
				"teaserPremiumContextClass": "default",
				"teaserPremiumClasses": false,
				"bgGreen": true,
				"singleTeaserPositioning": {
					"modifierVertical": "is-top",
					"modifierHorizontal": "is-left"
				}
			},
			"content": {
				"picture": {
					"settings": {
						"pictureContextClass": "animated-objects",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/40x40",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://placehold.co/400x400",
										"imageWidth": "400w"
									},
									{
										"src": "https://placehold.co/800x800",
										"imageWidth": "800w"
									},
									{
										"src": "https://placehold.co/1200x1200",
										"imageWidth": "1200w"
									},
									{
										"src": "https://placehold.co/1600x1600",
										"imageWidth": "1600w"
									},
									{
										"src": "https://placehold.co/2000x2000",
										"imageWidth": "2000w"
									},
									{
										"src": "https://placehold.co/2400x2400",
										"imageWidth": "2400w"
									},
									{
										"src": "https://placehold.co/2800x2800",
										"imageWidth": "2800w"
									},
									{
										"src": "https://placehold.co/3200x3200",
										"imageWidth": "3200w"
									}
								]
							}
						]
					}
				},
				"singleTeaser": {
					"settings": {
						"teaserSingleContextClass": "video",
						"teaserSingleClasses": false
					},
					"content": {
						"headline": "360 Grad Campus Tour",
						"linkHref": "#",
						"linkClasses": "is-video",
						"linkText": "Video ansehen"
					}
				}
			}
		},
		"customPositionYoutube": {
			"docs": {
				"variationName": "Custom position & YouTube video",
				"onDark": true
			},
			"settings": {
				"teaserPremiumContextClass": "default",
				"teaserPremiumClasses": false,
				"bgGreen": true,
				"singleTeaserPositioning": {
					"modifierVertical": "is-top",
					"modifierHorizontal": "is-left"
				}
			},
			"content": {
				"picture": {
					"settings": {
						"pictureContextClass": "animated-objects",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/40x40",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://placehold.co/400x400",
										"imageWidth": "400w"
									},
									{
										"src": "https://placehold.co/800x800",
										"imageWidth": "800w"
									},
									{
										"src": "https://placehold.co/1200x1200",
										"imageWidth": "1200w"
									},
									{
										"src": "https://placehold.co/1600x1600",
										"imageWidth": "1600w"
									},
									{
										"src": "https://placehold.co/2000x2000",
										"imageWidth": "2000w"
									},
									{
										"src": "https://placehold.co/2400x2400",
										"imageWidth": "2400w"
									},
									{
										"src": "https://placehold.co/2800x2800",
										"imageWidth": "2800w"
									},
									{
										"src": "https://placehold.co/3200x3200",
										"imageWidth": "3200w"
									}
								]
							}
						]
					}
				},
				"singleTeaser": {
					"settings": {
						"teaserSingleContextClass": "video",
						"teaserSingleClasses": false,
						"youtubeId": "XRamnH2D9Y0"
					},
					"content": {
						"headline": "360 Grad Campus Tour",
						"linkHref": "#",
						"linkClasses": "is-video",
						"linkText": "Video ansehen"
					}
				}
			}
		}
	}
}

Styles

teaser-premium.scss

/* ===================================================
component: teaser-premium
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-teaser-premium"] {
	position: relative;
	background-color: $color-gray;

	@include print() {
		display: none;
	}

	.teaser-premium__image-wrapper {
		position: relative;
		z-index: 1;
	}

	.teaser-premium__box {
		@include grid-column(12);

		z-index: 2;

		@include bp($bp-tablet-p) {
			@include grid-box(6);

			position: absolute;
			bottom: 0;
			right: 0;
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-top {
			top: 0;
			bottom: auto;
		}

		&.is-bottom {
			top: auto;
			bottom: 0;
		}

		&.is-right {
			left: auto;
			right: 0;
		}

		&.is-left {
			left: 0;
			right: auto;
		}
	}

	.teaser-premium__box-content {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		@include bp($bp-tablet-p) {
			position: absolute;
		}
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-teaser-premium--default {
}

HTML Output

Default

<div class="c-teaser-premium--default" data-css="c-teaser-premium">
	<div class="teaser-premium__image-wrapper">
		<picture class="c-picture--animated-objects
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://placehold.co/300x300  300w  , 
				 https://placehold.co/600x600  600w  , 
				 https://placehold.co/1200x1200  1200w  " sizes=" 
				  (min-width: 768px) 66.66667vw 
				  ,  (min-width:1100px) 50vw 
				  ,   calc(100vw - ((100vw / 14) * 2)) " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
	<div class="teaser-premium__box is-bg-green is-bottom is-right">
		<div class="teaser-premium__box-content">
			<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>
		</div>
	</div>
</div>

Custom position & HTML5 standard video

<div class="c-teaser-premium--default" data-css="c-teaser-premium">
	<div class="teaser-premium__image-wrapper">
		<picture class="c-picture--animated-objects
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://placehold.co/400x400  400w  , 
				 https://placehold.co/800x800  800w  , 
				 https://placehold.co/1200x1200  1200w  , 
				 https://placehold.co/1600x1600  1600w  , 
				 https://placehold.co/2000x2000  2000w  , 
				 https://placehold.co/2400x2400  2400w  , 
				 https://placehold.co/2800x2800  2800w  , 
				 https://placehold.co/3200x3200  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
	<div class="teaser-premium__box is-bg-green is-top is-left">
		<div class="teaser-premium__box-content">
			<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='{ "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"}}]}  }' 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='{ "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"}}]}  }' class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
				</button>
			</article>
		</div>
	</div>
</div>

Custom position & YouTube video

<div class="c-teaser-premium--default" data-css="c-teaser-premium">
	<div class="teaser-premium__image-wrapper">
		<picture class="c-picture--animated-objects
				 lazyload" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source data-srcset="
				 https://placehold.co/400x400  400w  , 
				 https://placehold.co/800x800  800w  , 
				 https://placehold.co/1200x1200  1200w  , 
				 https://placehold.co/1600x1600  1600w  , 
				 https://placehold.co/2000x2000  2000w  , 
				 https://placehold.co/2400x2400  2400w  , 
				 https://placehold.co/2800x2800  2800w  , 
				 https://placehold.co/3200x3200  3200w  " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
	<div class="teaser-premium__box is-bg-green is-top is-left">
		<div class="teaser-premium__box-content">
			<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": "XRamnH2D9Y0","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": "XRamnH2D9Y0","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>
		</div>
	</div>
</div>

TEASER-PREMIUM (Teaser Module )

src/app/shared/components/teaser-premium/templates

Demo Section

Default

Der LMU Studien-Informations-Service

Custom position & HTML5 standard video

360 Grad Campus Tour

Custom position & YouTube video

360 Grad Campus Tour

Readme

teaserPremium (`component`)

Description

JIRA

Requirements

Fields

`teaser-premium.hbs`

Settings

Content

Templates

teaser-premium.hbs

Data File

teaser-premium.hjson

Styles

teaser-premium.scss

HTML Output

Default

Custom position & HTML5 standard video

Custom position & YouTube video

Wonach suchst du?

TEASER-PREMIUM (Teaser Module )

src/app/shared/components/teaser-premium/templates

Demo Section

Default

Der LMU Studien-Informations-Service

Custom position & HTML5 standard video

360 Grad Campus Tour

Custom position & YouTube video

360 Grad Campus Tour

Readme

teaserPremium (component)

Description

JIRA

Requirements

Fields

teaser-premium.hbs

Settings

Content

Templates

teaser-premium.hbs

Data File

teaser-premium.hjson

Styles

teaser-premium.scss

HTML Output

Default

Custom position & HTML5 standard video

Custom position & YouTube video

Wonach suchst du?

teaserPremium (`component`)

`teaser-premium.hbs`