Demo Section

Each variation will be presented in the following section.

Default

Modulüberschrift H2: Wir an der LMU

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. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

1 Lorem ipsum dolor sit amet, consectetur

Alternative text that describes the image

Weibliche Studierende an der LMU im WS 2017/2018

30826

weibliche Studierende waren im Wintersemester 2017/18 an der LMU eingeschrieben

So zufrieden sind unsere Forscher

Forscher 2018, die 'sehr zufrieden' sind

Readme

keyFacts (`component`)

Description

Key-Facts element with three container (Stuffable by image, counter and pie chart) In each container the key-facts can be pie-chart, counter, image (as picture or figure element(f.e. with image description))

JIRA

LMU-400

Requirements

Veams#5.0.0
@veams/core - Veams Core Framework.
@veams/query or jquery - Veams Query or jQuery.
@veams/component - Veams Component.
@veams/component-counter - LMU spezifischer Counter component in Veams.
@veams/component-pie-chart - LMU spezifische Pie chart component in Veams.

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/key-facts

Fields

`key-facts.hbs`

Settings

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

Content

Parameter	Type	Description
content.headline	String	Headline of all three key fact boxes
content.text	String	Description or text of all three key fact boxes
content.box	Array	Array with objects for each key-fact box

`key-facts__box.hbs`

Content

Parameter	Type	Description
content.headline	String	Headline for a key fact boxes
content.description	String	Description of one key fact boxes

SASS

Variables

There are multiple variables which you can change:

Variable	Value	Description

Modifier Classes

There are modifier classes you can add to c-key-facts:

Templates

key-facts.hbs

