QUOTE (Teaser Module )

src/app/shared/components/quote/templates

Demo Section

Each variation will be presented in the following section.

Default

Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
Prof. Dr. Bernd Huber, Präsident der LMU Die LMU im Profil

Default

Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
Prof. Dr. Bernd Huber, Präsident der LMU Die LMU im Profil
Alternative text that describes the image

Default in Detailseite

Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen
Prof. Dr. Bernd Huber, Präsident der LMU Die LMU im Profil

Default mit Bild in Detailseite

Many thanks to the LMU Gateway team for their assistance throughout my moving and settling in process in Munich. Their support regarding my residence permit application is much appreciated. It was also so much fun to join the Pub Quiz event and meet other international researchers from our university.international..international..international.
MERVE KUTLU, PHD STUDENT (TR) Die LMU im Profil
Alternative text that describes the image

Extern

Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
Max Mustermann, Externer Redner Die LMU im Profil

Extern

Many thanks to the LMU Gateway team for their assistance throughout my moving and settling in process in Munich. Their support regarding my residence permit application is much appreciated. It was also so much fun to join the Pub Quiz event and meet other international researchers from our university.
Max Mustermann, Externer Redner mit langem Namen Die LMU im Profil
Alternative text that describes the image

Extern in Detailseite

Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
Max Mustermann, Externer Redner

Extern mit Bild in Detailseite

Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
Max Mustermann, Externer Redner Infos zum Web
Alternative text that describes the image

Extern mit Bild in Detailseite und Watermark

Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
Max Mustermann, Externer Redner Infos zum Web
Alternative text that describes the image

Extern with Watermark

Many thanks to the LMU Gateway team for their assistance throughout my moving and settling in process in Munich. Their support regarding my residence permit application is much appreciated. It was also so much fun to join the Pub Quiz event and meet other international researchers from our university.
Max Mustermann, Externer Redner mit langem Namen Die LMU im Profil
Alternative text that describes the image

Readme

quote (component)

Description

This blueprint is based on the blueprint of Veams. The Quote module is a feature containing a background, a quote, the author of the quote and contains a link while showing a picture. The background image is initially animated (triggered as soon as the component is in viewport for the first time).

JIRA

Requirements

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/quote

Fields

quote.hbs

Settings

Parameter Type Default Description
settings.quoteClasses String '' Modifier classes for component
settings.quoteContextClass String 'default' Context class of component
settings.doNotUseJs Boolean true Parameter to deactivate Javascript for this Element. if there is no attribute ‘doNotUseJs’ or the Attribute is false, Javascript is awailable
settings.quoteWatermarkClass String 'is-with-watermark' Setting a class to show a watermark. If this attribute is not in use or is empty the normal quote solution without the Watermark will be shown

Content

Parameter Type Description
content.quoteContent String Main content of the quote
content.quoteAuthor String Author of the quote
content.linkHref String Link href content
content.linkContent String Link anchor content
content.picture Object Object containing Settings and Content objects for the picture

JavaScript Options

The module gives you the possibility to override default JS options:

Option Type Default Description
classes.visible String 'is-visible' Class which sets visibility of background image and triggers transition
selectors.bgAnimationWrapper String '[data-js-item="bg-animation-wrapper"]' Element selector for background image animation wrapper

Templates

quote.hbs

