KEY-FACTS (Standard Module )

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

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

Requirements

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://placehold.co/400x267",
											"alt": "Alternative text that describes the image",
											"items": [
												{
													"srcset": [
														{
															"src": "https://placehold.co/400x267",
															"imageWidth": "400w"
														},
														{
															"src": "https://placehold.co/800x534",
															"imageWidth": "800w"
														},
														{
															"src": "https://placehold.co/1200x801",
															"imageWidth": "1200w"
														},
														{
															"src": "https://placehold.co/1600x1068",
															"imageWidth": "1600w"
														},
														{
															"src": "https://placehold.co/2000x1335",
															"imageWidth": "2000w"
														},
														{
															"src": "https://placehold.co/2400x1602",
															"imageWidth": "2400w"
														},
														{
															"src": "https://placehold.co/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://placehold.co/400x267  400w  , 
				    			    				 https://placehold.co/800x534  800w  , 
				    			    				 https://placehold.co/1200x801  1200w  , 
				    			    				 https://placehold.co/1600x1068  1600w  , 
				    			    				 https://placehold.co/2000x1335  2000w  , 
				    			    				 https://placehold.co/2400x1602  2400w  , 
				    			    				 https://placehold.co/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://placehold.co/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>

Wonach suchst du?

Datenschutzhinweis mit Link