Demo Section

Each variation will be presented in the following section.

Default: Textbox Left, big image

Alternative text that describes the image

Ruf der Wildnis

Die Farbe der Box des Textes wird als spezielle Klasse oder Flexibel als Hexawerte mitgegeben (in FS Eingabefelder) und im letzteren Fall als Inline-style-Element eingebunden. Die Farbe der Box des Textes wird als spezielle Klasse oder Flexibel als Hexawerte mitgegeben (in FS Eingabefelder) und im letzteren Fall als Inline-style-Element eingebunden.

Readme

teaser-highlight (`component`)

Description

This module serves as the template for a Highlight-teaser in the Einsichten digital Magazin. It contains an image, a headline, a descriptive text, a link. The image is over the whole site and the Textbox position is top left in the most viewports.

JIRA

New Modul from K&P

Requirements

@veams/component-figure - Figure component in Veams.

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/teaser-highlight

Fields

`teaser-highlight.hbs`

Settings

Parameter	Type	Default	Description
settings.teaserHighlightClasses	String	`''`	Modifier classes for component
settings.teaserHighlightContextClass	String	`'default'`	Context class of component

Content

Parameter	Type	Description
content.figure	Object	Data for embedded figure component
content.textbox	Object	Data for the Textbox

`teaser-highlight__textbox.hbs`

Settings

Parameter	Type	Default	Description
settings.textBoxClasses	String	`''`	Modifier classes for component area textbox

Content

Parameter	Type	Description
content.headline	String	Headline
content.text	String	Text
content.linkHref	String	Link-URL
content.linkText	String	Text for the shown Link
content.linkClasses	String	Extra CSS-Class to design the Link
content.linkExternal	Boolean	If set to `true` the clickarea link will get a target blank attribute and a css-class ‘is-external’
content.linkDownload	Boolean	If set to `true` the clickarea link will get a target blank attribute and a css-class ‘is-download’

SASS

Modifier Classes

You can add the following modifiers to teaser-highlight‚:

Modifier	Description

Templates

teaser-highlight.hbs