<div class="c-quote{{#if settings.quoteContextClass}}--{{ settings.quoteContextClass}}{{else}}--default{{/if}}{{#if
		settings.quoteClasses}} {{ settings.quoteClasses}}{{/if}}"
 data-css="c-quote" {{#if settings.doNotUseJs}}{{else}}data-js-module="quote" {{#if
		settings.quoteJsOptions}} data-js-options='{{stringify settings.quoteJsOptions}}'
 {{/if}}{{/if}}>
	<div class="quote__container {{#if content.picture}}{{else}}quote__container--no-picture{{/if}}">
		<div class="quote__bg-animation-wrapper {{#if settings.quoteWatermarkClass}}{{ settings.quoteWatermarkClass}}{{/if}}"  {{#if settings.doNotUseJs}}{{else}}data-js-item="bg-animation-wrapper"{{/if}}></div>
		<div class="quote__content-container {{#xif content.linkHref '&&' content.linkContent}}{{else}}is-no-link{{/xif}}">
			<blockquote class="quote__content">
				{{content.quoteContent}}
			</blockquote>
			{{#if content.quoteAuthor}}
			<cite class="quote__author">{{content.quoteAuthor}}</cite>
			{{/if}}
			{{#xif content.linkHref '&&' content.linkContent}}
			<a class="quote__link" href="{{content.linkHref}}">{{content.linkContent}}</a>
			{{/xif}}
		</div>
		{{#if content.picture}}
		<div class="quote__picture-container">
			{{#with content.picture}}
			{{> picture }}
			{{/with}}
		</div>
		{{/if}}
	</div>
</div>

Data File

quote.hjson

{
	"variations": {
		"default1": {
			"docs": {
				"variationName": "Default",
				"sectionCenter": true
			},
			"settings": {
				"quoteContextClass": false
			},
			"content": {
				"quoteContent": "Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu  ein, mit uns an der LMU zu lernen, zu lehren und zu forschen",
				"quoteAuthor": "Prof. Dr. Bernd Huber, Präsident der LMU",
				"linkHref": "#",
				"linkContent": "Die LMU im Profil"
			}
		},
		"default2": {
			"docs": {
				"variationName": "Default",
				"sectionCenter": true
			},
			"settings": {
				"quoteContextClass": false,
				"quoteClasses": "is-with-picture"
			},
			"content": {
				"picture": {
					"settings": {
						"pictureContextClass": "animated-objects",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/20x20",
						"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/1600x1600",
										"imageWidth": "1600w"
									},
									{
										"src": "https://placehold.co/2400x2400",
										"imageWidth": "2400w"
									},
									{
										"src": "https://placehold.co/3200x3200",
										"imageWidth": "3200w"
									}
								],
								"sizes": [
									{
										"screenWidth": "(min-width: 1440px)",
										"imageWidth": "309px"
									},
									{
										"screenWidth": "(min-width: 768px)",
										"imageWidth": "220px"
									},
									{
										"screenWidth": "",
										"imageWidth": "133px"
									}
								]
							}
						]
					}
				},
				"quoteContent": "Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu  ein, mit uns an der LMU zu lernen, zu lehren und zu forschen",
				"quoteAuthor": "Prof. Dr. Bernd Huber, Präsident der LMU",
				"linkHref": "#",
				"linkContent": "Die LMU im Profil"
			}
		},
		"default3": {
			"docs": {
				"variationName": "Default in Detailseite",
				"sectionCenter": true
			},
			"settings": {
				"quoteContextClass": "default-rte"
			},
			"content": {
				"quoteContent": "Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen",
				"quoteAuthor": "Prof. Dr. Bernd Huber, Präsident der LMU",
				"linkHref": "#",
				"linkContent": "Die LMU im Profil"
			}
		},
		"default4": {
			"docs": {
				"variationName": "Default mit Bild in Detailseite",
				"sectionCenter": true
			},
			"settings": {
				"quoteContextClass": "default-rte",
				"quoteClasses": "is-with-picture"
			},
			"content": {
				"picture": {
					"settings": {
						"pictureContextClass": "animated-objects",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/20x20",
						"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/1600x1600",
										"imageWidth": "1600w"
									},
									{
										"src": "https://placehold.co/2400x2400",
										"imageWidth": "2400w"
									},
									{
										"src": "https://placehold.co/3200x3200",
										"imageWidth": "3200w"
									}
								],
								"sizes": [
									{
										"screenWidth": "(min-width: 1440px)",
										"imageWidth": "309px"
									},
									{
										"screenWidth": "(min-width: 768px)",
										"imageWidth": "220px"
									},
									{
										"screenWidth": "",
										"imageWidth": "133px"
									}
								]
							}
						]
					}
				},
				"quoteContent": "Many thanks to the LMU Gateway team for their assistance throughout my moving and settling in process in Munich. Their support regarding my residence permit application is much appreciated. It was also so much fun to join the Pub Quiz event and meet other international researchers from our university.international..international..international.",
				"quoteAuthor": "MERVE KUTLU, PHD STUDENT (TR)",
				"linkHref": "#",
				"linkContent": "Die LMU im Profil"
			}
		},
		"extern1": {
			"docs": {
				"variationName": "Extern",
				"sectionCenter": true
			},
			"settings": {
				"quoteContextClass": "extern",
				"doNotUseJs": true
			},
			"content": {
				"quoteContent": "Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu  ein, mit uns an der LMU zu lernen, zu lehren und zu forschen",
				"quoteAuthor": "Max Mustermann, Externer Redner",
				"linkHref": "#",
				"linkContent": "Die LMU im Profil"
			}
		},
		"extern2": {
			"docs": {
				"variationName": "Extern",
				"sectionCenter": true
			},
			"settings": {
				"quoteContextClass": "extern",
				"quoteClasses": "is-with-picture",
				"doNotUseJs": true
			},
			"content": {
				"picture": {
					"settings": {
						"pictureContextClass": "animated-objects",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/20x20",
						"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"
									}
								]
							}
						]
					}
				},
				"quoteContent": "Many thanks to the LMU Gateway team for their assistance throughout my moving and settling in process in Munich. Their support regarding my residence permit application is much appreciated. It was also so much fun to join the Pub Quiz event and meet other international researchers from our university.",
				"quoteAuthor": "Max Mustermann, Externer Redner mit langem Namen",
				"linkHref": "#",
				"linkContent": "Die LMU im Profil"
			}
		},
		"extern3": {
			"docs": {
				"variationName": "Extern in Detailseite",
				"sectionCenter": true
			},
			"settings": {
				"quoteContextClass": "extern-rte",
				"doNotUseJs": true
			},
			"content": {
				"quoteContent": "Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu  ein, mit uns an der LMU zu lernen, zu lehren und zu forschen",
				"quoteAuthor": "Max Mustermann, Externer Redner",
				"linkHref": "",
				"linkContent": "Infos zum Web"
			}
		},
		"extern4": {
			"docs": {
				"variationName": "Extern mit Bild in Detailseite",
				"sectionCenter": true
			},
			"settings": {
				"quoteContextClass": "extern-rte",
				"quoteClasses": "is-with-picture",
				"doNotUseJs": true
			},
			"content": {
				"picture": {
					"settings": {
						"pictureContextClass": "animated-objects",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/20x20",
						"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"
									}
								]
							}
						]
					}
				},
				"quoteContent": "Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu  ein, mit uns an der LMU zu lernen, zu lehren und zu forschen",
				"quoteAuthor": "Max Mustermann, Externer Redner",
				"linkHref": "#",
				"linkContent": "Infos zum Web"
			}
		},
		"extern5": {
			"docs": {
				"variationName": "Extern mit Bild in Detailseite und Watermark",
				"sectionCenter": true
			},
			"settings": {
				"quoteContextClass": "extern-rte",
				"quoteClasses": "is-with-picture",
				"doNotUseJs": true,
				"quoteWatermarkClass": "is-with-watermark"
			},
			"content": {
				"picture": {
					"settings": {
						"pictureContextClass": "animated-objects",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/20x20",
						"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"
									}
								]
							}
						]
					}
				},
				"quoteContent": "Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu  ein, mit uns an der LMU zu lernen, zu lehren und zu forschen",
				"quoteAuthor": "Max Mustermann, Externer Redner",
				"linkHref": "#",
				"linkContent": "Infos zum Web"
			}
		},
		"extern6": {
			"docs": {
				"variationName": "Extern with Watermark",
				"sectionCenter": true
			},
			"settings": {
				"quoteContextClass": "extern",
				"quoteClasses": "is-with-picture",
				"doNotUseJs": true,
				"quoteWatermarkClass": "is-with-watermark"
			},
			"content": {
				"picture": {
					"settings": {
						"pictureContextClass": "animated-objects",
						"pictureClasses": false,
						"lazyload": true,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://placehold.co/20x20",
						"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"
									}
								]
							}
						]
					}
				},
				"quoteContent": "Many thanks to the LMU Gateway team for their assistance throughout my moving and settling in process in Munich. Their support regarding my residence permit application is much appreciated. It was also so much fun to join the Pub Quiz event and meet other international researchers from our university.",
				"quoteAuthor": "Max Mustermann, Externer Redner mit langem Namen",
				"linkHref": "#",
				"linkContent": "Die LMU im Profil"
			}
		}
	}
}

