TARGET-GROUP-ENTRY (Standard Module )

src/app/shared/components/target-group-entry/templates

Demo Section

Each variation will be presented in the following section.

Default

H2 Dein LMU Wegweiser

Doktoranden

An der LMU kannst du erfolgreich den nächsten Schritt machen. Durch große Forschungsnähe und exzellente Studienbedingungen.

Alle Informationen für Doktoranden

Default

H2 Dein LMU Wegweiser

Professoren

An der LMU kannst du erfolgreich den nächsten Schritt machen. Durch große Forschungsnähe und exzellente Studienbedingungen.

Alle Informationen für Professoren

Readme

targetGroupEntry (component)

Description

Component to show target group specific Container 2-4. Solution with integration of figure image element.

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/target-group-entry

Fields

target-group-entry.hbs

Settings

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

Content

Parameter Type Description
content.headline String Set the headline of the targetGroupEntry-area
content.description String Set the description of the area
content.box Array Define the image-text-boxes: Array of content-Objects for every image-box

target-group-entry__box.hbs

Content

Parameter Type Description
settings.targetGroupBoxClass String Css-Target-Group Postfix: Create a Class for the Target Group
content.headline String Set the headline of one Target-Group-box
content.description String Set the description of one Target-Group-box
content.links Array Links for a Target-Group-Box

target-group-entry__link.hbs

Content

Parameter Type Description
settings.linkClass String Css-Klass Name
content.linkText String Link text
content.linkHref String String of each link href

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$target-group-entry-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-target-group-entry:

Modifier Description
is-modifier Please add a description!

Templates

target-group-entry.hbs