<div class="c-key-facts{{#if settings.keyFactsContextClass}}--{{settings.keyFactsContextClass}}{{else}}--default{{/if}}{{#if settings.keyFactsClasses}} {{settings.keyFactsClasses}}{{/if}}"
     data-css="c-key-facts">
     {{#wrapWith "grid__container"}}
		{{#wrapWith "grid__row"}}
            {{#if content.headline}}
				<h2 class="key-facts__headline">{{content.headline}}</h2>
			{{/if}}
			{{#if content.text}}
				<div class="key-facts__text">{{content.text}}</div>
			{{/if}}
            <div class="key-facts__wrapper">
                {{#each content.box}}
				    {{> key-facts__box}}
			    {{/each}}
            </div>
        {{/wrapWith}}
	{{/wrapWith}}
</div>

key-facts__box.hbs

<article class="key-facts__box{{#if content.linkHref}} is-linkbox{{/if}}">
    {{#if content.headline}}<h3 class="key-facts__box-headline">{{content.headline}}</h3>{{/if}}
    {{#if content.picture}}
        <div class="key-facts__picture-container">
            {{#with content.picture}}
                {{> picture }}
            {{/with}}
        </div>
	{{/if}}
    {{#if content.figure}}
        <div class="key-facts__figure-container">
            {{#with content.figure}}
			    {{> figure }}
	        {{/with}}
        </div>
	{{/if}}
    {{#if content.counter}}
        <div class="key-facts__counter-container">
            {{#with content.counter}}
			    {{> counter }}
	        {{/with}}
        </div>
    {{/if}}
    {{#if content.piechart}}
        <div class="key-facts__pie-chart-container">
            {{#with content.piechart}}
			    {{> pie-chart }}
	        {{/with}}
        </div>
    {{/if}}
    {{#if content.description}}
			<div class="key-facts__box-content">{{content.description}}</div>
	{{/if}}
    {{#if content.linkHref}}
		<a href="{{content.linkHref}}" class="key-facts__link">{{content.linkContent}}</a>
	{{/if}}
    {{#if content.linkHref}}
		<a href="{{content.linkHref}}" class="key-facts__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
	{{/if}}
</article>

Data File

key-facts.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"keyFactsContextClass": "default",
				"keyFactsClasses": ""
			},
			"content": {
				"headline": "Modulüberschrift H2: Wir an der LMU",
				"text": "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. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.",
				"box": [
					{
						"content": {
							"figure": {
								"settings": {
									"figureId": "",
									"figureContextClass": "default",
									"figureClasses": "is-no-margin",
									"figureJsModule": "overlay-handler"
								},
								"content": {
									"figureZoom": false,
									"figurePicture": {
										"settings": {
											"pictureContextClass": "default",
											"pictureClasses": "three-column-img-text__picture",
											"lazyload": true,
											"autoSizes": true
										},
										"content": {
											"fallbackSrc": "https://via.placeholder.com/400x267",
											"alt": "Alternative text that describes the image",
											"items": [
												{
													"srcset": [
														{
															"src": "https://via.placeholder.com/400x267",
															"imageWidth": "400w"
														},
														{
															"src": "https://via.placeholder.com/800x534",
															"imageWidth": "800w"
														},
														{
															"src": "https://via.placeholder.com/1200x801",
															"imageWidth": "1200w"
														},
														{
															"src": "https://via.placeholder.com/1600x1068",
															"imageWidth": "1600w"
														},
														{
															"src": "https://via.placeholder.com/2000x1335",
															"imageWidth": "2000w"
														},
														{
															"src": "https://via.placeholder.com/2400x1602",
															"imageWidth": "2400w"
														},
														{
															"src": "https://via.placeholder.com/2800x1868",
															"imageWidth": "2800w"
														}
													],
													"sizes": [
														{
															"screenWidth": "(min-width: 768px)",
															"imageWidth": "calc((100vw - ((100vw / 14) * 2)) - 70vw)"
														},
														{
															"screenWidth": "(min-width: 480px)",
															"imageWidth": "calc((100vw - ((100vw / 14) * 2)) - 66.66666666666667vw)"
														},
														{
															"screenWidth": "(max-width: 479px)",
															"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
														}
													]
												}
											]
										}
									}
								}
							},
							"headline": "1 Lorem ipsum dolor sit amet, consectetur ",
							"description": ""
						}
					},
					{
						"content": {
							"counter": {
								"content": {
									"counterbox": {
										"count-from": "0",
										"count-to": "30826",
										"count-speed": "17500",
										"count-decimals": "",
										"count-unit": ""
									}
								}
							},
							"headline": "Weibliche Studierende an der LMU im WS 2017/2018",
							"description": "weibliche Studierende waren im Wintersemester 2017/18 an der LMU eingeschrieben"
						}
					},
					{
						"content": {
							"piechart": {
								"content": {
									"headline": "",
									"text-prae": "",
									"text-post": "Forscher 2018, die 'sehr zufrieden' sind",
									"piechartbox": {
										"chart-value": "87",
										"chart-title": "Pie chart with 87%",
										"chart-unit": "%"
									}
								}
							},
							"headline": "So zufrieden sind unsere Forscher",
							"description": ""
						}
					}
				]
			}
		}
	}
}

Styles

key-facts.scss

/* ===================================================
component: key-facts
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-key-facts"] {

	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;
	}

	.key-facts__headline {
		@include headline-h2-styles();
		font-family: $font-bold;
	}

	.key-facts__text {
		font-size: 1.8rem;
		line-height: (28/18);
		letter-spacing: .03rem;
		font-family: $font-light;
		margin-bottom: 25px;

		@include bp($bp-tablet-p) {
			font-size: 2rem;
			line-height: (30/20);
			letter-spacing: .02rem;
		}

		@include bp($bp-desktop-m) {
			font-size: 2.2rem;
			line-height: (34/22);
			letter-spacing: .02rem;
		}
	}

	.key-facts__wrapper {
		display: flex;
		flex-flow: row wrap;
		width: 100%;
		max-width: 410px;
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
		justify-content: flex-start;
		align-items: stretch;

		@include bp($bp-tablet-l) {
			max-width: none;
		}

		@include print() {
			page-break-inside: avoid;
		}
	}

	.key-facts__box {
		position: relative;
		background-color: $color-white;
		flex: 0 0 100%;
		padding: 6% 6.8% 6.8%;
		margin: 0 0 3px;
		background-color: $color-light;

		@include bp($bp-tablet-l) {
			flex: 1 1 33%;
			width: 33%;
			max-width: 33%;
			margin: 0 .5% 0 0;
			padding: 3% 3.8% 3.8%;
		}

		&.is-linkbox {

			&:hover {
				cursor: pointer;

				.key-facts__link {
					transform: translateX(10px);
					top: 10px;
					left: 0;

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

	.key-facts__box:last-child {
		@include bp($bp-tablet-p) {
			margin: 0;
		}
	}

	.key-facts__box-headline,
	.key-facts__box-content {
		font-size: 1.7rem;
		line-height: (24/17);
		letter-spacing: .03rem;

		@include bp($bp-tablet-p) {
			font-size: 1.8rem;
			line-height: (25/18);
			letter-spacing: .03rem;
		}

		@include bp($bp-desktop-m) {
			font-size: 2rem;
			line-height: (28/20);
			letter-spacing: .03rem;
		}
	}

	.key-facts__box-headline {
		margin-bottom: 12px;
		font-family: $font-bold;

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

	.key-facts__box-content {
		font-family: $font-light;
		padding-top: 15px;
	}

	.key-facts__counter-container {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
	}

	.key-facts__link {
		@include hidden-text();

		text-align: left;
		border: none;
		position: relative;
		display: inline-block;
		transition: transform $animation-duration-std $animation-easing-std;

		@include hcm() {
			font-size: 1.6rem;
			color: $color-dark;
			display: block;
			visibility: visible;
		}

		@include print() {
			display: none;
		}

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

			top: 10px;
			left: 0;
			position: relative;
			display: inline-block;
			margin-right: 10px;
		}
	}

	.key-facts__a11y-clickarea {
		@include hidden-text();
		@include clickarea();

		background-color: transparent;
		cursor: pointer;
		border: none;

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

	.key-facts__counter-container {

		.c-counter--default {
			padding: 4% 0 0;

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

			@include bp($bp-tablet-l) {
				padding: 10% 0 0;
			}
		}
	}

	.key-facts__pie-chart-container {

		.pie-chart__wrapper {
			padding: 2% 20%;

			@include bp($bp-tablet-p) {
				padding: 11% 18% 7%;
			}

			@include bp($bp-tablet-l) {
				padding: 2% 12%;
			}
		}
	}
}

Scripts

key-facts.js

/**
 * Description of KeyFacts.
 * Class properties and decorators are supported.
 *
 * @module KeyFacts
 * @version v1.0.0
 *
 * @author your_name
 */

// Imports
import Component from '@veams/component';

class KeyFacts extends Component {
	/**
	 * Class Properties
	 */

	/**
	 * 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 = {
			selectors: {},
			classes: {}
		};

		super(obj, options);
	}

	didMount() {
		console.log('Component KeyFacts mounted!');
	}

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

export default KeyFacts;

HTML Output

Default

<div class="c-key-facts--default" data-css="c-key-facts">
	<div class="grid__container">
		<div class="grid__row">
			<h2 class="key-facts__headline">Modulüberschrift H2: Wir an der LMU</h2>
			<div class="key-facts__text">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. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</div>
			<div class="key-facts__wrapper">
				<article class="key-facts__box">
					<h3 class="key-facts__box-headline">1 Lorem ipsum dolor sit amet, consectetur </h3>
					<div class="key-facts__figure-container">
						<figure class="c-figure--default is-no-margin" data-css="c-figure" data-js-module="overlay-handler">
							<div class="figure__wrapper">
								<picture class="c-picture--default
				    			    				 three-column-img-text__picture lazyload" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<source data-srcset="
				    			    				 https://via.placeholder.com/400x267  400w  , 
				    			    				 https://via.placeholder.com/800x534  800w  , 
				    			    				 https://via.placeholder.com/1200x801  1200w  , 
				    			    				 https://via.placeholder.com/1600x1068  1600w  , 
				    			    				 https://via.placeholder.com/2000x1335  2000w  , 
				    			    				 https://via.placeholder.com/2400x1602  2400w  , 
				    			    				 https://via.placeholder.com/2800x1868  2800w  " sizes=" 
				    			    				  (min-width: 768px) calc((100vw - ((100vw / 14) * 2)) - 70vw) 
				    			    				  ,  (min-width: 480px) calc((100vw - ((100vw / 14) * 2)) - 66.66666666666667vw) 
				    			    				  ,  (max-width: 479px) calc(100vw - ((100vw / 14) * 2)) " />
									<!--[if IE 9]></audio><![endif]-->
									<img class="
				    			    				 picture__image lazyload" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
								</picture>
							</div>
						</figure>
					</div>
				</article>
				<article class="key-facts__box">
					<h3 class="key-facts__box-headline">Weibliche Studierende an der LMU im WS 2017/2018</h3>
					<div class="key-facts__counter-container">
						<div class="c-counter--default" data-css="c-counter" data-js-module="counter">
							<div class="counter__timer is-inactive" data-js-item="counter__js__timer" data-js-lng="de" data-to="30826" data-from="0" data-speed="17500"><span class="counter__number" data-js-item="counter__js__number" aria-hidden="true">30826</span><span class="counter__numberto" data-js-item="counter__js__numberto">30826</span></div>
						</div>
					</div>
					<div class="key-facts__box-content">weibliche Studierende waren im Wintersemester 2017/18 an der LMU eingeschrieben</div>
				</article>
				<article class="key-facts__box">
					<h3 class="key-facts__box-headline">So zufrieden sind unsere Forscher</h3>
					<div class="key-facts__pie-chart-container">
						<div class="c-pie-chart--default" data-css="c-pie-chart" data-js-module="pie-chart">
							<div class="pie-chart__wrapper">
								<div class="pie-chart__container is-inactivesvg" data-js-item="piechart__js__container" data-value="87" data-title="Pie chart with 87%" data-unit="%"></div>
							</div>
							<div class="pie-chart__text-post">Forscher 2018, die &#x27;sehr zufrieden&#x27; sind</div>
						</div>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

KEY-FACTS (Standard Module )

src/app/shared/components/key-facts/templates

Demo Section

Default

Modulüberschrift H2: Wir an der LMU

1 Lorem ipsum dolor sit amet, consectetur

Weibliche Studierende an der LMU im WS 2017/2018

So zufrieden sind unsere Forscher

Readme

keyFacts (`component`)

Description

JIRA

Requirements

Installation

Installation with Veams from local machine

Fields

`key-facts.hbs`

Settings

Content

`key-facts__box.hbs`

Content

SASS

Variables

Modifier Classes

Templates

key-facts.hbs

key-facts__box.hbs

Data File

key-facts.hjson

Styles

key-facts.scss

Scripts

key-facts.js

HTML Output

Default

Wonach suchst du?

KEY-FACTS (Standard Module )

src/app/shared/components/key-facts/templates

Demo Section

Default

Modulüberschrift H2: Wir an der LMU

1 Lorem ipsum dolor sit amet, consectetur

Weibliche Studierende an der LMU im WS 2017/2018

So zufrieden sind unsere Forscher

Readme

keyFacts (component)

Description

JIRA

Requirements

Installation

Installation with Veams from local machine

Fields

key-facts.hbs

Settings

Content

key-facts__box.hbs

Content

SASS

Variables

Modifier Classes

Templates

key-facts.hbs

key-facts__box.hbs

Data File

key-facts.hjson

Styles

key-facts.scss

Scripts

key-facts.js

HTML Output

Default

Wonach suchst du?

keyFacts (`component`)

`key-facts.hbs`

`key-facts__box.hbs`