INFO-BOX (LMU-Intern Modul )

src/app/shared/components/info-box/templates

Demo Section

Each variation will be presented in the following section.

Default

LMU intern | Info-Box in der Übersichtsseite

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.

  1. test1
    1. testsub1
    2. testsub2
  2. test2
  3. test3

hier weiterer Text in dem dann ein Interner link oder Externer link oder download oder info@lmu.de oder 089/232323 steckt.

  • test1
    • testsub
    • testsub2
  • test2
  • test3

Hier dann nochmal Text um zu sehen wo die Box abschließt.

DefaultNotice

LMU intern | Info-Box in der Übersichtsseite als Notice

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.

  1. test1
    1. testsub1
    2. testsub2
  2. test2
  3. test3

hier weiterer Text in dem dann ein Interner link oder Externer link oder download oder info@lmu.de oder 089/232323 steckt.

  • test1
    • testsub
    • testsub2
  • test2
  • test3

Hier dann nochmal Text um zu sehen wo die Box abschließt.

DefaultAlert

LMU intern | Info-Box in der Übersichtsseite als Warnhinweis (Alert)

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.

  1. test1
    1. testsub1
    2. testsub2
  2. test2
  3. test3

hier weiterer Text in dem dann ein Interner link oder Externer link oder download oder info@lmu.de oder 089/232323 steckt.

  • test1
    • testsub
    • testsub2
  • test2
  • test3

Hier dann nochmal Text um zu sehen wo die Box abschließt.

Detailseite RTE als Standard (Infobox) (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)

LMU intern | Info-Box in der Detailseite

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.

  1. test1
    1. testsub1
    2. testsub2
  2. test2
  3. test3

hier weiterer Text in dem dann ein Interner link oder Externer link oder download oder info@lmu.de oder 089/232323 steckt.

  • test1
    • testsub
    • testsub2
  • test2
  • test3

Hier dann nochmal Text um zu sehen wo die Box abschließt.

Detailseite RTE Standard ohne Überschrift als Infobox (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)

Lorem ipsum dolor sit amet.

  1. test1
    1. testsub1
    2. testsub2
  2. test2
  3. test3

hier weiterer Text in dem dann ein Interner link oder Externer link oder download oder info@lmu.de oder 089/232323 steckt.

  • test1
    • testsub
    • testsub2
  • test2
  • test3

Hier dann nochmal Text um zu sehen wo die Box abschließt.

Detailseite RTE Notice (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)

LMU intern | Notice-Info-Box in der Detailseite

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.

  1. test1
    1. testsub1
    2. testsub2
  2. test2
  3. test3

hier weiterer Text in dem dann ein Interner link oder Externer link oder download oder info@lmu.de oder 089/232323 steckt.

  • test1
    • testsub
    • testsub2
  • test2
  • test3

Hier dann nochmal Text um zu sehen wo die Box abschließt.

Detailseite RTE Warnhinweis/Alert (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)

LMU intern | Alert-Info-Box in der Detailseite

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.

  1. test1
    1. testsub1
    2. testsub2
  2. test2
  3. test3

hier weiterer Text in dem dann ein Interner link oder Externer link oder download oder info@lmu.de oder 089/232323 steckt.

  • test1
    • testsub
    • testsub2
  • test2
  • test3

Hier dann nochmal Text um zu sehen wo die Box abschließt.

Readme

infoBox (component)

Description

This blueprint is based on the blueprint of Veams.

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/info-box

Fields

info-box.hbs

Settings

Parameter Type Default Description
settings.infoBoxClasses String '' Modifier classes for component. Here it is possible to set a Type of the infobox with Classes is-info, is-notice, is-alert. Depending on the classes the icon and the Frame color is changing
settings.infoBoxContextClass String 'default' Context class of component. ‘Default’ vor Using the Infobox in Context of a landingpage, ‘rte’ to using the Infobox in Context of a Detailpage

Content

Parameter Type Description
content.headline String You can enter a Headline. This Headline will be show in bigger and Bold lettern as a h2 html element
content.text String You can enter a Text. For Testing Lists, Links and paragraphs there a HTML-Tags in the hbs-File directly to simulate the diffenten Solution

SASS

Variables

There are multiple variables which you can change:

Variable Value Description

Modifier Classes

There are modifier classes you can add to c-info-box:

Modifier Description
is-info The Class is for the Main-Element and had an influence on the icon and the color of the frame. The icon is taken from the sprite-Solution, is green and has an i-symbol in it
is-notice The Class is for the Main-Element and had an influence on the icon and the color of the frame. The icon is taken from the sprite-Solution, is orange and has an !-symbol in it
is-alert The Class is for the Main-Element and had an influence on the icon and the color of the frame. The icon is taken from the sprite-Solution, is red and has an flash-symbol in it

