HEADER-NEWS-DETAIL (Header Module )

src/app/shared/components/header-news-detail/templates

Demo Section

Each variation will be presented in the following section.

News

News

Maximal 70 Zeichen Überschriftslänge Lorem ipsum dolor sit amet, consetetur sadipscing elitr

17.08.2019

Maximal 150 Zeichen Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Facebook News

Twitter News

Instagram News

Instagram-News

Newsheadline Instagram | Kasd guber gren, no Searking Takimat Sanctus est

Instagram Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

You Tube News

You Tube-News

Newsheadline You Tube | Kasd guber gren, no Searking Takimat Sanctus est

You Tube Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Readme

headerNewsDetail (component)

Description

Component for a news detail head (Possibilities: Normal News, Social media News Facebook). The component contains the headline, the information und for a normal News the date and an Icon

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/header-news-detail

Fields

header-news-detail.hbs

Settings

Parameter Type Default Description
settings.headerNewsDetailClasses String '' Modifier classes for component
settings.errorPageContextClass String 'news' Context class of component news head
settings.errorPageContextClass String 'facebook-news' Context class of component facebook news head
settings.errorPageContextClass String 'twitter-news' Context class of component twitter news head

Content

Parameter Type Description
content.newsIconText String descriptive text for the News-Icon
content.newsHeadline String Head of the News (max. 70 signs)
content.newsDate String Datum der News
content.newsParagraph String Content of the news (max. 150 signs)

SASS

Variables

There are multiple variables which you can change:

Variable Value Description

Modifier Classes

There are modifier classes you can add to c-header-news-detail:

Modifier Description

Templates

header-news-detail.hbs

