Contact-Box @contact-box
Contact-Box @contact-box
<div class="contact-box contact-box--blue">
<div class="contact-box__details">
<div class="contact-box__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Jan Philipp Schewe" height="175" src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" height="175" alt="Jan Philipp Schewe" /></div>
</div><button class="copyright js-tooltip contact-box__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen"><svg class="icon icon--copyright" viewBox="0 0 200 200">
<use xlink:href="#icon-copyright"></use>
</svg></button>
<div class="text contact-box__text">
<p><strong>Jan Philipp Schewe </strong><br /> Tel <a href="tel:71124847615">+49 (0) 711 248 476-15</a><br /> Fax +49 (0) 711 248 476-50 <br /> <a class="link" href="schewe@bwstiftung.de">schewe@bwstiftung.de</a></p>
</div>
</div>
</div>{
"headline": null,
"image": {
"width": 175,
"height": 175,
"alt": "Jan Philipp Schewe"
},
"text": {
"content": "p #[strong Jan Philipp Schewe ]#[br] Tel #[a(href='tel:71124847615') +49 (0) 711 248 476-15]#[br] Fax +49 (0) 711 248 476-50 #[br] #[a.link(href='schewe@bwstiftung.de') schewe@bwstiftung.de]\n"
},
"copyright": {
"title": "Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann"
}
}
Contact-Box text @contact-box--text
<div class="contact-box contact-box--blue contact-box--text">
<div class="contact-box__headline">
<h3 class="headline headline--3">Dienstleister</h3>
</div>
<div class="contact-box__details"><button class="copyright js-tooltip contact-box__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen"><svg class="icon icon--copyright" viewBox="0 0 200 200">
<use xlink:href="#icon-copyright"></use>
</svg></button>
<div class="text contact-box__text">
<p><strong>Vorname Name</strong><br />Abteilung Lorem ipsum <br />Tel <a href="tel:71124847615">+49 (0) 711 248476-15</a><br /> <a class="link" href="mustermann@bwstiftung.de">mustermann@bwstiftung.de</a></p>
</div>
</div>
</div>{
"headline": {
"size": 3,
"level": 3,
"text": "Dienstleister"
},
"image": null,
"text": {
"content": "p #[strong Vorname Name]#[br]Abteilung Lorem ipsum #[br]Tel #[a(href='tel:71124847615') +49 (0) 711 248476-15]#[br] #[a.link(href='mustermann@bwstiftung.de') mustermann@bwstiftung.de]\n"
},
"copyright": {
"title": "Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann"
}
}
Contact-Box highlight @contact-box--highlight
<div class="contact-box contact-box--mocca contact-box--highlight">
<div class="contact-box__headline">
<h2 class="headline headline--2">Winfried Kretschmann</h2>
</div>
<div class="contact-box__details">
<div class="contact-box__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Winfried Kretschmann" height="175" src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" height="175" alt="Winfried Kretschmann" /></div>
</div><button class="copyright js-tooltip contact-box__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen"><svg class="icon icon--copyright" viewBox="0 0 200 200">
<use xlink:href="#icon-copyright"></use>
</svg></button>
<div class="text contact-box__text">
<p><strong>Ministerpräsident</strong><br /> Vorsitzender des Aufsichtsrats</p>
</div>
</div>
</div>{
"headline": {
"level": 2,
"size": 2,
"text": "Winfried Kretschmann"
},
"image": {
"width": 175,
"height": 175,
"alt": "Winfried Kretschmann"
},
"text": {
"content": "p #[strong Ministerpräsident]#[br] Vorsitzender des Aufsichtsrats\n"
},
"copyright": {
"title": "Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann"
},
"highlight": true,
"backgroundColor": "mocca"
}
Contact-Box DGB Blue light @contact-box--dgb-blue
<div class="contact-box contact-box--dgb-blue">
<div class="contact-box__details">
<div class="contact-box__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Jan Philipp Schewe" height="175" src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" height="175" alt="Jan Philipp Schewe" /></div>
</div><button class="copyright js-tooltip contact-box__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen"><svg class="icon icon--copyright" viewBox="0 0 200 200">
<use xlink:href="#icon-copyright"></use>
</svg></button>
<div class="text contact-box__text">
<p><strong>Jan Philipp Schewe </strong><br /> Tel <a href="tel:71124847615">+49 (0) 711 248 476-15</a><br /> Fax +49 (0) 711 248 476-50 <br /> <a class="link" href="schewe@bwstiftung.de">schewe@bwstiftung.de</a></p>
</div>
</div>
</div>{
"headline": null,
"image": {
"width": 175,
"height": 175,
"alt": "Jan Philipp Schewe"
},
"text": {
"content": "p #[strong Jan Philipp Schewe ]#[br] Tel #[a(href='tel:71124847615') +49 (0) 711 248 476-15]#[br] Fax +49 (0) 711 248 476-50 #[br] #[a.link(href='schewe@bwstiftung.de') schewe@bwstiftung.de]\n"
},
"copyright": {
"title": "Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann"
},
"backgroundColor": "dgb-blue"
}
Contact-Box DGB Green light @contact-box--dgb-green
<div class="contact-box contact-box--dgb-green">
<div class="contact-box__details">
<div class="contact-box__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Jan Philipp Schewe" height="175" src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" height="175" alt="Jan Philipp Schewe" /></div>
</div><button class="copyright js-tooltip contact-box__copyright" title="Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann" aria-label="Bildquelle anzeigen"><svg class="icon icon--copyright" viewBox="0 0 200 200">
<use xlink:href="#icon-copyright"></use>
</svg></button>
<div class="text contact-box__text">
<p><strong>Jan Philipp Schewe </strong><br /> Tel <a href="tel:71124847615">+49 (0) 711 248 476-15</a><br /> Fax +49 (0) 711 248 476-50 <br /> <a class="link" href="schewe@bwstiftung.de">schewe@bwstiftung.de</a></p>
</div>
</div>
</div>{
"headline": null,
"image": {
"width": 175,
"height": 175,
"alt": "Jan Philipp Schewe"
},
"text": {
"content": "p #[strong Jan Philipp Schewe ]#[br] Tel #[a(href='tel:71124847615') +49 (0) 711 248 476-15]#[br] Fax +49 (0) 711 248 476-50 #[br] #[a.link(href='schewe@bwstiftung.de') schewe@bwstiftung.de]\n"
},
"copyright": {
"title": "Das ist ein recht langer Copyright-Hinweis die über mehrere Zeilen laufen kann"
},
"backgroundColor": "dgb-green"
}