CONTACT-MODULE (Standard Module )

src/app/shared/components/contact-module/templates

Demo Section

Each variation will be presented in the following section.

Default

Small

Default Studiengangsdetailseite

SM1 | Kontaktmodul für Studiengangsdetailseite

Haben Sie noch Fragen?

Dann kontaktieren Sie uns. Wir sind von Montag bis Freitag zwischen 8 - 12 Uhr und 13 - 18 Uhr für Sie telefonisch erreichbar.

Alternative text that describes the image

Small Studiengangsdetailseite

Readme

contactModule (component)

Description

This blueprint is based on the blueprint of Veams. Contact module with two variants containing an H2, an optional H3, an optional paragraph, a figure (visible just on desktop for the second variant), address and contacts links.

JIRA

Requirements

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/contact-module

Fields

contact-module.hbs

Settings

Parameter Type Default Description
settings.contactModuleContextClass String 'default' Context class of component
settings.contactModuleClasses String '' Modifier classes for component

Content

Parameter Type Description
content.figure Object Data for embedded figure component
content.articleHeadline String Content of the article H2
content.articleSubHeadline String Content of the optional article H3
content.articleParagraph String Content of the optional article paragraph
content.addressTitle String Content of the address title
content.addressStock String Content of the address stock
content.addressStreet String Content of the address street
content.addressCity String Content of the address city
content.routeLinkHref String Content for the href of the map link
content.externalLinkTarget String Content for the external link target
content.routeLinkAnchor String Content for the anchor of the map link
content.phoneLinkHref String Content for the href of the phone link
content.mailLinkHref String Content for the href of the mail link
content.mailLinkAnchor String Content for the anchor of the mail link
content.mailOnPrint String Content for the mail on print view

Templates

contact-module.hbs

