CONTENT-EMBEDED (LMU-Intern Modul )

src/app/shared/components/content-embeded/templates

Demo Section

Each variation will be presented in the following section.

Default Übersichtsseite

FundraisingBox Logo

Detailpage (RTE)

FundraisingBox Logo

Readme

contentEmbeded (component)

Description

Modul für den Rahmen zur Integration von externen Seiten über iframe o. Javascript.

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/content-embeded

Fields

content-embeded.hbs

Settings

Parameter Type Default Description
settings.contentEmbededClasses String '' Modifier classes for component
settings.contentEmbededContextClass String 'default' Context class of component
settings.contentEmbededJsOptions Object null JavaScript options object which gets stringified

Content

Parameter Type Description
content.contentEmbededField String Please add a description!

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$content-embeded-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-content-embeded:

Modifier Description
is-modifier Please add a description!

Templates

content-embeded.hbs

<div class="c-content-embeded{{#if settings.contentEmbededContextClass}}--{{settings.contentEmbededContextClass}}{{else}}--default{{/if}}{{#if settings.contentEmbededClasses}} {{settings.contentEmbededClasses}}{{/if}}"
     data-css="c-content-embeded">
     <script type="text/javascript" src="https://secure.fundraisingbox.com/app/paymentJS?hash=9simtqp9mssodq7a"></script><noscript>Bitte Javascript aktivieren</noscript><a target="_blank" href="https://www.fundraisingbox.com"><img border="0" style="border: 0 !important" src="https://secure.fundraisingbox.com/images/FundraisingBox-Logo-Widget.png" alt="FundraisingBox Logo" /></a>
</div>

Data File

content-embeded.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default Übersichtsseite"
			},
			"settings": {
				"contentEmbededContextClass": "default",
				"contentEmbededClasses": "",
				"contentEmbededJsOptions": {}
			},
			"content": {}
		},
		"rte": {
			"docs": {
				"variationName": "Detailpage (RTE)"
			},
			"settings": {
				"contentEmbededContextClass": "rte",
				"contentEmbededClasses": "",
				"contentEmbededJsOptions": {}
			},
			"content": {}
		}
	}
}

Styles

content-embeded.scss

/* ===================================================
component: content-embeded
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-content-embeded"] {

	.content-embeded__headline {
		@include headline-h2-styles();
	}

}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-content-embeded--default {
	position: relative;
	clear: both;
	margin-bottom: 60px;


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

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

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

.c-content-embeded--rte {

	@include rte-dimensions();
	margin-bottom: 25px;

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

	img {width: auto;}

	h3, h4 {
		margin-left: 0px;
		width: calc(100%);
		flex: 0 0 calc(100%);
	}

	.content-embeded__colorarea {
		background-color: $color-light;
		padding: 1em;

		.content-embeded__matomo-iframe {
			height: 300px;
			border: 0;
			width:100%;
			background-color: $color-light;

			@include bp($bp-tablet-p) {
				height: 200px;
			}

			@include bp($bp-desktop-m) {
				height: 150px;
			}
		}

	}

	.content-embeded__jobboerse {
		.content-embeded__jobboerse-iframe {
			height: 220px;
			border: 0;
			width: 100%;

			@include bp($bp-desktop-l) {
				height: 240px;
			}
		}
	}

	.content-embeded__pivotrp {
		.content-embeded__pivotrp-iframe {
			height: 500px;
			border: 0;
			width: 100%;
		}
	}
}

HTML Output

Default Übersichtsseite

<div class="c-content-embeded--default" data-css="c-content-embeded">
	<script type="text/javascript" src="https://secure.fundraisingbox.com/app/paymentJS?hash=9simtqp9mssodq7a"></script><noscript>Bitte Javascript aktivieren</noscript><a target="_blank" href="https://www.fundraisingbox.com"><img border="0" style="border: 0 !important" src="https://secure.fundraisingbox.com/images/FundraisingBox-Logo-Widget.png" alt="FundraisingBox Logo" /></a>
</div>

Detailpage (RTE)

<div class="c-content-embeded--rte" data-css="c-content-embeded">
	<script type="text/javascript" src="https://secure.fundraisingbox.com/app/paymentJS?hash=9simtqp9mssodq7a"></script><noscript>Bitte Javascript aktivieren</noscript><a target="_blank" href="https://www.fundraisingbox.com"><img border="0" style="border: 0 !important" src="https://secure.fundraisingbox.com/images/FundraisingBox-Logo-Widget.png" alt="FundraisingBox Logo" /></a>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link