Styles

quote.scss

/* ===================================================
component: quote
=================================================== */


/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-quote"] {
	position: relative;
	//display: inline-block;

	@include bp($bp-desktop-l) {
		display: block;
	}

	.quote__container {
		position: relative;

		@include print() {
			padding: 0;
		}
	}

	&.is-with-picture {
		margin-top: 85px;

		@include bp($bp-tablet-p) {
			margin-top: 0;
		}

		.quote__container {
			@include bp($bp-tablet-p) {

				.is-no-link {
					margin-bottom: 36px;
				}
			}

			@include bp($bp-desktop-l) {

				.is-no-link {
					margin-bottom: 58px;
				}
			}
		}

		@include print() {
			margin-top: 0;
		}
	}

	.quote__bg-animation-wrapper {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: url('../media/quote/lmu-wasserzeichen_mobile.png') no-repeat top left;
		opacity: 0;
		transform: translateY(50%);
		transition: opacity $animation-duration-std * 4 $animation-easing-std $animation-duration-std * 10, transform $animation-duration-std * 4 $animation-easing-std $animation-duration-std * 10;

		@include bp($bp-tablet-p) {
			background: url('../media/quote/lmu-wasserzeichen_tablet.png') no-repeat top left;
		}

		@include bp($bp-desktop-l) {
			background: url('../media/quote/lmu_bg_wasserzeichen.png') no-repeat top left;
		}

		&.is-visible {
			opacity: 1;
			transform: translateY(0);
		}

		&.is-with-watermark{
			background: url(../media/quote/anfuehrungszeichen.svg) no-repeat top left;
			display: block;
			opacity: 0.055;
			transform: translateY(0);
		}
	}

	.quote__content-container {
		position: relative;
	}

	.quote__content {
		color: $color-dark;
		font-family: $font-italic;
		font-style: italic;
		padding-bottom: 20px;
		font-size: 2rem;
		line-height: (32/20);
		width: 100%;
		margin: 0;
		flex: 0 0 100%;

		@include bp($bp-tablet-p) {
			font-size: 2.4rem;
			line-height: (38/24);
		}

		@include bp($bp-desktop-l) {
			line-height: (42/24);
		}

		&::before {
			content: '»';
		}

		&::after {
			content: '«';
		}
	}

	.quote__author {
		text-transform: uppercase;
		color: $color-gray;
		font-size: 1.2rem;
		line-height: (20/12);
		letter-spacing: .92px;
		display: block;

		@include bp($bp-tablet-p) {
			width: 55%;
			font-size: 1.4rem;
			letter-spacing: .1rem;
		}

		@include bp($bp-desktop-l) {
			width: 65%;
			font-size: 1.5rem;
			letter-spacing: .023rem;
		}
	}

	.quote__link {
		text-decoration: none;
		color: $color-green;
		font-weight: bold;
		padding-left: 30px;
		position: relative;
		transition: color $animation-duration-std $animation-easing-std;
		display: inline-block;
		margin-top: 20px;

		@include bp($bp-tablet-p) {
			font-size: 1.6rem;
			line-height: (19/16);
		}

		@include bp($bp-desktop-l) {
			font-size: 1.6rem;
			letter-spacing: inherit;
			margin-top: 42px;
		}

		@include print() {
			display: none;
		}

		&:hover {
			color: $color-black;

			&::before,
			&::after {
				transform: translateX(5px);
			}

			&::before {
				opacity: 0;
			}

			&::after {
				opacity: 1;
			}
		}

		&::before,
		&::after {
			@include pseudo();

			position: absolute;
			left: 0;
			top: 2px;
			transition: transform $animation-duration-std $animation-easing-std, opacity $animation-duration-std $animation-easing-std;
		}

		&::before {
			@include sprites-icon-arrow-green100();

		}

		&::after {
			@include sprites-icon-arrow-black();

			opacity: 0;
		}
	}

	.quote__picture-container {
		position: absolute;
		right: 0;
		width: 133px;
		height: 133px;
		top: -85px;

		@include bp($bp-tablet-p) {
			width: 220px;
			height: 220px;
			top: auto;
			bottom: 0;
		}

		@include bp($bp-desktop-l) {
			top: auto;
			width: 309px;
			height: 309px;
		}

		@include print() {
			position: relative;
			top: auto;
			right: auto;
		}
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-quote--default {

	margin: 0 auto 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
		margin-top: 0;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}

	.quote__container {
		padding: 70px 0 0 15px;

		@include bp($bp-tablet-p) {
			padding: 23px 0 165px 5px;
		}

		@include bp($bp-desktop-l) {
			padding: 70px 70px 0px 90px;
			min-height: 380px;
			@include grid-column-width(10);
			@include grid-push-h-narrow(1);
		}
	}

	.quote__container--no-picture {

		@include bp($bp-tablet-p) {
			padding: 23px 0 100px 5px;
		}

		@include bp($bp-desktop-l) {
			padding: 70px 70px 100px 90px;
		}

	}

	&.is-with-picture {
		.quote__container {
			@include bp($bp-tablet-p) {
				padding-top: 0px;
			}

			@include bp($bp-desktop-l) {
				padding-bottom: 230px;
			}
		}
	}
}

