TEASER-TEXT (Teaser Module )

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

Demo Section

Each variation will be presented in the following section.

Default

H3 An der LMU studieren

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Far far away, behind the word mountain, a large language ocean.

Readme

teaserText (component)

Description

The Component consists of a headline, text and a linklist

JIRA

Installation

Installation with Veams from local machine

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

Fields

teaser-text.hbs

Settings

Parameter Type Default Description
settings.teaserTextClasses String '' Modifier classes for component
settings.teaserTextContextClass String 'default' Context class of component

Content

Parameter Type Description
content.headline String Headline
content.items Array List of list items
content.text Array List of paragraphs

teaser-text__item.hbs

Content

Parameter Type Description
content.linkTarget String Target for the link
content.linkHref String Href for text content
content.linkClasses String Modifier classes for the link
content.linkText String Link text

teaser-text__paragraph.hbs

Content

Parameter Type Description
content.paragraph String Text

SASS

Modifier Classes

There are modifier classes you can add to teaser-text__list-link:

Modifier Description
is-external For the external icon
is-mail For the mail icon

Templates

teaser-text.hbs

<div class="c-teaser-text{{#if
		settings.teaserTextContextClass}}--{{settings.teaserTextContextClass}}{{else}}--default{{/if}}{{#if
		settings.teaserTextClasses}} {{settings.teaserTextClasses}}{{/if}}"
     data-css="c-teaser-text">
	<h3 class="teaser-text__headline">{{content.headline}}</h3>
	<div class="teaser-text__text">
		{{#each content.text}}
			{{> teaser-text__paragraph}}
		{{/each}}
	</div>
	<ul class="teaser-text__list">
		{{#each content.items}}
			{{> teaser-text__item }}
		{{/each}}

	</ul>
</div>

teaser-text__item.hbs

<li class="teaser-text__list-item">
	<a {{#if content.linkTarget}}target="{{content.linkTarget}}" {{/if}}href="{{content.linkHref}}"
			class="teaser-text__list-link{{#if content.linkClasses}} {{content.linkClasses}}{{/if}}{{#is
					content.linkTarget "_blank"}} is-external{{/is}}" {{#is
			content.linkTarget "_blank"}} title="Link öffnet in neuem Fenster"{{/is}}>{{content.linkText}}</a>
</li>

teaser-text__paragraph.hbs

<p>{{content.paragraph}}</p>

Data File

teaser-text.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default",
				"onBG": "light"
			},
			"settings": {
				"teaserTextContextClass": "default",
				"teaserTextClasses": false
			},
			"content": {
				"headline": "H3 An der LMU studieren",
				"text": [
					{
						"content": {
							"paragraph": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
						}
					},
					{
						"content": {
							"paragraph": "Far far away, behind the word mountain, a large language ocean."
						}
					}
				],
				"items": [
					{
						"content": {
							"linkText": "Unsere Studiengänge",
							"linkClasses": false,
							"linkHref": "#",
							"linkTarget": false
						}
					},
					{
						"content": {
							"linkText": "Unsere Stellenangebote",
							"linkClasses": "is-external",
							"linkHref": "#",
							"linkTarget": false
						}
					},
					{
						"content": {
							"linkText": "info@lmu.de",
							"linkClasses": "is-mail",
							"linkHref": "mailto:test@test.de",
							"linkTarget": false
						}
					},
					{
						"content": {
							"linkText": "Unsere Studiengänge",
							"linkClasses": false,
							"linkHref": "#",
							"linkTarget": false
						}
					}
				]
			}
		}
	}
}

Styles

teaser-text.scss

/* ===================================================
component: teaser-text
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-teaser-text"] {
	padding: 20px;

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

	@include bp($bp-tablet-l) {
		padding: 30px;
	}

	@include bp($bp-desktop-m) {
		padding: 25px;
	}

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

	.teaser-text__headline {
		@include headline-h3-styles();

		color: $color-dark;
		font-family: $font-bold;
		font-weight: 700;
	}

	.teaser-text__text {

		p {
			font-family: $font-regular;
			font-size: 1.5rem;
			line-height: (22/15);
			letter-spacing: .25px;
			color: $color-dark;
			margin-bottom: 25px;

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

			@include bp($bp-tablet-l) {
				margin-bottom: 25px;
			}

			@include bp($bp-desktop-m) {
				font-size: 1.6rem;
				line-height: (24/16);
				margin-bottom: 30px;
			}
		}
	}

	.teaser-text__list {
		list-style: none;
		margin-bottom: 20px;
	}

	.teaser-text__list-item {
		margin-top: 14px;

		@include bp($bp-tablet-l) {
			margin-top: 16px;
		}
	}

	.teaser-text__list-link {
		font-family: $font-bold;
		font-weight: 700;
		font-size: 1.5rem;
		color: $color-green-hc-dark;
		text-decoration: none;
		transition: color $animation-duration-std/2 $animation-easing-std;

		@include print() {
			text-decoration: underline !important;
		}

		@include bp($bp-desktop-m) {
			font-size: 1.6rem;
		}

		&:focus {
			outline: none;
		}

		&:hover,
		&:focus {
			color: $color-dark;

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

				transform: translateX(5px);
			}
		}

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

			position: relative;
			display: inline-block;
			top: 1px;
			margin-right: 10px;
			vertical-align: unset;
			transition: transform $animation-duration-std $animation-easing-std;

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

		/*
		MODIFIERS
		----------------------- */
		&.a11y-focus-key {
			@include a11y-focus-key();
		}

		&.is-external {
			color: $color-green-hc-dark;
			transition: color $animation-duration-std/3 $animation-easing-std;
			display: inline-block;

			&:focus {
				outline: none;
			}

			&:hover,
			&.a11y-focus-key {
				color: $color-dark;

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

			&.a11y-focus-key {
				@include a11y-focus-key();
			}

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

				position: relative;
				display: inline-block;
				top: 1px;
				margin-right: 10px;
				vertical-align: unset;
			}
		}

		&.is-internal {

			&:hover,
			&.a11y-focus-key {
				color: $color-dark;
			}

			&.a11y-focus-key {
				@include a11y-focus-key();
			}
		}

		&.is-mail,
		&[href*="mailto:"] {
			color: $color-green-hc-dark;
			transition: color $animation-duration-std/3 $animation-easing-std;
			display: inline-block;

			&:focus {
				outline: none;
			}

			&:hover,
			&.a11y-focus-key {
				color: $color-dark;

				&::before {
					@include sprites-icon-mail-grey();
				}
			}

			&.a11y-focus-key {
				@include a11y-focus-key();
			}

			&::before {
				@include pseudo();
				@include sprites-icon-mail-green();

				position: relative;
				display: inline-block;
				top: 1px;
				margin-right: 10px;
				vertical-align: unset;
			}
		}
	}
}

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

HTML Output

Default

<div class="c-teaser-text--default" data-css="c-teaser-text">
	<h3 class="teaser-text__headline">H3 An der LMU studieren</h3>
	<div class="teaser-text__text">
		<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
		<p>Far far away, behind the word mountain, a large language ocean.</p>
	</div>
	<ul class="teaser-text__list">
		<li class="teaser-text__list-item">
			<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
		</li>
		<li class="teaser-text__list-item">
			<a href="#" class="teaser-text__list-link is-external">Unsere Stellenangebote</a>
		</li>
		<li class="teaser-text__list-item">
			<a href="mailto:test@test.de" class="teaser-text__list-link is-mail">info@lmu.de</a>
		</li>
		<li class="teaser-text__list-item">
			<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
		</li>
	</ul>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link