<div class="c-contact-module{{#if settings.contactModuleContextClass}}--{{settings.contactModuleContextClass}}{{else}}--default{{/if}}{{#if settings.contactModuleClasses}} {{settings.contactModuleClasses}}{{/if}}"
     data-css="c-contact-module">
	<article class="contact-module__container">
		<h2 class="contact-module__article-headline">{{content.articleHeadline}}</h2>
		<div class="contact-module__contacts-and-picture-container">
					<div class="contact-module__contacts-container">
						{{#xif this.content.articleSubHeadline '||' this.content.articleParagraph }}
							<div class="contact-module__article-content-container">
								{{#if content.articleSubHeadline}}
									<h3 class="contact-module__article-sub-headline">{{content.articleSubHeadline}}</h3>
								{{/if}}
								{{#if content.articleParagraph}}
									<p class="contact-module__article-paragraph">{{content.articleParagraph}}</p>
								{{/if}}
							</div>
						{{/xif}}
						<footer>
							{{#if content.openhourstxt}}
								<div class="contact-module__article-openhours-container">
									{{#if content.openhours}}
										<p class="contact-module__address is-title">{{content.openhours}}</p>
									{{/if}}
									{{#if content.openhourstxt}}
										<p class="contact-module__address">{{content.openhourstxt}}</p>
									{{/if}}
								</div>
							{{/if}}
							<address class="contact-module__address-and-links-container">
								<div class="contact-module__address-and-route-link-container">
									<p class="contact-module__address is-title">{{content.addressTitle}}</p>
									<p class="contact-module__address">{{content.addressStock}}</p>
									<p class="contact-module__address">{{content.addressStreet}}</p>
									<p class="contact-module__address is-city">{{content.addressCity}}</p>
									<a class="contact-module__contacts-links is-route"
									href="{{content.routeLinkHref}}"{{#if content.externalLinkTarget}}
									target="{{content.externalLinkTarget}}"{{/if}}>
										{{content.routeLinkAnchor}}
										<span class="contact-module__route-on-print"> ({{content.routeLinkHref}})</span>
									</a>
								</div>
								<div class="contact-module__phone-mail-links-container">
									<a class="contact-module__contacts-links is-mail"
									href="{{content.mailLinkHref}}">
										<span class="contact-module__mail-on-print">{{content.mailOnPrint}}</span>
										<span class="contact-module__mail-on-device">{{content.mailLinkAnchor}}</span>
									</a>
									<a class="contact-module__contacts-links is-phone"
									href="{{content.phoneLinkHref}}">{{content.phoneLinkAnchor}}</a>
									<a class="contact-module__contacts-links is-external" href="{{content.externalLinkHref}}">{{content.externalLinkAnchor}}</a>
									<a class="contact-module__contacts-links is-internal" href="{{content.internalLinkHref}}">{{content.internalLinkAnchor}}</a>
								</div>
							</address>
						</footer>
					</div>
			{{#with content.figure}}
				<div class="contact-module__picture-container">
					{{> figure }}
				</div>
			{{/with}}
		</div>
	</article>
</div>

Data File

contact-module.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"contactModuleContextClass": "default",
				"contactModuleClasses": false
			},
			"content": {
				"articleHeadline": "SM1 | Kontaktmodul",
				"articleSubHeadline": "Haben Sie noch Fragen?",
				"articleParagraph": "Dann kontaktieren Sie uns. Wir sind von Montag bis Freitag zwischen 8 - 12 Uhr und 13 - 18 Uhr für Sie telefonisch erreichbar.",
				"openhours": "Öffnungszeiten",
				"openhourstxt": "Mo - Di: 12.00 - 16.00 Uhr, Do - Fr: 8.00 - 16.00 Uhr",
				"addressTitle": "Ludwig-Maximilians-Universität München",
				"addressStock": "Erdgeschoss, Raum B 038",
				"addressStreet": "Theresienstraße 39",
				"addressCity": "80333 München",
				"routeLinkHref": "https://goo.gl/maps/t3mroQgQnjD2",
				"externalLinkTarget": "_blank",
				"routeLinkAnchor": "Wegbeschreibung",
				"phoneLinkHref": "tel:+498921804382",
				"phoneLinkAnchor": "+ 49 (0)89 2180-4382",
				"mailLinkHref": "mailto:XXXX@XXXX.XXX",
				"mailLinkAnchor": "E-Mail schreiben",
				"externalLinkHref": "http://www.zuendfunk.de",
				"externalLinkAnchor": "externer Link",
				"internalLinkHref": "http://www.zuendfunk.de",
				"internalLinkAnchor": "interner Link",
				"mailOnPrint": "XXXX@XXXX.XXX",
				"figure": {
					"settings": {
						"figureId": false,
						"figureContextClass": "contact-module",
						"figureClasses": "is-no-margin",
						"figureJsModule": true
					},
					"content": {
						"figurePicture": {
							"settings": {
								"pictureContextClass": "animated-objects",
								"pictureClasses": false,
								"lazyload": true,
								"autoSizes": true
							},
							"content": {
								"fallbackSrc": "https://placehold.co/40x40",
								"alt": "Alternative text that describes the image",
								"items": [
									{
										"srcset": [
											{
												"src":"https://placehold.co/1200x1200",
												"imageWidth": "1200w"
											},
											{
												"src":"https://placehold.co/600x600",
												"imageWidth": "600w"
											}
										],
										"sizes": [
											{
												"screenWidth": "(min-width: 1440px)",
												"imageWidth": "617px"
											},
											{
												"screenWidth": "",
												"imageWidth": "50vw"
											}
										],
										"media": "(min-width:1280px)"
									},
									{
										"srcset": [
											{
												"src":"https://placehold.co/600x300",
												"imageWidth": "600w"
											},
											{
												"src":"https://placehold.co/1200x600",
												"imageWidth": "1200w"
											},
											{
												"src":"https://placehold.co/2400x1200",
												"imageWidth": "2400w"
											}
										],
										"sizes": [
											{
												"screenWidth": "",
												"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
											}
										],
										"media": "(min-width:600px)"
									},
									{
										"srcset": [
											{	"src":"https://placehold.co/300x300",
												"imageWidth": "300w"
											},
											{	"src":"https://placehold.co/600x600",
												"imageWidth": "600w"
											},
											{	"src":"https://placehold.co/1200x1200",
												"imageWidth": "1200w"
											}
										],
										"sizes": [
											{
												"screenWidth": "",
												"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
											}
										],
										"media": "(max-width: 599px)"
									}
								]
							}
						}
					}
				}
			}
		},
		"small": {
			"docs": {
				"variationName": "Small"
			},
			"settings": {
				"contactModuleContextClass": "default",
				"contactModuleClasses": "is-small"
			},
			"content": {
				"articleHeadline": "SM1 | Kontaktmodul",
				"addressTitle": "Ludwig-Maximilians-Universität München",
				"addressStock": "Erdgeschoss, Raum B 038",
				"addressStreet": "Theresienstraße 39",
				"addressCity": "80333 München",
				"routeLinkHref": "https://goo.gl/maps/t3mroQgQnjD2",
				"externalLinkTarget": "_blank",
				"routeLinkAnchor": "Wegbeschreibung",
				"phoneLinkHref": "tel:+498921804382",
				"phoneLinkAnchor": "+ 49 (0)89 2180-4382",
				"mailLinkHref": "mailto:XXXX@XXXX.XXX",
				"mailLinkAnchor": "E-Mail schreiben",
				"externalLinkHref": "http://www.zuendfunk.de",
				"externalLinkAnchor": "externer Link",
				"internalLinkHref": "http://www.zuendfunk.de",
				"internalLinkAnchor": "interner Link",
				"mailOnPrint": "XXXX@XXXX.XXX",
				"figure": {
					"settings": {
						"figureId": false,
						"figureContextClass": "contact-module",
						"figureClasses": "is-no-margin",
						"figureJsModule": true
					},
					"content": {
						"figurePicture": {
							"settings": {
								"pictureContextClass": "animated-objects",
								"pictureClasses": false,
								"lazyload": true,
								"autoSizes": true
							},
							"content": {
								"fallbackSrc": "https://placehold.co/40x40",
								"alt": "Alternative text that describes the image",
								"items": [
									{
										"srcset": [
											{
												"src":"https://placehold.co/1200x600",
												"imageWidth": "1200w"
											},
											{
												"src":"https://placehold.co/2400x1200",
												"imageWidth": "2400w"
											}
										],
										"sizes": [
												{
													"screenWidth": "(min-width: 1440px)",
													"imageWidth": "617px"
												},
												{
													"screenWidth": "",
													"imageWidth": "50vw"
												}
										],
										"media": "(min-width:1280px)"
									},
									{
										"srcset": [
											{
												"src":"https://placehold.co/600x300",
												"imageWidth": "600w"
											}
										],
										"sizes": [
											{
												"screenWidth": "",
												"imageWidth": "1px"
											}
										],
										"media": "(max-width:1279px)"
									}
								]
							}
						}
					}
				}
			}
		},
		"defaultrte": {
			"docs": {
				"variationName": "Default Studiengangsdetailseite"
			},
			"settings": {
				"contactModuleContextClass": "rte",
				"contactModuleClasses": false,
				"contactModuleRte": true
			},
			"content": {
				"articleHeadline": "SM1 | Kontaktmodul für Studiengangsdetailseite",
				"articleSubHeadline": "Haben Sie noch Fragen?",
				"articleParagraph": "Dann kontaktieren Sie uns. Wir sind von Montag bis Freitag zwischen 8 - 12 Uhr und 13 - 18 Uhr für Sie telefonisch erreichbar.",
				"openhours": "Öffnungszeiten",
				"openhourstxt": "Mo - Di: 12.00 - 16.00 Uhr, Do - Fr: 8.00 - 16.00 Uhr",
				"addressTitle": "Ludwig-Maximilians-Universität München",
				"addressStock": "Erdgeschoss, Raum B 038",
				"addressStreet": "Theresienstraße 39",
				"addressCity": "80333 München",
				"routeLinkHref": "https://goo.gl/maps/t3mroQgQnjD2",
				"externalLinkTarget": "_blank",
				"routeLinkAnchor": "Wegbeschreibung",
				"phoneLinkHref": "tel:+498921804382",
				"phoneLinkAnchor": "+ 49 (0)89 2180-4382",
				"mailLinkHref": "mailto:XXXX@XXXX.XXX",
				"mailLinkAnchor": "E-Mail schreiben",
				"externalLinkHref": "http://www.zuendfunk.de",
				"externalLinkAnchor": "externer Link",
				"internalLinkHref": "http://www.zuendfunk.de",
				"internalLinkAnchor": "interner Link",
				"mailOnPrint": "XXXX@XXXX.XXX",
				"figure": {
					"settings": {
						"figureId": false,
						"figureContextClass": "contact-module",
						"figureClasses": "is-no-margin",
						"figureJsModule": true
					},
					"content": {
						"figurePicture": {
							"settings": {
								"pictureContextClass": "animated-objects",
								"pictureClasses": false,
								"lazyload": true,
								"autoSizes": true
							},
							"content": {
								"fallbackSrc": "https://placehold.co/40x40",
								"alt": "Alternative text that describes the image",
								"items": [
									{
										"srcset": [
											{
												"src":"https://placehold.co/1200x1200",
												"imageWidth": "1200w"
											},
											{
												"src":"https://placehold.co/600x600",
												"imageWidth": "600w"
											}
										],
										"sizes": [
											{
												"screenWidth": "(min-width: 1440px)",
												"imageWidth": "617px"
											},
											{
												"screenWidth": "",
												"imageWidth": "50vw"
											}
										],
										"media": "(min-width:1280px)"
									},
									{
										"srcset": [
											{
												"src":"https://placehold.co/600x300",
												"imageWidth": "600w"
											},
											{
												"src":"https://placehold.co/1200x600",
												"imageWidth": "1200w"
											},
											{
												"src":"https://placehold.co/2400x1200",
												"imageWidth": "2400w"
											}
										],
										"sizes": [
											{
												"screenWidth": "",
												"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
											}
										],
										"media": "(min-width:600px)"
									},
									{
										"srcset": [
											{	"src":"https://placehold.co/300x300",
												"imageWidth": "300w"
											},
											{	"src":"https://placehold.co/600x600",
												"imageWidth": "600w"
											},
											{	"src":"https://placehold.co/1200x1200",
												"imageWidth": "1200w"
											}
										],
										"sizes": [
											{
												"screenWidth": "",
												"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
											}
										],
										"media": "(max-width: 599px)"
									}
								]
							}
						}
					}
				}
			}
		},
		"smallrte": {
			"docs": {
				"variationName": "Small Studiengangsdetailseite"
			},
			"settings": {
				"contactModuleContextClass": "rte",
				"contactModuleClasses": "is-small",
				"contactModuleRte": true
			},
			"content": {
				"articleHeadline": "SM1 | Kontaktmodul S für Studiengangsdetailseite",
				"addressTitle": "Ludwig-Maximilians-Universität München",
				"addressStock": "Erdgeschoss, Raum B 038",
				"addressStreet": "Theresienstraße 39",
				"addressCity": "80333 München",
				"routeLinkHref": "https://goo.gl/maps/t3mroQgQnjD2",
				"externalLinkTarget": "_blank",
				"routeLinkAnchor": "Wegbeschreibung",
				"phoneLinkHref": "tel:+498921804382",
				"phoneLinkAnchor": "+ 49 (0)89 2180-4382",
				"mailLinkHref": "mailto:XXXX@XXXX.XXX",
				"mailLinkAnchor": "E-Mail schreiben",
				"externalLinkHref": "http://www.zuendfunk.de",
				"externalLinkAnchor": "externer Link",
				"internalLinkHref": "http://www.zuendfunk.de",
				"internalLinkAnchor": "interner Link",
				"mailOnPrint": "XXXX@XXXX.XXX",
				"figure": {
					"settings": {
						"figureId": false,
						"figureContextClass": "contact-module",
						"figureClasses": "is-no-margin",
						"figureJsModule": true
					},
					"content": {
						"figurePicture": {
							"settings": {
								"pictureContextClass": "animated-objects",
								"pictureClasses": false,
								"lazyload": true,
								"autoSizes": true
							},
							"content": {
								"fallbackSrc": "https://placehold.co/40x40",
								"alt": "Alternative text that describes the image",
								"items": [
									{
										"srcset": [
											{
												"src":"https://placehold.co/1200x600",
												"imageWidth": "1200w"
											},
											{
												"src":"https://placehold.co/2400x1200",
												"imageWidth": "2400w"
											}
										],
										"sizes": [
												{
													"screenWidth": "(min-width: 1440px)",
													"imageWidth": "617px"
												},
												{
													"screenWidth": "",
													"imageWidth": "50vw"
												}
										],
										"media": "(min-width:1280px)"
									},
									{
										"srcset": [
											{
												"src":"https://placehold.co/600x300",
												"imageWidth": "600w"
											}
										],
										"sizes": [
											{
												"screenWidth": "",
												"imageWidth": "1px"
											}
										],
										"media": "(max-width:1279px)"
									}
								]
							}
						}
					}
				}
			}
		}
	}
}

Styles

contact-module.scss

/* ===================================================
component: contact-module
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-contact-module"] {
	position: relative;

	// modifier
	&.is-small {

		.contact-module__picture-container {
			display: none;

			@include bp($bp-desktop-m) {
				display: block;
			}

		}

		.contact-module__contacts-container {
			padding: 17px 15px 31px;

			@include bp(600px) {
				padding: 30px 30px 40px;
			}

			@include print() {
				padding: 0px;
			}

		}
	}

	.contact-module__container {
		position: relative;
	}

	.contact-module__contacts-and-picture-container {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

		@include bp($bp-desktop-m) {
			flex-wrap: nowrap;
			flex-direction: row;
		}

	}

	.contact-module__picture-container {
		order: 1;
		flex: 1 1 100%;

		@include bp($bp-desktop-m) {
			order: 2;
			flex: 1 1 50%;
		}

		@include print() {
			display: none;
		}

	}

	.contact-module__contacts-container {
		order: 2;
		flex: 1 1 100%;
		background-color: $color-light;
		padding: 25px 15px 31px;

		@include bp(600px) {
			padding: 30px 30px 32px;
		}

		@include bp(900px) {
			padding: 30px 30px 47px;
		}

		@include bp($bp-desktop-m) {
			order: 1;
			flex: 1 1 50%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 47px 30px;
		}

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

	}

	.contact-module__article-content-container {
		margin-bottom: 40px;

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

	}

	.contact-module__article-sub-headline {

		@include headline-h4-styles();

	}

	.contact-module__article-paragraph {
		font-size: 1.5rem;
		letter-spacing: .025rem;
		line-height: (22/15);
		color: $color-dark;
	}

	.contact-module__article-openhours-container {
		margin-bottom: 20px;

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

	.contact-module__address-and-links-container {
		display: flex;
		flex-direction: column;

		@include bp(600px) {
			flex-direction: row;

			@include print() {
				flex-direction: column;
			}

		}

	}

	.contact-module__address-and-route-link-container {

		@include bp(600px) {
			flex: 1 1 55%;
			padding-right: 38px;
		}

	}

	.contact-module__address {
		display: block;
		font-size: 1.5rem;
		color: $color-dark;
		letter-spacing: .023rem;
		line-height: (24/15);

		// modifier
		&.is-title {
			font-family: $font-bold;
			padding-right: 46px;

			@include bp(600px) {
				padding-right: 0;
			}

		}

		&.is-street {
			margin-bottom: 12px;
		}

		&.is-city {
			margin-bottom: 15px;
		}
	}

	.contact-module__phone-mail-links-container {
		display: flex;
		flex-direction: column;

		@include bp(600px) {
			flex: 1 1 45%;
		}
	}

	.contact-module__contacts-links {
		display: inline-block;
		color: $color-green-hc-dark;
		padding-left: 30px;
		text-decoration: none;
		font-family: $font-bold;
		font-weight: 700;
		position: relative;
		font-size: 1.5rem;
		letter-spacing: .028rem;
		line-height: (22/15);
		transition: color $animation-duration-std/2 $animation-easing-std;

		@include print() {
			color: $color-black;
			text-decoration: underline !important;
		}

		@include hcm() {
			padding-left: 0;
		}

		.no-touch & {

			&:hover {
				color: $color-black;

				&::before,
				&::after {
					transform: translateX(5px);
				}

				&::before {
					opacity: 0;
				}

				&::after {
					opacity: 1;
				}
			}
		}

		&::before,
		&::after {

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

			@include pseudo();

			position: absolute;
			left: 0;
			transition: transform $animation-duration-std $animation-easing-std, opacity $animation-duration-std $animation-easing-std;
		}

		&::after {
			opacity: 0;
		}

		//modifier
		&.is-route {
			margin-bottom: 30px;

			@include bp(600px) {
				margin-bottom: 0;
			}

			&::before,
			&::after {
				position: absolute;
				top: 3px;
				margin: 0;
			}

			&::before {

				@include sprites-icon-externalarrow-green100();

			}

			&::after {

				@include sprites-icon-externalarrow-black();

			}
		}

		&.is-mail {

			margin-bottom: 30px;
			display: inline-block;

			@include bp(600px) {
				margin: 2px 0 21px;
			}

			&::before,
			&::after {
				position: absolute;
				top: 4px;
				margin: 0;
			}

			&::before {

				@include sprites-icon-mail-green();

			}

			&::after {

				@include sprites-icon-mail-grey();

			}
		}

		&.is-external {

			margin-bottom: 30px;

			@include bp(600px) {
				margin: 2px 0 21px;
			}

			&::before,
			&::after {
				position: absolute;
				top: 3px;
				margin: 0;
			}

			&::before {

				@include sprites-icon-externalarrow-green100();

			}

			&::after {

				@include sprites-icon-externalarrow-black();

			}
		}

		&.is-internal {

			margin-bottom: 30px;

			@include bp(600px) {
				margin: 2px 0 21px;
			}

			&::before,
			&::after {
				position: absolute;
				top: 3px;
				margin: 0;
			}

			&::before {

				@include sprites-icon-arrow-green100();

			}

			&::after {

				@include sprites-icon-arrow-black();

			}
		}

		&.is-phone {

			margin-bottom: 30px;

			@include bp(600px) {
				margin: 2px 0 21px;
			}

			&::before,
			&::after {
				position: absolute;
				top: 1px;
				margin: 0;
			}

			&::before {

				@include sprites-icon-phone-green();

			}

			&::after {

				@include sprites-icon-phone-grey();

			}
		}
	}

	.contact-module__mail-on-device {

		@include print() {

			@include visuallyhidden();

		}

	}

	.contact-module__mail-on-print,
	.contact-module__route-on-print {

		@include visuallyhidden();

		@include print() {

			@include visuallyvisible();
		}

	}

}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-contact-module--default {

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

	.contact-module__article-headline {

		@include headline-h2-styles();

	}
}

.c-contact-module--rte {


	margin-bottom: 60px;

	.contact-module__article-sub-headline {

		width: 100%;
		flex: 0 0 100%;
		margin-left: 0;

	}

	.contact-module__container {

		.c-figure--contact-module {
			width: 100%;
			flex: 0 0 100%;
			margin-left: 0;
		}

	}

	.contact-module__contacts-and-picture-container {

		@include bp($bp-tablet-p) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}

		@include bp($bp-tablet-l) {
			@include grid-column-width(10);
			@include grid-push-h(1);
		}

		@include bp($bp-desktop-m) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}

	}

	.contact-module__contacts-links {

		color: $color-green-hc-dark;

		&.is-external, &.is-mail, &.is-internal, &.is-phone {
			color: $color-green-hc-dark;
		}

	}



}

HTML Output

Default

<div class="c-contact-module--default" data-css="c-contact-module">
	<article class="contact-module__container">
		<h2 class="contact-module__article-headline">SM1 | Kontaktmodul</h2>
		<div class="contact-module__contacts-and-picture-container">
			<div class="contact-module__contacts-container">
				<div class="contact-module__article-content-container">
					<h3 class="contact-module__article-sub-headline">Haben Sie noch Fragen?</h3>
					<p class="contact-module__article-paragraph">Dann kontaktieren Sie uns. Wir sind von Montag bis Freitag zwischen 8 - 12 Uhr und 13 - 18 Uhr für Sie telefonisch erreichbar.</p>
				</div>
				<footer>
					<div class="contact-module__article-openhours-container">
						<p class="contact-module__address is-title">Öffnungszeiten</p>
						<p class="contact-module__address">Mo - Di: 12.00 - 16.00 Uhr, Do - Fr: 8.00 - 16.00 Uhr</p>
					</div>
					<address class="contact-module__address-and-links-container">
						<div class="contact-module__address-and-route-link-container">
							<p class="contact-module__address is-title">Ludwig-Maximilians-Universität München</p>
							<p class="contact-module__address">Erdgeschoss, Raum B 038</p>
							<p class="contact-module__address">Theresienstraße 39</p>
							<p class="contact-module__address is-city">80333 München</p>
							<a class="contact-module__contacts-links is-route" href="https://goo.gl/maps/t3mroQgQnjD2" target="_blank">
								Wegbeschreibung
								<span class="contact-module__route-on-print"> (https://goo.gl/maps/t3mroQgQnjD2)</span>
							</a>
						</div>
						<div class="contact-module__phone-mail-links-container">
							<a class="contact-module__contacts-links is-mail" href="mailto:XXXX@XXXX.XXX">
								<span class="contact-module__mail-on-print">XXXX@XXXX.XXX</span>
								<span class="contact-module__mail-on-device">E-Mail schreiben</span>
							</a>
							<a class="contact-module__contacts-links is-phone" href="tel:+498921804382">+ 49 (0)89 2180-4382</a>
							<a class="contact-module__contacts-links is-external" href="http://www.zuendfunk.de">externer Link</a>
							<a class="contact-module__contacts-links is-internal" href="http://www.zuendfunk.de">interner Link</a>
						</div>
					</address>
				</footer>
			</div>
			<div class="contact-module__picture-container">
				<figure class="c-figure--contact-module is-no-margin" data-css="c-figure" data-js-module="true">
					<div class="figure__wrapper">
						<picture class="c-picture--animated-objects
									 lazyload" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source data-srcset="
									 https://placehold.co/1200x1200  1200w  , 
									 https://placehold.co/600x600  600w  " sizes=" 
									  (min-width: 1440px) 617px 
									  ,   50vw " media=" (min-width:1280px)" />
							<source data-srcset="
									 https://placehold.co/600x300  600w  , 
									 https://placehold.co/1200x600  1200w  , 
									 https://placehold.co/2400x1200  2400w  " sizes=" 
									   calc(100vw - ((100vw / 14) * 2)) " media=" (min-width:600px)" />
							<source data-srcset="
									 https://placehold.co/300x300  300w  , 
									 https://placehold.co/600x600  600w  , 
									 https://placehold.co/1200x1200  1200w  " sizes=" 
									   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 599px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
									 picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
						</picture>
					</div>
				</figure>
			</div>
		</div>
	</article>
</div>

Small

<div class="c-contact-module--default is-small" data-css="c-contact-module">
	<article class="contact-module__container">
		<h2 class="contact-module__article-headline">SM1 | Kontaktmodul</h2>
		<div class="contact-module__contacts-and-picture-container">
			<div class="contact-module__contacts-container">
				<footer>
					<address class="contact-module__address-and-links-container">
						<div class="contact-module__address-and-route-link-container">
							<p class="contact-module__address is-title">Ludwig-Maximilians-Universität München</p>
							<p class="contact-module__address">Erdgeschoss, Raum B 038</p>
							<p class="contact-module__address">Theresienstraße 39</p>
							<p class="contact-module__address is-city">80333 München</p>
							<a class="contact-module__contacts-links is-route" href="https://goo.gl/maps/t3mroQgQnjD2" target="_blank">
								Wegbeschreibung
								<span class="contact-module__route-on-print"> (https://goo.gl/maps/t3mroQgQnjD2)</span>
							</a>
						</div>
						<div class="contact-module__phone-mail-links-container">
							<a class="contact-module__contacts-links is-mail" href="mailto:XXXX@XXXX.XXX">
								<span class="contact-module__mail-on-print">XXXX@XXXX.XXX</span>
								<span class="contact-module__mail-on-device">E-Mail schreiben</span>
							</a>
							<a class="contact-module__contacts-links is-phone" href="tel:+498921804382">+ 49 (0)89 2180-4382</a>
							<a class="contact-module__contacts-links is-external" href="http://www.zuendfunk.de">externer Link</a>
							<a class="contact-module__contacts-links is-internal" href="http://www.zuendfunk.de">interner Link</a>
						</div>
					</address>
				</footer>
			</div>
			<div class="contact-module__picture-container">
				<figure class="c-figure--contact-module is-no-margin" data-css="c-figure" data-js-module="true">
					<div class="figure__wrapper">
						<picture class="c-picture--animated-objects
									 lazyload" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source data-srcset="
									 https://placehold.co/1200x600  1200w  , 
									 https://placehold.co/2400x1200  2400w  " sizes=" 
									  (min-width: 1440px) 617px 
									  ,   50vw " media=" (min-width:1280px)" />
							<source data-srcset="
									 https://placehold.co/600x300  600w  " sizes=" 
									   1px " media=" (max-width:1279px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
									 picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
						</picture>
					</div>
				</figure>
			</div>
		</div>
	</article>
</div>

Default Studiengangsdetailseite

<div class="c-contact-module--rte" data-css="c-contact-module">
	<article class="contact-module__container">
		<h2 class="contact-module__article-headline">SM1 | Kontaktmodul für Studiengangsdetailseite</h2>
		<div class="contact-module__contacts-and-picture-container">
			<div class="contact-module__contacts-container">
				<div class="contact-module__article-content-container">
					<h3 class="contact-module__article-sub-headline">Haben Sie noch Fragen?</h3>
					<p class="contact-module__article-paragraph">Dann kontaktieren Sie uns. Wir sind von Montag bis Freitag zwischen 8 - 12 Uhr und 13 - 18 Uhr für Sie telefonisch erreichbar.</p>
				</div>
				<footer>
					<div class="contact-module__article-openhours-container">
						<p class="contact-module__address is-title">Öffnungszeiten</p>
						<p class="contact-module__address">Mo - Di: 12.00 - 16.00 Uhr, Do - Fr: 8.00 - 16.00 Uhr</p>
					</div>
					<address class="contact-module__address-and-links-container">
						<div class="contact-module__address-and-route-link-container">
							<p class="contact-module__address is-title">Ludwig-Maximilians-Universität München</p>
							<p class="contact-module__address">Erdgeschoss, Raum B 038</p>
							<p class="contact-module__address">Theresienstraße 39</p>
							<p class="contact-module__address is-city">80333 München</p>
							<a class="contact-module__contacts-links is-route" href="https://goo.gl/maps/t3mroQgQnjD2" target="_blank">
								Wegbeschreibung
								<span class="contact-module__route-on-print"> (https://goo.gl/maps/t3mroQgQnjD2)</span>
							</a>
						</div>
						<div class="contact-module__phone-mail-links-container">
							<a class="contact-module__contacts-links is-mail" href="mailto:XXXX@XXXX.XXX">
								<span class="contact-module__mail-on-print">XXXX@XXXX.XXX</span>
								<span class="contact-module__mail-on-device">E-Mail schreiben</span>
							</a>
							<a class="contact-module__contacts-links is-phone" href="tel:+498921804382">+ 49 (0)89 2180-4382</a>
							<a class="contact-module__contacts-links is-external" href="http://www.zuendfunk.de">externer Link</a>
							<a class="contact-module__contacts-links is-internal" href="http://www.zuendfunk.de">interner Link</a>
						</div>
					</address>
				</footer>
			</div>
			<div class="contact-module__picture-container">
				<figure class="c-figure--contact-module is-no-margin" data-css="c-figure" data-js-module="true">
					<div class="figure__wrapper">
						<picture class="c-picture--animated-objects
									 lazyload" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source data-srcset="
									 https://placehold.co/1200x1200  1200w  , 
									 https://placehold.co/600x600  600w  " sizes=" 
									  (min-width: 1440px) 617px 
									  ,   50vw " media=" (min-width:1280px)" />
							<source data-srcset="
									 https://placehold.co/600x300  600w  , 
									 https://placehold.co/1200x600  1200w  , 
									 https://placehold.co/2400x1200  2400w  " sizes=" 
									   calc(100vw - ((100vw / 14) * 2)) " media=" (min-width:600px)" />
							<source data-srcset="
									 https://placehold.co/300x300  300w  , 
									 https://placehold.co/600x600  600w  , 
									 https://placehold.co/1200x1200  1200w  " sizes=" 
									   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 599px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
									 picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
						</picture>
					</div>
				</figure>
			</div>
		</div>
	</article>
</div>

Small Studiengangsdetailseite

<div class="c-contact-module--rte is-small" data-css="c-contact-module">
	<article class="contact-module__container">
		<h2 class="contact-module__article-headline">SM1 | Kontaktmodul S für Studiengangsdetailseite</h2>
		<div class="contact-module__contacts-and-picture-container">
			<div class="contact-module__contacts-container">
				<footer>
					<address class="contact-module__address-and-links-container">
						<div class="contact-module__address-and-route-link-container">
							<p class="contact-module__address is-title">Ludwig-Maximilians-Universität München</p>
							<p class="contact-module__address">Erdgeschoss, Raum B 038</p>
							<p class="contact-module__address">Theresienstraße 39</p>
							<p class="contact-module__address is-city">80333 München</p>
							<a class="contact-module__contacts-links is-route" href="https://goo.gl/maps/t3mroQgQnjD2" target="_blank">
								Wegbeschreibung
								<span class="contact-module__route-on-print"> (https://goo.gl/maps/t3mroQgQnjD2)</span>
							</a>
						</div>
						<div class="contact-module__phone-mail-links-container">
							<a class="contact-module__contacts-links is-mail" href="mailto:XXXX@XXXX.XXX">
								<span class="contact-module__mail-on-print">XXXX@XXXX.XXX</span>
								<span class="contact-module__mail-on-device">E-Mail schreiben</span>
							</a>
							<a class="contact-module__contacts-links is-phone" href="tel:+498921804382">+ 49 (0)89 2180-4382</a>
							<a class="contact-module__contacts-links is-external" href="http://www.zuendfunk.de">externer Link</a>
							<a class="contact-module__contacts-links is-internal" href="http://www.zuendfunk.de">interner Link</a>
						</div>
					</address>
				</footer>
			</div>
			<div class="contact-module__picture-container">
				<figure class="c-figure--contact-module is-no-margin" data-css="c-figure" data-js-module="true">
					<div class="figure__wrapper">
						<picture class="c-picture--animated-objects
									 lazyload" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source data-srcset="
									 https://placehold.co/1200x600  1200w  , 
									 https://placehold.co/2400x1200  2400w  " sizes=" 
									  (min-width: 1440px) 617px 
									  ,   50vw " media=" (min-width:1280px)" />
							<source data-srcset="
									 https://placehold.co/600x300  600w  " sizes=" 
									   1px " media=" (max-width:1279px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
									 picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
						</picture>
					</div>
				</figure>
			</div>
		</div>
	</article>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link