/* ---------------------------------------------------
Context: Default RTE
--------------------------------------------------- */
.c-quote--default-rte {

	@include rte-dimensions();
	margin-bottom: 60px;

	.quote__container {

		padding: 70px 0 0 15px;

		@include bp($bp-tablet-p) {
			min-height: 280px;
			padding: 23px 0 165px 5px;
		}
		@include bp($bp-desktop-l) {
			min-height: 380px;
			padding: 70px 30px 0px 30px;
			width: calc(100%);
			flex: 0 0 calc(100%);
		}
	}

	&.is-with-picture {
		margin-top: 105px;
		@include bp($bp-tablet-p) {
			margin-top: 0;
		}
		.quote__container {
			@include bp($bp-tablet-p) {
				padding: 23px 30px 165px 30px;
			}
			@include bp($bp-desktop-l) {
				padding-bottom: 230px;
			}
		}

		@include print() {
			margin-top: 0;
		}
	}

	.quote__container--no-picture {
		padding: 0 0 0 15px;

		@include bp($bp-tablet-p) {
			padding: 23px 30px 0 30px;
		}

		@include bp($bp-desktop-l) {
			padding: 23px 30px 0 30px;
		}
	}


}

/* ---------------------------------------------------
Context: Extern
--------------------------------------------------- */
.c-quote--extern {

	margin: 0 auto 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
		margin-top: 0;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}


	.quote__container {
		padding: 70px 0 0 0px;

		@include bp($bp-tablet-p) {
			padding: 0;
		}
	}

	.quote__container--no-picture {
		padding: 0;
	}

	&.is-with-picture {
		.quote__container {
			@include bp($bp-tablet-p) {
				padding-bottom: 165px;
			}
			@include bp($bp-desktop-l) {
				padding-bottom: 230px;
			}
		}
	}

	.quote__bg-animation-wrapper {
		background: none;
		display: none;
	}
}