<div class="c-header-news-detail{{#if settings.headerNewsDetailContextClass}}--{{settings.headerNewsDetailContextClass}}{{else}}--default{{/if}}{{#if settings.headerNewsDetailClasses}} {{settings.headerNewsDetailClasses}}{{/if}}"
     data-css="c-header-news-detail"
     data-js-module="header-news-detail"{{#if settings.headerNewsDetailJsOptions}}
     data-js-options='{{stringify settings.headerNewsDetailJsOptions}}'{{/if}}>
    {{#wrapWith "grid__container"}}
		{{#wrapWith "grid__row"}}
            <div class="header-news-detail__container">
                <article class="header-news-detail__wrapper">
                    <div class="header-news-detail__iconarea"><div class="header-news-detail__icon" title="Icon {{content.newsIconText}}"><span class="header-news-detail__icon-text">{{content.newsIconText}}</span></div></div>
                    <div class="header-news-detail__content">
                        {{#if content.newsHeadline}}
                            <h1 class="header-news-detail__headline">{{{content.newsHeadline}}}</h1>
                        {{/if}}
                        {{#if content.newsDate}}
                            <p class="header-news-detail__date">{{content.newsDate}}</p>
                        {{/if}}
                        {{#if content.newsParagraph}}
                            <p class="header-news-detail__paragraph">{{content.newsParagraph}}</p>
                        {{/if}}
                    </div>
                </article>
            </div>
        {{/wrapWith}}
    {{/wrapWith}}
</div>

Data File

header-news-detail.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "News"
			},
			"settings": {
				"headerNewsDetailContextClass": "news",
				"headerNewsDetailClasses": ""
			},
			"content": {
				"newsIconText": "News",
				"newsHeadline": "Maximal 70 Zeichen Überschriftslänge Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
				"newsDate": "17.08.2019",
				"newsParagraph": "Maximal 150 Zeichen Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
			}
		},
		"facebook": {
			"docs": {
				"variationName": "Facebook News"
			},
			"settings": {
				"headerNewsDetailContextClass": "facebook-news",
				"headerNewsDetailClasses": ""
			},
			"content": {
				"newsIconText": "Facebook-News",
				"newsHeadline": "Newsheadline Facebook | Kasd guber gren, no Searking Takimat Sanctus est",
				"newsDate": "",
				"newsParagraph": "Facebook Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
			}
		},
		"twitter": {
			"docs": {
				"variationName": "Twitter News"
			},
			"settings": {
				"headerNewsDetailContextClass": "twitter-news",
				"headerNewsDetailClasses": ""
			},
			"content": {
				"newsIconText": "Twitter-News",
				"newsHeadline": "Newsheadline Twitter | Kasd guber gren, no Searking Takimat Sanctus est",
				"newsDate": "",
				"newsParagraph": "Twitter Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
			}
		},
		"instagram": {
			"docs": {
				"variationName": "Instagram News"
			},
			"settings": {
				"headerNewsDetailContextClass": "instagram-news",
				"headerNewsDetailClasses": ""
			},
			"content": {
				"newsIconText": "Instagram-News",
				"newsHeadline": "Newsheadline Instagram | Kasd guber gren, no Searking Takimat Sanctus est",
				"newsDate": "",
				"newsParagraph": "Instagram Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
			}
		},
		"youtube": {
			"docs": {
				"variationName": "You Tube News"
			},
			"settings": {
				"headerNewsDetailContextClass": "youtube-news",
				"headerNewsDetailClasses": ""
			},
			"content": {
				"newsIconText": "You Tube-News",
				"newsHeadline": "Newsheadline You Tube | Kasd guber gren, no Searking Takimat Sanctus est",
				"newsDate": "",
				"newsParagraph": "You Tube Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
			}
		}
	}
}

Styles

header-news-detail.scss

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-header-news-detail"] {
	/* Abstände angepasst an Abstände Header Event Detail  */
	position: relative;
	margin: 0 auto 60px;

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

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

	.header-news-detail__container{
		position: relative;

		&::before,
		&::after {
			@include pseudo();

			height: 100%;
			display: block;
			z-index: -1;
			top: 0;
		}

		&::before {
			@include grid-column-width(12);

			@include bp($bp-mobile-p) {
				@include grid-column-width(11);
			}

		}

		&::after {
			left: -50vw;
			width: 100vw;
		}
	}

	.header-news-detail__wrapper {
		padding: 39px 0;
		display: flex;
		flex-direction: column;

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

		@include bp($bp-desktop-l) {
			padding: 112px 0;
			flex-direction: row;
		}
	}

	.header-news-detail__iconarea {

		@include grid-column-width(10);

		@include bp($bp-desktop-l) {

			@include grid-column-width(1);

		}

		.header-news-detail__icon {
			width: 71px;
			height: 71px;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			transform-origin: left;
			transform: scale(.6);

			@include bp($bp-tablet-p) {
				transform: scale(.77);
				margin-bottom: 11px;
			}

			@include bp($bp-desktop-l) {
				transform: scale(1);
			}

			@include print() {
				display: none;
				width: 0;
				height: 0;
			}

			@include hcm() {
				transform: scale(1);
			}
		}

		.header-news-detail__icon-text {

			@include hidden-text();

			@include hcm() {
				padding: 2px;
				width: auto;
				height: auto;
				font-size: 1.2rem;
				line-height: (17/12);
				letter-spacing: .05rem;
				font-family: $font-regular;
				text-align: center;
			}

		}
	}

	.header-news-detail__content {

		@include grid-column-width(10);

		color: $color-white;

		@include bp($bp-tablet-p) {
			@include grid-column-width(10);

			margin-bottom: 10px;
		}

		@include bp($bp-tablet-l) {
			@include grid-column-width(10);

			margin-bottom: 20px;
		}

		@include bp($bp-desktop-m) {
			@include grid-column-width(9);

		}

		@include bp($bp-desktop-l) {
			@include grid-column-width(8);

			margin-top: 10px;
		}

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

	.header-news-detail__headline {
		@include headline-h1-styles();

		padding-bottom: 10px;

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

	.header-news-detail__date {
		font-weight: bold;
		line-height: (28/18);

		@include bp($bp-tablet-p) {
			line-height: (30/20);
		}

		@include bp($bp-desktop-m) {
			line-height: (34/22);
		}
	}

	.header-news-detail__paragraph {
		font-size: 1.8rem;
		line-height: (28/18);
		font-family: $font-light;

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

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

/* ---------------------------------------------------
Context: News
--------------------------------------------------- */
.c-header-news-detail--news {

	.header-news-detail__container {

		&::before,
		&::after {

			background-color: $color-dark;

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

		}
	}

	.header-news-detail__icon {

		@include hcm() {
			border: 1px solid $color-white;
		}
	}

	.header-news-detail__iconarea {

		.header-news-detail__icon-text {

			@include sprites-icon-news-tag-black();

		}
	}
}

/* ---------------------------------------------------
Context: Facebook
--------------------------------------------------- */
.c-header-news-detail--facebook-news {

	.header-news-detail__container {

		&::before,
		&::after {

			background-color: $color-blue;

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

		}
	}

	.header-news-detail__icon {

		border: 1px solid $color-white;

		.header-news-detail__icon-text {

			@include sprites-icon-facebook-white();

		}

	}

}

.c-header-news-detail--twitter-news {

	.header-news-detail__container {

		&::before,
		&::after {

			background-color: $color-blue;

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

		}
	}

	.header-news-detail__icon {

		border: 1px solid $color-white;

		.header-news-detail__icon-text {

			@include sprites-icon-twitter-white();

		}

	}

}

.c-header-news-detail--instagram-news {

	.header-news-detail__container {

		&::before,
		&::after {

			background-color: $color-blue;

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

		}
	}

	.header-news-detail__icon {

		border: 1px solid $color-white;

		.header-news-detail__icon-text {

			@include sprites-icon-instagram-white();

		}

	}

}

.c-header-news-detail--youtube-news {

	.header-news-detail__container {

		&::before,
		&::after {

			background-color: $color-blue;

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

		}
	}

	.header-news-detail__icon {

		border: 1px solid $color-white;

		.header-news-detail__icon-text {

			@include sprites-icon-youtube-white();

		}

	}

}

HTML Output

News

<div class="c-header-news-detail--news" data-css="c-header-news-detail" data-js-module="header-news-detail">
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-news-detail__container">
				<article class="header-news-detail__wrapper">
					<div class="header-news-detail__iconarea">
						<div class="header-news-detail__icon" title="Icon News"><span class="header-news-detail__icon-text">News</span></div>
					</div>
					<div class="header-news-detail__content">
						<h1 class="header-news-detail__headline">Maximal 70 Zeichen Überschriftslänge Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
						<p class="header-news-detail__date">17.08.2019</p>
						<p class="header-news-detail__paragraph">Maximal 150 Zeichen Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

Facebook News

<div class="c-header-news-detail--facebook-news" data-css="c-header-news-detail" data-js-module="header-news-detail">
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-news-detail__container">
				<article class="header-news-detail__wrapper">
					<div class="header-news-detail__iconarea">
						<div class="header-news-detail__icon" title="Icon Facebook-News"><span class="header-news-detail__icon-text">Facebook-News</span></div>
					</div>
					<div class="header-news-detail__content">
						<h1 class="header-news-detail__headline">Newsheadline Facebook | Kasd guber gren, no Searking Takimat Sanctus est</h1>
						<p class="header-news-detail__paragraph">Facebook Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

Twitter News

<div class="c-header-news-detail--twitter-news" data-css="c-header-news-detail" data-js-module="header-news-detail">
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-news-detail__container">
				<article class="header-news-detail__wrapper">
					<div class="header-news-detail__iconarea">
						<div class="header-news-detail__icon" title="Icon Twitter-News"><span class="header-news-detail__icon-text">Twitter-News</span></div>
					</div>
					<div class="header-news-detail__content">
						<h1 class="header-news-detail__headline">Newsheadline Twitter | Kasd guber gren, no Searking Takimat Sanctus est</h1>
						<p class="header-news-detail__paragraph">Twitter Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

Instagram News

<div class="c-header-news-detail--instagram-news" data-css="c-header-news-detail" data-js-module="header-news-detail">
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-news-detail__container">
				<article class="header-news-detail__wrapper">
					<div class="header-news-detail__iconarea">
						<div class="header-news-detail__icon" title="Icon Instagram-News"><span class="header-news-detail__icon-text">Instagram-News</span></div>
					</div>
					<div class="header-news-detail__content">
						<h1 class="header-news-detail__headline">Newsheadline Instagram | Kasd guber gren, no Searking Takimat Sanctus est</h1>
						<p class="header-news-detail__paragraph">Instagram Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

You Tube News

<div class="c-header-news-detail--youtube-news" data-css="c-header-news-detail" data-js-module="header-news-detail">
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-news-detail__container">
				<article class="header-news-detail__wrapper">
					<div class="header-news-detail__iconarea">
						<div class="header-news-detail__icon" title="Icon You Tube-News"><span class="header-news-detail__icon-text">You Tube-News</span></div>
					</div>
					<div class="header-news-detail__content">
						<h1 class="header-news-detail__headline">Newsheadline You Tube | Kasd guber gren, no Searking Takimat Sanctus est</h1>
						<p class="header-news-detail__paragraph">You Tube Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link