<div class="c-target-group-entry{{#if settings.targetGroupEntryContextClass}}--{{settings.targetGroupEntryContextClass}}{{else}}--default{{/if}}{{#if settings.targetGroupEntryClasses}} {{settings.targetGroupEntryClasses}}{{/if}}"
     data-css="c-target-group-entry" data-js-module="target-group-entry"{{#if
     settings.targetGroupEntryJsOptions}}
     data-js-options='{{stringify settings.targetGroupEntryJsOptions}}'{{/if}}>
	  {{#wrapWith "grid__container"}}
		{{#wrapWith "grid__row"}}
			<div class="target-group-entry__container">
				{{#if content.headline}}
					<h2 class="target-group-entry__main-headline">{{content.headline}}</h2>
				{{/if}}
				<div class="target-group-entry__wrapper">
					{{#each content.box}}
						{{> target-group-entry__box}}
					{{/each}}
				</div>
			</div>
		{{/wrapWith}}
	{{/wrapWith}}
</div>

target-group-entry__box.hbs

<article class="target-group-entry__column{{#if settings.targetGroupBoxClass}} {{settings.targetGroupBoxClass}}{{/if}}">
		{{#if content.headline}}
		<h3 class="target-group-entry__box-headline">{{content.headline}}</h3>
		{{/if}}
		{{#if content.description}}
		<p class="target-group-entry__box-content">{{content.description}}</p>
		{{/if}}
		{{#each content.links}}
			{{> target-group-entry__link}}
		{{/each}}
</article>

target-group-entry__link.hbs

<a class="target-group-entry__link {{settings.linkClass}}" href="{{content.linkHref}}">{{content.linkText}}</a>

Data File

target-group-entry.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"targetGroupEntryContextClass": "default",
				"targetGroupEntryClasses": ""
			},
			"content": {
				"headline": "H2 Dein LMU Wegweiser",
				"box": [
					{
						"settings": {
							"targetGroupBoxClass": "targetgroup_01"
						},
						"content": {
							"headline": "Intranet und Serviceportal",
							"description": "Die LMU ist ein perfekter Start in eine erfolgreiche Karriere in Wissenschaft und Beruf",
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "Alle Informationen für Intranet und Serviceportal",
										"linkHref": "#"
									}
								}
							]
						}
					},
					{
						"settings": {
							"targetGroupBoxClass": "targetgroup_02"
						},
						"content": {
							"headline": "Doktoranden",
							"description": "An der LMU kannst du erfolgreich den nächsten Schritt machen. Durch große Forschungsnähe und exzellente Studienbedingungen.",
							"imagehref": "",
							"imageclass": "",
							"imagedescription": "",
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "Alle Informationen für Doktoranden",
										"linkHref": "#"
									}
								}
							]
						}
					},
					{
						"settings": {
							"targetGroupBoxClass": "targetgroup_03"
						},
						"content": {
							"headline": "Studierende",
							"description": "Mehr als eine Namensverlängerung: Eine Promation an der LMU öffnet dir die Türen zur Spitzenforschung.",
							"links": [
								{
									"settings": {
										"linkClass": "is-download"
									},
									"content": {
										"linkText": "Alle Informationen für Studierende",
										"linkHref": "#"
									}
								}
							]
						}
					},
					{
						"settings": {
							"targetGroupBoxClass": "targetgroup_06"
						},
						"content": {
							"headline": "Professoren",
							"description": "Lorem ipsum dolor sit amet, hjfg gn sdgj adfj jldfg dljfg dlkjr j dkljg dölkg ",
							"links": [
								{
									"settings": {
										"linkClass": "is-external"
									},
									"content": {
										"linkText": "Alle Informationen für Professoren",
										"linkHref": "#"
									}
								}
							]
						}
					}
				]
			}
		},
		"default2": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"targetGroupEntryContextClass": "default",
				"targetGroupEntryClasses": ""
			},
			"content": {
				"headline": "H2 Dein LMU Wegweiser",
				"box": [
					{
						"settings": {
							"targetGroupBoxClass": "targetgroup_05"
						},
						"content": {
							"headline": "Master",
							"description": "Die LMU ist ein perfekter Start in eine erfolgreiche Karriere in Wissenschaft und Beruf",
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "Alle Informationen für Master",
										"linkHref": "#"
									}
								}
							]
						}
					},
					{
						"settings": {
							"targetGroupBoxClass": "targetgroup_06"
						},
						"content": {
							"headline": "Professoren",
							"description": "An der LMU kannst du erfolgreich den nächsten Schritt machen. Durch große Forschungsnähe und exzellente Studienbedingungen.",
							"imagehref": "",
							"imageclass": "",
							"imagedescription": "",
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "Alle Informationen für Professoren",
										"linkHref": "#"
									}
								}
							]
						}
					},
					{
						"settings": {
							"targetGroupBoxClass": "targetgroup_07"
						},
						"content": {
							"headline": "Verwaltung",
							"description": "Mehr als eine Namensverlängerung: Eine Promation an der LMU öffnet dir die Türen zur Spitzenforschung.",
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "Alle Informationen für Verwaltung",
										"linkHref": "#"
									}
								}
							]
						}
					},
					{
						"settings": {
							"targetGroupBoxClass": "targetgroup_09"
						},
						"content": {
							"headline": "Studieninteressierte",
							"description": "Lorem ipsum dolor sit amet, hjfg gn sdgj adfj jldfg dljfg dlkjr j dkljg dölkg  dfdfdfdfddfffdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdf ",
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "Alle Informationen für Studieninteressierte",
										"linkHref": "#"
									}
								}
							]
						}
					}
				]
			}
		}
	}
}

Styles

target-group-entry.scss