Templates

info-box.hbs

<div class="c-info-box{{#if settings.infoBoxContextClass}}--{{settings.infoBoxContextClass}}{{else}}--default{{/if}}{{#if settings.infoBoxClasses}} {{settings.infoBoxClasses}}{{/if}}"
     data-css="c-info-box">
	 <div class="info-box__icon"></div>
	 <div class="info-box__area">

    {{#if content.headline}}
		<h2 class="info-box__headline">{{content.headline}}</h2>
	{{/if}}
	 {{#if content.text}}
		<div class="info-box__content"><p>{{content.text}}</p><ol><li>test1<ol><li>testsub1</li><li>testsub2</li></ol></li><li>test2</li><li>test3</li></ol><p>hier weiterer Text in dem dann ein <a href="https://www.lmu.de" class="is-internal">Interner link</a> oder  <a href="https://www.lmu.de" class="is-external">Externer link</a> oder <a href="https://www.lmu.de" class="is-download">download</a> oder <a href="mailto:info@lmu.de" class="is-mail">info@lmu.de</a> oder <a href="https://www.lmu.de" class="is-phone">089/232323</a> steckt.</p><ul><li>test1<ul><li>testsub</li><li>testsub2</li></ul></li><li>test2</li><li>test3</li></ul><p>Hier dann nochmal Text um zu sehen wo die Box abschließt.</p></div>
	{{/if}}
	</div>
</div>

Data File

info-box.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"infoBoxContextClass": "lpage",
				"infoBoxClasses": "is-info"
			},
			"content": {
				"headline": "LMU intern | Info-Box in der Übersichtsseite",
				"text": "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."
			}
		},"defaultwithcolor": {
			"docs": {
				"variationName": "DefaultNotice"
			},
			"settings": {
				"infoBoxContextClass": "lpage",
				"infoBoxClasses": "is-notice"
			},
			"content": {
				"headline": "LMU intern | Info-Box in der Übersichtsseite als Notice",
				"text": "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."
			}
		},"defaultwithcolor2": {
			"docs": {
				"variationName": "DefaultAlert"
			},
			"settings": {
				"infoBoxContextClass": "lpage",
				"infoBoxClasses": "is-alert"
			},
			"content": {
				"headline": "LMU intern | Info-Box in der Übersichtsseite als Warnhinweis (Alert)",
				"text": "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."
			}
		},
		"rte": {
			"docs": {
				"variationName": "Detailseite RTE als Standard (Infobox) (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)"
			},
			"settings": {
				"infoBoxContextClass": "rte",
				"infoBoxClasses": "is-info"
			},
			"content": {
				"headline": "LMU intern | Info-Box in der Detailseite",
				"text": "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."
			}
		},
		"rtenohead": {
			"docs": {
				"variationName": "Detailseite RTE Standard ohne Überschrift als Infobox  (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)"
			},
			"settings": {
				"infoBoxContextClass": "rte",
				"infoBoxClasses": "is-info"
			},
			"content": {
				"text": "Lorem ipsum dolor sit amet."
			}
		},
		"rtewithcolor": {
			"docs": {
				"variationName": "Detailseite RTE Notice  (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)"
			},
			"settings": {
				"infoBoxContextClass": "rte",
				"infoBoxClasses": "is-notice"
			},
			"content": {
				"headline": "LMU intern | Notice-Info-Box in der Detailseite",
				"text": "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."
			}
		},
		"rtewithcolor2": {
			"docs": {
				"variationName": "Detailseite RTE Warnhinweis/Alert  (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)"
			},
			"settings": {
				"infoBoxContextClass": "rte",
				"infoBoxClasses": "is-alert"
			},
			"content": {
				"headline": "LMU intern | Alert-Info-Box in der Detailseite",
				"text": "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

info-box.scss

/* ===================================================
component: info-box
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css~="c-info-box"] {

	clear: both;
	display: inline-block;
	position: relative;
	width: 100%;
	margin: 0 auto 60px;
	min-height: 82px;

	padding: 95px 20px 20px 20px;


	/*
	Print view
	----------------------- */
	@include print() {
		border: 1px solid $color-gray !important;
		padding: 20px;
	}

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


	&.is-info{
		border: 1px solid $color-green;

		.info-box__icon {
			@include sprites-icon-infobox-info();
		}
	}

	&.is-notice{
		border: 1px solid $color-orange;

		.info-box__icon {
			@include sprites-icon-infobox-notice();
		}
	}

	&.is-alert{
		border: 1px solid $color-red-light;

		.info-box__icon {
			@include sprites-icon-infobox-alert();
		}
	}






	.info-box__icon {
		@include pseudo();

		position: absolute;
		display: inline-block;
		top: 0;
		left:0;

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

	@include bp($bp-tablet-p) {
		padding: 25px 20px 20px 110px;
	}


}

/* ---------------------------------------------------
Context: Default Landingpage
--------------------------------------------------- */
.c-info-box--lpage {

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

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

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

	.info-box__area {
		position: relative;
		width: 100%;

		@include bp($bp-tablet-p) {
			padding-right: 50px;
		}

		@include bp($bp-tablet-l) {
			padding-right: 110px;
		}
	}

	.info-box__headline {
		@include headline-h2-styles();
	}

	.info-box__content {
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .025rem;
		color: $color-dark;

		ul {
			@include content-ul-styles();
			margin-left: 0px;
		}

		ol {
			@include content-ol-styles();
			margin-left: 0px;
		}

		a {
			@include content-a-styles();
		}

		@include bp($bp-tablet-p) {
			font-size: 1.6rem;
			line-height: (24/16);
			letter-spacing: .025rem;
		}

	}





}

/* ---------------------------------------------------
Context: RTE
--------------------------------------------------- */
.c-info-box--rte {
	margin-bottom: 15px;

	.info-box__headline {
		margin-top:0px;
		margin-left:0px;
		width: 100%;
	}

	.info-box__content {
		margin-bottom: 0px;
	}
}

HTML Output

Default

<div class="c-info-box--lpage is-info" data-css="c-info-box">
	<div class="info-box__icon"></div>
	<div class="info-box__area">
		<h2 class="info-box__headline">LMU intern | Info-Box in der Übersichtsseite</h2>
		<div class="info-box__content">
			<p>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>
			<ol>
				<li>test1<ol>
						<li>testsub1</li>
						<li>testsub2</li>
					</ol>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ol>
			<p>hier weiterer Text in dem dann ein <a href="https://www.lmu.de" class="is-internal">Interner link</a> oder <a href="https://www.lmu.de" class="is-external">Externer link</a> oder <a href="https://www.lmu.de" class="is-download">download</a> oder <a href="mailto:info@lmu.de" class="is-mail">info@lmu.de</a> oder <a href="https://www.lmu.de" class="is-phone">089/232323</a> steckt.</p>
			<ul>
				<li>test1<ul>
						<li>testsub</li>
						<li>testsub2</li>
					</ul>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ul>
			<p>Hier dann nochmal Text um zu sehen wo die Box abschließt.</p>
		</div>
	</div>
</div>

DefaultNotice

<div class="c-info-box--lpage is-notice" data-css="c-info-box">
	<div class="info-box__icon"></div>
	<div class="info-box__area">
		<h2 class="info-box__headline">LMU intern | Info-Box in der Übersichtsseite als Notice</h2>
		<div class="info-box__content">
			<p>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>
			<ol>
				<li>test1<ol>
						<li>testsub1</li>
						<li>testsub2</li>
					</ol>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ol>
			<p>hier weiterer Text in dem dann ein <a href="https://www.lmu.de" class="is-internal">Interner link</a> oder <a href="https://www.lmu.de" class="is-external">Externer link</a> oder <a href="https://www.lmu.de" class="is-download">download</a> oder <a href="mailto:info@lmu.de" class="is-mail">info@lmu.de</a> oder <a href="https://www.lmu.de" class="is-phone">089/232323</a> steckt.</p>
			<ul>
				<li>test1<ul>
						<li>testsub</li>
						<li>testsub2</li>
					</ul>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ul>
			<p>Hier dann nochmal Text um zu sehen wo die Box abschließt.</p>
		</div>
	</div>
</div>

DefaultAlert

<div class="c-info-box--lpage is-alert" data-css="c-info-box">
	<div class="info-box__icon"></div>
	<div class="info-box__area">
		<h2 class="info-box__headline">LMU intern | Info-Box in der Übersichtsseite als Warnhinweis (Alert)</h2>
		<div class="info-box__content">
			<p>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>
			<ol>
				<li>test1<ol>
						<li>testsub1</li>
						<li>testsub2</li>
					</ol>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ol>
			<p>hier weiterer Text in dem dann ein <a href="https://www.lmu.de" class="is-internal">Interner link</a> oder <a href="https://www.lmu.de" class="is-external">Externer link</a> oder <a href="https://www.lmu.de" class="is-download">download</a> oder <a href="mailto:info@lmu.de" class="is-mail">info@lmu.de</a> oder <a href="https://www.lmu.de" class="is-phone">089/232323</a> steckt.</p>
			<ul>
				<li>test1<ul>
						<li>testsub</li>
						<li>testsub2</li>
					</ul>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ul>
			<p>Hier dann nochmal Text um zu sehen wo die Box abschließt.</p>
		</div>
	</div>
</div>

Detailseite RTE als Standard (Infobox) (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)

<div class="c-info-box--rte is-info" data-css="c-info-box">
	<div class="info-box__icon"></div>
	<div class="info-box__area">
		<h2 class="info-box__headline">LMU intern | Info-Box in der Detailseite</h2>
		<div class="info-box__content">
			<p>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>
			<ol>
				<li>test1<ol>
						<li>testsub1</li>
						<li>testsub2</li>
					</ol>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ol>
			<p>hier weiterer Text in dem dann ein <a href="https://www.lmu.de" class="is-internal">Interner link</a> oder <a href="https://www.lmu.de" class="is-external">Externer link</a> oder <a href="https://www.lmu.de" class="is-download">download</a> oder <a href="mailto:info@lmu.de" class="is-mail">info@lmu.de</a> oder <a href="https://www.lmu.de" class="is-phone">089/232323</a> steckt.</p>
			<ul>
				<li>test1<ul>
						<li>testsub</li>
						<li>testsub2</li>
					</ul>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ul>
			<p>Hier dann nochmal Text um zu sehen wo die Box abschließt.</p>
		</div>
	</div>
</div>

Detailseite RTE Standard ohne Überschrift als Infobox (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)

<div class="c-info-box--rte is-info" data-css="c-info-box">
	<div class="info-box__icon"></div>
	<div class="info-box__area">
		<div class="info-box__content">
			<p>Lorem ipsum dolor sit amet.</p>
			<ol>
				<li>test1<ol>
						<li>testsub1</li>
						<li>testsub2</li>
					</ol>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ol>
			<p>hier weiterer Text in dem dann ein <a href="https://www.lmu.de" class="is-internal">Interner link</a> oder <a href="https://www.lmu.de" class="is-external">Externer link</a> oder <a href="https://www.lmu.de" class="is-download">download</a> oder <a href="mailto:info@lmu.de" class="is-mail">info@lmu.de</a> oder <a href="https://www.lmu.de" class="is-phone">089/232323</a> steckt.</p>
			<ul>
				<li>test1<ul>
						<li>testsub</li>
						<li>testsub2</li>
					</ul>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ul>
			<p>Hier dann nochmal Text um zu sehen wo die Box abschließt.</p>
		</div>
	</div>
</div>

Detailseite RTE Notice (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)

<div class="c-info-box--rte is-notice" data-css="c-info-box">
	<div class="info-box__icon"></div>
	<div class="info-box__area">
		<h2 class="info-box__headline">LMU intern | Notice-Info-Box in der Detailseite</h2>
		<div class="info-box__content">
			<p>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>
			<ol>
				<li>test1<ol>
						<li>testsub1</li>
						<li>testsub2</li>
					</ol>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ol>
			<p>hier weiterer Text in dem dann ein <a href="https://www.lmu.de" class="is-internal">Interner link</a> oder <a href="https://www.lmu.de" class="is-external">Externer link</a> oder <a href="https://www.lmu.de" class="is-download">download</a> oder <a href="mailto:info@lmu.de" class="is-mail">info@lmu.de</a> oder <a href="https://www.lmu.de" class="is-phone">089/232323</a> steckt.</p>
			<ul>
				<li>test1<ul>
						<li>testsub</li>
						<li>testsub2</li>
					</ul>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ul>
			<p>Hier dann nochmal Text um zu sehen wo die Box abschließt.</p>
		</div>
	</div>
</div>

Detailseite RTE Warnhinweis/Alert (Layout (Listen, Links) wird erst im RTE-Kontext sichtbar, Siehe Detailseite - Sprint 1)

<div class="c-info-box--rte is-alert" data-css="c-info-box">
	<div class="info-box__icon"></div>
	<div class="info-box__area">
		<h2 class="info-box__headline">LMU intern | Alert-Info-Box in der Detailseite</h2>
		<div class="info-box__content">
			<p>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>
			<ol>
				<li>test1<ol>
						<li>testsub1</li>
						<li>testsub2</li>
					</ol>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ol>
			<p>hier weiterer Text in dem dann ein <a href="https://www.lmu.de" class="is-internal">Interner link</a> oder <a href="https://www.lmu.de" class="is-external">Externer link</a> oder <a href="https://www.lmu.de" class="is-download">download</a> oder <a href="mailto:info@lmu.de" class="is-mail">info@lmu.de</a> oder <a href="https://www.lmu.de" class="is-phone">089/232323</a> steckt.</p>
			<ul>
				<li>test1<ul>
						<li>testsub</li>
						<li>testsub2</li>
					</ul>
				</li>
				<li>test2</li>
				<li>test3</li>
			</ul>
			<p>Hier dann nochmal Text um zu sehen wo die Box abschließt.</p>
		</div>
	</div>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link