/* ---------------------------------------------------
Context: Extern RTE
--------------------------------------------------- */
.c-quote--extern-rte {

	@include rte-dimensions();
	margin-bottom: 60px;

	.quote__container {

		padding: 70px 0 0 0px;

		@include bp($bp-tablet-p) {
			padding: 0;
		}

		@include bp($bp-desktop-l) {
			width: calc(100%);
			flex: 0 0 calc(100%);
		}
	}



	&.is-with-picture {
		margin-top: 105px;
		@include bp($bp-tablet-p) {
			margin-top: 0;
		}
		.quote__container {

			@include bp($bp-tablet-p) {
				padding: 0 0 165px 0;
			}

			@include bp($bp-desktop-l) {
				padding-bottom: 230px;
			}
		}



		@include print() {
			margin-top: 0;
		}
	}

	.quote__container--no-picture {
		padding: 0;
	}

	.quote__bg-animation-wrapper {
		background: none;
		display: none;
	}



}

Scripts

quote.js

/**
 * Simple quote component with animated background (triggered as soon as component is in viewport for the first time).
 * Class properties and decorators are supported.
 *
 * @module Quote
 * @version v1.0.0
 *
 * @author Andy Gutsche
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';
import isInViewport from '@veams/helpers/lib/detection/is-in-viewport';

class Quote extends Component {
	/**
	 * Class Properties
	 */
	$el = $(this.el);
	$bgAnimationWrapper = $(this.options.selectors.bgAnimationWrapper, this.el);

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			classes: {
				visible: 'is-visible'
			},
			selectors: {
				bgAnimationWrapper: '[data-js-item="bg-animation-wrapper"]'
			}
		};

		super(obj, options);
	}

	/** =================================================
	 * EVENTS
	 * ================================================ */

	get subscribe() {
		return {
			'{{context.EVENTS.pagescrollThrottled}}': 'onPageScroll'
		};
	}

	/**
	 * Adjust height and vertical position of controller depending on components viewport height and vertical map
	 * position
	 *
	 * @param {Object} [e] - Event object
	 */
	onPageScroll(e) {
		if (
			isInViewport(this.el) &&
			!this.$bgAnimationWrapper.hasClass(this.options.classes.visible)
		) {
			this.$bgAnimationWrapper.addClass(this.options.classes.visible);
		}
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}
}