<div class="c-teaser-highlight{{#if
		settings.teaserHighlightContextClass}}--{{settings.teaserHighlightContextClass}}{{else}}--default{{/if}}{{#if
		settings.teaserHighlightClasses}} {{settings.teaserHighlightClasses}}{{/if}}"
     data-css="c-teaser-highlight">
		{{#wrapWith "grid__container"}}
			<div class="teaser-highlight__image-wrapper">
				{{#with content.figure}}
				{{> figure}}
				{{/with}}
			</div>
			{{#with content.textBox}}
				{{> teaser-highlight__textbox }}
			{{/with}}


		{{/wrapWith}}
</div>

teaser-highlight__textbox.hbs

<div class="teaser-highlight__wrapper {{#if settings.textBoxClasses}} {{settings.textBoxClasses}}{{/if}}">
	{{#wrapWith "grid__row"}}
		<div class="teaser-highlight__textbox">
			{{#if content.headline}}
			<h2 class="teaser-highlight__headline">
				{{content.headline}}
			</h2>
			{{/if}}
			{{#if content.text}}
			<p class="teaser-highlight__text">{{content.text}}</p>
			{{/if}}
			<a class="teaser-highlight__link{{#if content.linkExternal}} is-external{{/if}}{{#if content.linkDownload}} is-download{{/if}}{{#if
			content.linkClasses}} {{content.linkClasses}}{{/if}}"{{#if content.linkExternal}}
			target="_blank"{{/if}} href="{{content.linkHref}}">{{content.linkText}}</a>
			<a href="{{content.linkHref}}" class="teaser-highlight__a11y-clickarea"{{#if content.linkExternal}}
				   target="_blank"{{/if}} {{#if content.linkDownload}} target="_blank"{{/if}} aria-hidden="true" tabindex="-1"></a>
		</div>
	{{/wrapWith}}
</div>

Data File

teaser-highlight.hjson

{
	"title": "Einsichten Teaser Highlight",
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default: Textbox Left, big image"
			},
			"settings": {
				"teaserHighlightContextClass": "default",
				"teaserHighlightClasses": false
			},
			"content": {
				"figure": {
					"settings": {
						"figureId": false,
						"figureContextClass": "einsichten",
						"figureJsModule": true
					},
					"content": {
						"figurePicture": {
							"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/400x200",
												"imageWidth": "400w"
											},
											{
												"src": "https://placehold.co/800x400",
												"imageWidth": "800w"
											},
											{
												"src": "https://placehold.co/1200x600",
												"imageWidth": "1200w"
											},
											{
												"src": "https://placehold.co/1600x800",
												"imageWidth": "1600w"
											},
											{
												"src": "https://placehold.co/2000x1000",
												"imageWidth": "2000w"
											},
											{
												"src": "https://placehold.co/2400x1200",
												"imageWidth": "2400w"
											},
											{
												"src": "https://placehold.co/2800x1400",
												"imageWidth": "2800w"
											},
											{
												"src": "https://placehold.co/3200x1600",
												"imageWidth": "3200w"
											}
										],
										"media": "(min-width:1024px)"
									},
									{
										"srcset": [
											{
												"src": "https://placehold.co/300x200",
												"imageWidth": "300w"
											},
											{
												"src": "https://placehold.co/600x400",
												"imageWidth": "600w"
											},
											{
												"src": "https://placehold.co/900x600",
												"imageWidth": "900w"
											},
											{
												"src": "https://placehold.co/1200x800",
												"imageWidth": "1200w"
											},
											{
												"src": "https://placehold.co/1500x1000",
												"imageWidth": "1500w"
											},
											{
												"src": "https://placehold.co/1800x1200",
												"imageWidth": "1800w"
											},
											{
												"src": "https://placehold.co/2100x1400",
												"imageWidth": "2100w"
											},
											{
												"src": "https://placehold.co/2400x1600",
												"imageWidth": "2400w"
											}
										],
										"media": "(min-width: 481px)"
									},
									{
										"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"
											}
										],
										"media": "(max-width: 480px)"
									}
								]
							}
						}
					}
				},
				"textBox": {
					"settings": {
						"textBoxClasses": "is-es-color1"
					},
					"content": {
						"headline": "Ruf der Wildnis",
						"text": "Die Farbe der Box des Textes wird als spezielle Klasse oder Flexibel als Hexawerte mitgegeben (in FS Eingabefelder) und im letzteren Fall als Inline-style-Element eingebunden. Die Farbe der Box des Textes wird als spezielle Klasse oder Flexibel als Hexawerte mitgegeben (in FS Eingabefelder) und im letzteren Fall als Inline-style-Element eingebunden.",
						"linkHref": "#",
						"linkText": "Weiterlesen"
					}
				}
			}
		}
	}
}

Styles

teaser-highlight.scss

/* ===================================================
component: teaser-hightlight
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-teaser-highlight"] {

	@include clearfix();

	margin: 0 auto 60px;
	display: block;
	overflow: hidden;
	width: 100%;


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

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

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

	.teaser-highlight__image-wrapper {
		z-index: 1;
	}

	.teaser-highlight__wrapper {
		position: relative;
		width: 100%;
		height: auto;
		padding: 0;
		margin-top: 0;
		margin-left: 0;

		background-color: $color-black;
		color: $color-white;

		&.is-es-color1, &.is-es-color1 .teaser-highlight__textbox {
			//Pomona Green
			background-color: $color-es-green1;
		}

		&.is-es-color2, &.is-es-color2 .teaser-highlight__textbox {
			//Jungle Green
			background-color: $color-es-green2;
		}

		&.is-es-color3, &.is-es-color3 .teaser-highlight__textbox {
			//Indigo Blue
			background-color: $color-es-blue1;
		}

		&.is-es-color4, &.is-es-color4 .teaser-highlight__textbox {
			// Dark Slate Blue
			background-color: $color-es-blue2;
		}

		&.is-es-color5, &.is-es-color5 .teaser-highlight__textbox {
			// Violet
			background-color: $color-es-purple1;
		}

		&.is-es-color6, &.is-es-color6 .teaser-highlight__textbox {
			// Purple
			background-color: $color-es-purple2;
		}

		&.is-es-color7, &.is-es-color7 .teaser-highlight__textbox {
			// Wine
			background-color: $color-es-red1;
		}

		&.is-es-color8, &.is-es-color8 .teaser-highlight__textbox {
			//  Seal Brown
			background-color: $color-es-brown1;
		}

		&.is-es-color9, &.is-es-color9 .teaser-highlight__textbox {
			//  Saddle Brown
			background-color: $color-es-brown2;
		}

		&.is-es-color10, &.is-es-color10 .teaser-highlight__textbox {
			// Olive brown
			background-color: $color-es-brown3;
		}



		@include bp($bp-tablet-p) {
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 2;

			background-color: transparent;

			&.is-es-color1, &.is-es-color2, &.is-es-color3, &.is-es-color4, &.is-es-color5, &.is-es-color6, &.is-es-color7, &.is-es-color8, &.is-es-color9, &.is-es-color10 {
				background-color: transparent;
			}

		}
	}

	.grid__container {
		position: relative;
	}

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

		padding: 20px 0px;
		background-color: $color-black;
		color: $color-white;
		text-align: left;
		position: relative;

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

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

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

		@include bp($bp-tablet-p) {
			@include grid-column-width(6);
		}

		.teaser-highlight__headline {
			@include headline-h1-styles();
		}

		.teaser-highlight__text {
			font-family: $font-light;
			font-size: 1.8rem;
			line-height: (24/18);
			letter-spacing: 0;
			margin-bottom: 20px;

			@include bp($bp-desktop-m) {
				font-size: 2.2rem;
				line-height: (32/22);
				letter-spacing: .2px;
				margin-bottom: 35px;
			}
		}

		.teaser-highlight__link {
			position: relative;
			font-family: $font-bold;
			text-decoration: none;
			font-size: 1.5rem;
			line-height: (22/15);
			letter-spacing: .28px;
			color: $color-white;
			padding-left: 30px;
			transition: color $animation-duration-std $animation-easing-std;
			overflow: hidden;
			text-overflow: ellipsis;

			@include print() {
				text-decoration: underline !important;
				padding-left: 0px !important;
			}

			&::before {
				@include pseudo();
				@include sprites-icon-arrow-white();
				position: absolute;
				top: 2px;
				left: 0;
				transition: transform $animation-duration-std $animation-easing-std;

				@include print() {
					display: none !important;
				}
			}

			&.is-external {
				&::before {
					@include sprites-icon-externalarrow-white();
				}
			}

			&.is-download {
				&::before {
					@include sprites-icon-download-white();
				}
			}

			@include bp($bp-desktop-m) {
				font-size: 1.6rem;
				line-height: (15/16);
				letter-spacing: 0;
			}



			&:hover,
			&.a11y-focus-key {

				&::before {
					@include pseudo();
					@include sprites-icon-arrow-white();
					transform: translateX(5px);
				}

				&.is-external {

					&::before {
						@include sprites-icon-externalarrow-white();
					}
				}

				&.is-download {

					&::before {
						@include sprites-icon-download-white();
					}
				}
			}
		}

		.teaser-highlight__a11y-clickarea {
			@include clickarea();
		}

		&:hover,
		&.a11y-focus-key {

			.teaser-highlight__link {
				&::before {
					@include pseudo();
					@include sprites-icon-arrow-white();
					transform: translateX(5px);
				}

				&.is-external {

					&::before {
						@include sprites-icon-externalarrow-white();
					}
				}

				&.is-download {

					&::before {
						@include sprites-icon-download-white();
					}
				}
			}
		}
	}



}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-teaser-highlight--default {

}

HTML Output

Default: Textbox Left, big image

<div class="c-teaser-highlight--default" data-css="c-teaser-highlight">
	<div class="grid__container">
		<div class="teaser-highlight__image-wrapper">
			<figure class="c-figure--einsichten" 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://placehold.co/400x200  400w  , 
								 https://placehold.co/800x400  800w  , 
								 https://placehold.co/1200x600  1200w  , 
								 https://placehold.co/1600x800  1600w  , 
								 https://placehold.co/2000x1000  2000w  , 
								 https://placehold.co/2400x1200  2400w  , 
								 https://placehold.co/2800x1400  2800w  , 
								 https://placehold.co/3200x1600  3200w  " media=" (min-width:1024px)" />
						<source data-srcset="
								 https://placehold.co/300x200  300w  , 
								 https://placehold.co/600x400  600w  , 
								 https://placehold.co/900x600  900w  , 
								 https://placehold.co/1200x800  1200w  , 
								 https://placehold.co/1500x1000  1500w  , 
								 https://placehold.co/1800x1200  1800w  , 
								 https://placehold.co/2100x1400  2100w  , 
								 https://placehold.co/2400x1600  2400w  " media=" (min-width: 481px)" />
						<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  " media=" (max-width: 480px)" />
						<!--[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>
			</figure>
		</div>
		<div class="teaser-highlight__wrapper  is-es-color1">
			<div class="grid__row">
				<div class="teaser-highlight__textbox">
					<h2 class="teaser-highlight__headline">
						Ruf der Wildnis
					</h2>
					<p class="teaser-highlight__text">Die Farbe der Box des Textes wird als spezielle Klasse oder Flexibel als Hexawerte mitgegeben (in FS Eingabefelder) und im letzteren Fall als Inline-style-Element eingebunden. Die Farbe der Box des Textes wird als spezielle Klasse oder Flexibel als Hexawerte mitgegeben (in FS Eingabefelder) und im letzteren Fall als Inline-style-Element eingebunden.</p>
					<a class="teaser-highlight__link" href="#">Weiterlesen</a>
					<a href="#" class="teaser-highlight__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
				</div>
			</div>
		</div>
	</div>
</div>

TEASER-HIGHLIGHT (Einsichten Module )

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

Demo Section

Default: Textbox Left, big image

Ruf der Wildnis

Readme

teaser-highlight (`component`)

Description

JIRA

Requirements

Installation

Installation with Veams from local machine

Fields

`teaser-highlight.hbs`

Settings

Content

`teaser-highlight__textbox.hbs`

Settings

Content

SASS

Modifier Classes

Templates

teaser-highlight.hbs

teaser-highlight__textbox.hbs

Data File

teaser-highlight.hjson

Styles

teaser-highlight.scss

HTML Output

Default: Textbox Left, big image

Wonach suchst du?

TEASER-HIGHLIGHT (Einsichten Module )

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

Demo Section

Default: Textbox Left, big image

Ruf der Wildnis

Readme

teaser-highlight (component)

Description

JIRA

Requirements

Installation

Installation with Veams from local machine

Fields

teaser-highlight.hbs

Settings

Content

teaser-highlight__textbox.hbs

Settings

Content

SASS

Modifier Classes

Templates

teaser-highlight.hbs

teaser-highlight__textbox.hbs

Data File

teaser-highlight.hjson

Styles

teaser-highlight.scss

HTML Output

Default: Textbox Left, big image

Wonach suchst du?

teaser-highlight (`component`)

`teaser-highlight.hbs`

`teaser-highlight__textbox.hbs`