/* ===================================================
component: target-group-entry
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-target-group-entry"] {
	background-color: $color-light;
	width: 100%;
	position: relative;
	display: inline-block;

	margin-bottom: 60px;

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

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

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

	@include print() {
		background-color: $color-white;
	}

	.target-group-entry__container {
		position: relative;
		padding: 30px 0;
		box-sizing: border-box;
		background: url('../media/targetgroup/arrow-targetgroup-gray-s.png') no-repeat 100% -50px ;

		@include bp($bp-tablet-p) {
			padding: 55px 0;
			background: url('../media/targetgroup/arrow-targetgroup-gray.png') no-repeat 100% -50px ;
		}

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

	.target-group-entry__main-headline {
		@include headline-h2-styles();
	}

	.target-group-entry__wrapper {

		margin: 0;
		padding: 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;


		@include bp($bp-desktop-l) {
			flex-flow: row nowrap;
		}

		@include print() {
			flex-flow: row wrap;
		}
	}

	.target-group-entry__column {
		position: relative;
		width: 100%;
		flex: 0 1 100%;
		margin: 20px 0 20px 0;
		padding-top: 118px;
		background: url('../media/targetgroup/01_intranet_serviceportal.png') no-repeat top left;
		text-overflow: ellipsis;
		overflow: hidden;
		display: block;

		@include bp($bp-tablet-p) {
			margin: 23px 0 23px 0;
			padding-top: 0;
			padding-left: 25%;
			background-position: 4% center;
		}

		@include bp($bp-tablet-l) {
			background-position: 7% center;
		}

		@include bp($bp-desktop-l) {
			margin: 0 2% 0 0;
			flex: 0 1 49%;
			max-width: 49%;
			padding-left: 0;
			padding-top: 118px;
			background-position: top left;

			&:last-child {
				margin-right: 0;
			}
		}

		@include print() {
			width: 100%;
			flex: 0 0 100%;
			padding-top: 0;
			flex-flow: row wrap;
		}

		&:last-child {
			margin-bottom: 0;
		}

		&.targetgroup_01 {
			background-image: url('../media/targetgroup/01_intranet_serviceportal.png');
		}

		&.targetgroup_02 {
			background-image: url('../media/targetgroup/02_doctoral.png');
		}

		&.targetgroup_03 {
			background-image: url('../media/targetgroup/03_student.png');
		}

		&.targetgroup_04 {
			background-image: url('../media/targetgroup/04_postdocs.png');
		}

		&.targetgroup_05 {
			background-image: url('../media/targetgroup/05_master.png');
		}

		&.targetgroup_06 {
			background-image: url('../media/targetgroup/06_professors.png');
		}

		&.targetgroup_07 {
			background-image: url('../media/targetgroup/07_administration.png');
		}

		&.targetgroup_08 {
			background-image: url('../media/targetgroup/08_interested_study.png');
		}

		&.targetgroup_09 {
			background-image: url('../media/targetgroup/09_guests.png');
		}

	}

	.target-group-entry__link {
		color: $color-green-hc-dark;
		font-size: 1.5rem;
		line-height: (22/15);
		font-family: $font-bold;
		text-decoration: none;
		position: relative;
		transition: color $animation-duration-std $animation-easing-std;
		padding: 2rem .6rem 2rem 30px;
		width: 100%;
		display: block;
		text-overflow: ellipsis;
		overflow: hidden;

		@include print() {
			font-family: $font-regular;
			padding: 2rem .6rem 2rem 0px;
			text-decoration: underline;
			letter-spacing: 0;
			color: $color-black;
		}

		@include hcm() {
			padding: 2rem .6rem 2rem 0px;
		}

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

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

				transform: perspective(1px) translateX(4px);

				@include print() {
					background-image: none;
				}
			}
		}

		&.a11y-focus-key {
			// NORMAL A11Y-STYLES NOT WORKING PROPERLY
			outline-offset: -2px;
		}

		&::before {
			@include pseudo();
			@include sprites-icon-arrow-green100();
			left: 0px;
			top: 3rem;
			margin-top: -7px;

			transition: transform $animation-duration-std $animation-easing-std;

			@include print() {
				left: 0;
				top: 0;
				margin-top: 0px;
				background-image: none;
			}

			@include hcm() {
				top: 0;
				left: 0;
				margin-top: 0px;
				background-image: none;
			}
		}

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

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

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

				@include print() {
					background-image: none;
				}

				@include hcm() {
					background-image: none;
				}
			}
		}

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

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

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

				@include print() {
					background-image: none;
				}

				@include hcm() {
					background-image: none;
				}
			}
		}
	}

	.target-group-entry__box-headline {
		@include headline-h3-styles();
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.target-group-entry__box-content {
		text-overflow: ellipsis;
		overflow: hidden;
	}

}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-target-group-entry--default {
}

HTML Output

Default

<div class="c-target-group-entry--default" data-css="c-target-group-entry" data-js-module="target-group-entry">
	<div class="grid__container">
		<div class="grid__row">
			<div class="target-group-entry__container">
				<h2 class="target-group-entry__main-headline">H2 Dein LMU Wegweiser</h2>
				<div class="target-group-entry__wrapper">
					<article class="target-group-entry__column targetgroup_01">
						<h3 class="target-group-entry__box-headline">Intranet und Serviceportal</h3>
						<p class="target-group-entry__box-content">Die LMU ist ein perfekter Start in eine erfolgreiche Karriere in Wissenschaft und Beruf</p>
						<a class="target-group-entry__link " href="#">Alle Informationen für Intranet und Serviceportal</a>
					</article>
					<article class="target-group-entry__column targetgroup_02">
						<h3 class="target-group-entry__box-headline">Doktoranden</h3>
						<p class="target-group-entry__box-content">An der LMU kannst du erfolgreich den nächsten Schritt machen. Durch große Forschungsnähe und exzellente Studienbedingungen.</p>
						<a class="target-group-entry__link " href="#">Alle Informationen für Doktoranden</a>
					</article>
					<article class="target-group-entry__column targetgroup_03">
						<h3 class="target-group-entry__box-headline">Studierende</h3>
						<p class="target-group-entry__box-content">Mehr als eine Namensverlängerung: Eine Promation an der LMU öffnet dir die Türen zur Spitzenforschung.</p>
						<a class="target-group-entry__link is-download" href="#">Alle Informationen für Studierende</a>
					</article>
					<article class="target-group-entry__column targetgroup_06">
						<h3 class="target-group-entry__box-headline">Professoren</h3>
						<p class="target-group-entry__box-content">Lorem ipsum dolor sit amet, hjfg gn sdgj adfj jldfg dljfg dlkjr j dkljg dölkg </p>
						<a class="target-group-entry__link is-external" href="#">Alle Informationen für Professoren</a>
					</article>
				</div>
			</div>
		</div>
	</div>
</div>

Default

<div class="c-target-group-entry--default" data-css="c-target-group-entry" data-js-module="target-group-entry">
	<div class="grid__container">
		<div class="grid__row">
			<div class="target-group-entry__container">
				<h2 class="target-group-entry__main-headline">H2 Dein LMU Wegweiser</h2>
				<div class="target-group-entry__wrapper">
					<article class="target-group-entry__column targetgroup_05">
						<h3 class="target-group-entry__box-headline">Master</h3>
						<p class="target-group-entry__box-content">Die LMU ist ein perfekter Start in eine erfolgreiche Karriere in Wissenschaft und Beruf</p>
						<a class="target-group-entry__link " href="#">Alle Informationen für Master</a>
					</article>
					<article class="target-group-entry__column targetgroup_06">
						<h3 class="target-group-entry__box-headline">Professoren</h3>
						<p class="target-group-entry__box-content">An der LMU kannst du erfolgreich den nächsten Schritt machen. Durch große Forschungsnähe und exzellente Studienbedingungen.</p>
						<a class="target-group-entry__link " href="#">Alle Informationen für Professoren</a>
					</article>
					<article class="target-group-entry__column targetgroup_07">
						<h3 class="target-group-entry__box-headline">Verwaltung</h3>
						<p class="target-group-entry__box-content">Mehr als eine Namensverlängerung: Eine Promation an der LMU öffnet dir die Türen zur Spitzenforschung.</p>
						<a class="target-group-entry__link " href="#">Alle Informationen für Verwaltung</a>
					</article>
					<article class="target-group-entry__column targetgroup_09">
						<h3 class="target-group-entry__box-headline">Studieninteressierte</h3>
						<p class="target-group-entry__box-content">Lorem ipsum dolor sit amet, hjfg gn sdgj adfj jldfg dljfg dlkjr j dkljg dölkg dfdfdfdfddfffdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdf </p>
						<a class="target-group-entry__link " href="#">Alle Informationen für Studieninteressierte</a>
					</article>
				</div>
			</div>
		</div>
	</div>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link