export default Quote;

HTML Output

Default

<div class="c-quote--default" data-css="c-quote" data-js-module="quote">
	<div class="quote__container quote__container--no-picture">
		<div class="quote__bg-animation-wrapper " data-js-item="bg-animation-wrapper"></div>
		<div class="quote__content-container ">
			<blockquote class="quote__content">
				Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
			</blockquote>
			<cite class="quote__author">Prof. Dr. Bernd Huber, Präsident der LMU</cite>
			<a class="quote__link" href="#">Die LMU im Profil</a>
		</div>
	</div>
</div>

Default

<div class="c-quote--default is-with-picture" data-css="c-quote" data-js-module="quote">
	<div class="quote__container ">
		<div class="quote__bg-animation-wrapper " data-js-item="bg-animation-wrapper"></div>
		<div class="quote__content-container ">
			<blockquote class="quote__content">
				Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
			</blockquote>
			<cite class="quote__author">Prof. Dr. Bernd Huber, Präsident der LMU</cite>
			<a class="quote__link" href="#">Die LMU im Profil</a>
		</div>
		<div class="quote__picture-container">
			<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/1600x1600  1600w  , 
				 https://placehold.co/2400x2400  2400w  , 
				 https://placehold.co/3200x3200  3200w  " sizes=" 
				  (min-width: 1440px) 309px 
				  ,  (min-width: 768px) 220px 
				  ,   133px " />
				<!--[if IE 9]></audio><![endif]-->
				<img class="
				 picture__image lazyload" src="https://placehold.co/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
			</picture>
		</div>
	</div>
</div>

Default in Detailseite

<div class="c-quote--default-rte" data-css="c-quote" data-js-module="quote">
	<div class="quote__container quote__container--no-picture">
		<div class="quote__bg-animation-wrapper " data-js-item="bg-animation-wrapper"></div>
		<div class="quote__content-container ">
			<blockquote class="quote__content">
				Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen
			</blockquote>
			<cite class="quote__author">Prof. Dr. Bernd Huber, Präsident der LMU</cite>
			<a class="quote__link" href="#">Die LMU im Profil</a>
		</div>
	</div>
</div>

Default mit Bild in Detailseite

<div class="c-quote--default-rte is-with-picture" data-css="c-quote" data-js-module="quote">
	<div class="quote__container ">
		<div class="quote__bg-animation-wrapper " data-js-item="bg-animation-wrapper"></div>
		<div class="quote__content-container ">
			<blockquote class="quote__content">
				Many thanks to the LMU Gateway team for their assistance throughout my moving and settling in process in Munich. Their support regarding my residence permit application is much appreciated. It was also so much fun to join the Pub Quiz event and meet other international researchers from our university.international..international..international.
			</blockquote>
			<cite class="quote__author">MERVE KUTLU, PHD STUDENT (TR)</cite>
			<a class="quote__link" href="#">Die LMU im Profil</a>
		</div>
		<div class="quote__picture-container">
			<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/1600x1600  1600w  , 
				 https://placehold.co/2400x2400  2400w  , 
				 https://placehold.co/3200x3200  3200w  " sizes=" 
				  (min-width: 1440px) 309px 
				  ,  (min-width: 768px) 220px 
				  ,   133px " />
				<!--[if IE 9]></audio><![endif]-->
				<img class="
				 picture__image lazyload" src="https://placehold.co/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
			</picture>
		</div>
	</div>
