Each variation will be presented in the following section.
Dann kontaktieren Sie uns. Wir sind von Montag bis Freitag zwischen 8 - 12 Uhr und 13 - 18 Uhr für Sie telefonisch erreichbar.
Dann kontaktieren Sie uns. Wir sind von Montag bis Freitag zwischen 8 - 12 Uhr und 13 - 18 Uhr für Sie telefonisch erreichbar.
component)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.
veams install bp absolute/filepath/to/contact-module
contact-module.hbs| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.contactModuleContextClass | String | 'default' |
Context class of component |
| settings.contactModuleClasses | String | '' |
Modifier classes for component |
| 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 |
<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>
{
"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://via.placeholder.com/40x40",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src":"https://via.placeholder.com/1200x1200",
"imageWidth": "1200w"
},
{
"src":"https://via.placeholder.com/600x600",
"imageWidth": "600w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "617px"
},
{
"screenWidth": "",
"imageWidth": "50vw"
}
],
"media": "(min-width:1280px)"
},
{
"srcset": [
{
"src":"https://via.placeholder.com/600x300",
"imageWidth": "600w"
},
{
"src":"https://via.placeholder.com/1200x600",
"imageWidth": "1200w"
},
{
"src":"https://via.placeholder.com/2400x1200",
"imageWidth": "2400w"
}
],
"sizes": [
{
"screenWidth": "",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
],
"media": "(min-width:600px)"
},
{
"srcset": [
{ "src":"https://via.placeholder.com/300x300",
"imageWidth": "300w"
},
{ "src":"https://via.placeholder.com/600x600",
"imageWidth": "600w"
},
{ "src":"https://via.placeholder.com/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://via.placeholder.com/40x40",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src":"https://via.placeholder.com/1200x600",
"imageWidth": "1200w"
},
{
"src":"https://via.placeholder.com/2400x1200",
"imageWidth": "2400w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "617px"
},
{
"screenWidth": "",
"imageWidth": "50vw"
}
],
"media": "(min-width:1280px)"
},
{
"srcset": [
{
"src":"https://via.placeholder.com/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://via.placeholder.com/40x40",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src":"https://via.placeholder.com/1200x1200",
"imageWidth": "1200w"
},
{
"src":"https://via.placeholder.com/600x600",
"imageWidth": "600w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "617px"
},
{
"screenWidth": "",
"imageWidth": "50vw"
}
],
"media": "(min-width:1280px)"
},
{
"srcset": [
{
"src":"https://via.placeholder.com/600x300",
"imageWidth": "600w"
},
{
"src":"https://via.placeholder.com/1200x600",
"imageWidth": "1200w"
},
{
"src":"https://via.placeholder.com/2400x1200",
"imageWidth": "2400w"
}
],
"sizes": [
{
"screenWidth": "",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
],
"media": "(min-width:600px)"
},
{
"srcset": [
{ "src":"https://via.placeholder.com/300x300",
"imageWidth": "300w"
},
{ "src":"https://via.placeholder.com/600x600",
"imageWidth": "600w"
},
{ "src":"https://via.placeholder.com/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://via.placeholder.com/40x40",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src":"https://via.placeholder.com/1200x600",
"imageWidth": "1200w"
},
{
"src":"https://via.placeholder.com/2400x1200",
"imageWidth": "2400w"
}
],
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "617px"
},
{
"screenWidth": "",
"imageWidth": "50vw"
}
],
"media": "(min-width:1280px)"
},
{
"srcset": [
{
"src":"https://via.placeholder.com/600x300",
"imageWidth": "600w"
}
],
"sizes": [
{
"screenWidth": "",
"imageWidth": "1px"
}
],
"media": "(max-width:1279px)"
}
]
}
}
}
}
}
}
}
}
/* ===================================================
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;
}
}
}
<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://via.placeholder.com/1200x1200 1200w ,
https://via.placeholder.com/600x600 600w " sizes="
(min-width: 1440px) 617px
, 50vw " media=" (min-width:1280px)" />
<source data-srcset="
https://via.placeholder.com/600x300 600w ,
https://via.placeholder.com/1200x600 1200w ,
https://via.placeholder.com/2400x1200 2400w " sizes="
calc(100vw - ((100vw / 14) * 2)) " media=" (min-width:600px)" />
<source data-srcset="
https://via.placeholder.com/300x300 300w ,
https://via.placeholder.com/600x600 600w ,
https://via.placeholder.com/1200x1200 1200w " sizes="
calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 599px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://via.placeholder.com/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><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://via.placeholder.com/1200x600 1200w ,
https://via.placeholder.com/2400x1200 2400w " sizes="
(min-width: 1440px) 617px
, 50vw " media=" (min-width:1280px)" />
<source data-srcset="
https://via.placeholder.com/600x300 600w " sizes="
1px " media=" (max-width:1279px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://via.placeholder.com/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><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://via.placeholder.com/1200x1200 1200w ,
https://via.placeholder.com/600x600 600w " sizes="
(min-width: 1440px) 617px
, 50vw " media=" (min-width:1280px)" />
<source data-srcset="
https://via.placeholder.com/600x300 600w ,
https://via.placeholder.com/1200x600 1200w ,
https://via.placeholder.com/2400x1200 2400w " sizes="
calc(100vw - ((100vw / 14) * 2)) " media=" (min-width:600px)" />
<source data-srcset="
https://via.placeholder.com/300x300 300w ,
https://via.placeholder.com/600x600 600w ,
https://via.placeholder.com/1200x1200 1200w " sizes="
calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 599px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://via.placeholder.com/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><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://via.placeholder.com/1200x600 1200w ,
https://via.placeholder.com/2400x1200 2400w " sizes="
(min-width: 1440px) 617px
, 50vw " media=" (min-width:1280px)" />
<source data-srcset="
https://via.placeholder.com/600x300 600w " sizes="
1px " media=" (max-width:1279px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://via.placeholder.com/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>