</div>

Extern

<div class="c-quote--extern" data-css="c-quote">
	<div class="quote__container quote__container--no-picture">
		<div class="quote__bg-animation-wrapper "></div>
		<div class="quote__content-container ">
			<blockquote class="quote__content">
				Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
			</blockquote>
			<cite class="quote__author">Max Mustermann, Externer Redner</cite>
			<a class="quote__link" href="#">Die LMU im Profil</a>
		</div>
	</div>
</div>

Extern

<div class="c-quote--extern is-with-picture" data-css="c-quote">
	<div class="quote__container ">
		<div class="quote__bg-animation-wrapper "></div>
		<div class="quote__content-container ">
			<blockquote class="quote__content">
				Many thanks to the LMU Gateway team for their assistance throughout my moving and settling in process in Munich. Their support regarding my residence permit application is much appreciated. It was also so much fun to join the Pub Quiz event and meet other international researchers from our university.
			</blockquote>
			<cite class="quote__author">Max Mustermann, Externer Redner mit langem Namen</cite>
			<a class="quote__link" href="#">Die LMU im Profil</a>
		</div>
		<div class="quote__picture-container">
			<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/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
			</picture>
		</div>
	</div>
</div>

Extern in Detailseite

<div class="c-quote--extern-rte" data-css="c-quote">
	<div class="quote__container quote__container--no-picture">
		<div class="quote__bg-animation-wrapper "></div>
		<div class="quote__content-container is-no-link">
			<blockquote class="quote__content">
				Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
			</blockquote>
			<cite class="quote__author">Max Mustermann, Externer Redner</cite>
		</div>
	</div>
</div>

Extern mit Bild in Detailseite

<div class="c-quote--extern-rte is-with-picture" data-css="c-quote">
	<div class="quote__container ">
		<div class="quote__bg-animation-wrapper "></div>
		<div class="quote__content-container ">
			<blockquote class="quote__content">
				Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
			</blockquote>
			<cite class="quote__author">Max Mustermann, Externer Redner</cite>
			<a class="quote__link" href="#">Infos zum Web</a>
		</div>
		<div class="quote__picture-container">
			<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/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
			</picture>
		</div>
	</div>
</div>

Extern mit Bild in Detailseite und Watermark

<div class="c-quote--extern-rte is-with-picture" data-css="c-quote">
	<div class="quote__container ">
		<div class="quote__bg-animation-wrapper is-with-watermark"></div>
		<div class="quote__content-container ">
			<blockquote class="quote__content">
				Wir setzen auf Weltoffenheit, Phantasie und zukunftsweisende Ideen – deshalb lade ich Sie herzlich dazu ein, mit uns an der LMU zu lernen, zu lehren und zu forschen
			</blockquote>
			<cite class="quote__author">Max Mustermann, Externer Redner</cite>
			<a class="quote__link" href="#">Infos zum Web</a>
		</div>
		<div class="quote__picture-container">
			<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/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
			</picture>
		</div>
	</div>
</div>

Extern with Watermark

<div class="c-quote--extern is-with-picture" data-css="c-quote">
	<div class="quote__container ">
		<div class="quote__bg-animation-wrapper is-with-watermark"></div>
		<div class="quote__content-container ">
			<blockquote class="quote__content">
				Many thanks to the LMU Gateway team for their assistance throughout my moving and settling in process in Munich. Their support regarding my residence permit application is much appreciated. It was also so much fun to join the Pub Quiz event and meet other international researchers from our university.
			</blockquote>
			<cite class="quote__author">Max Mustermann, Externer Redner mit langem Namen</cite>
			<a class="quote__link" href="#">Die LMU im Profil</a>
		</div>
		<div class="quote__picture-container">
			<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/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
			</picture>
		</div>
	</div>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link