<div class="person-details">
<div class="label-title">Geschäftsleitung</div>
<h3 class="title-small">Urs Achermann</h3>
<dl>
<dd>CEO</dd>
<dd>
Telefon:
<a href="tel: +41449743021">+41 44 974 30 21</a>
</dd>
<dd>
<a href="mailto:uachermann@kvz-schule.ch">E-Mail schreiben</a>
</dd>
</dl>
<div class="row">
<div class="col-4 person-details-buttons">
<button class="btn btn-grey" data-person-details>Mehr</button>
</div>
<div class="col-8 person-details-image">
<img src="https://placehold.it/100x150" alt="alt text">
</div>
</div>
<div class="person-details-overlay">
<div class="person-details-overlay-dimmer"></div>
<div class="person-details-overlay-content">
<button class="person-details-overlay-close">
<i class="fal fa-times "></i> </button>
<div class="person-content">
<p><b class="is-highlighted">Urs Achermann</b> ist Mitglied der Schulleitung seit 2011 und heute CEO der KV Business School Zürich AG. Er schloss sein Wirtschafts- und Rechtsstudium an der Hochschule St. Gallen als lic. oec. HSG bzw. lic. iur. HSG ab. Er ist an der Universität Zürich ausgebildeter dipl. Handelslehrer HLA und verfügt über ein DAS in Weiterbildungsmanagement der Universität Bern. Frühere Stationen in seinem Werdegang waren die Schulleitung von AKAD Profession in Zürich und die Leitung des Weiterbildungszentrums KBZ Zug.</p>
<ul>
<li>lorem ipsum dolor</li>
<li>lorem ipsum dolor</li>
<li>lorem ipsum dolor</li>
</ul>
<p>lorem ipsum dolor <i>italic text yeee</i> <b>and bold text wuhuuu</b> and <u>underlined text</u> and <a href="#">inline links</a></p>
</div>
</div>
</div>
</div>
<div class="person-details">
<div class="label-title">{{ label }}</div>
<h3 class="title-small">{{ title }}</h3>
<dl>
{% set position_rendered %}{{ position }}{% endset %}
{% set telephone_rendered %}{{ value_tel }}{% endset %}
{% if position_rendered %}
<dd>{{ position }}</dd>
{% endif %}
{% if telephone_rendered %}
<dd>
{{ label_tel }}
{{ value_tel }}
</dd>
{% endif %}
{% if href_mail %}
<dd>
{{ href_mail }}
</dd>
{% endif %}
</dl>
<div class="row">
<div class="col-4 person-details-buttons">
{% if label_more %}
<button class="btn btn-grey" data-person-details>{{ label_more }}</button>
{% endif %}
</div>
<div class="col-8 person-details-image">
{% if image %}
{{ image }}
{% else %}
<img src="{{ image_src }}" alt="{{ image_alt }}">
{% endif %}
</div>
</div>
<div class="person-details-overlay">
<div class="person-details-overlay-dimmer"></div>
<div class="person-details-overlay-content">
<button class="person-details-overlay-close">
{% render "@components/01-core/icon/icon.twig" with {
icon_type: 'fal',
icon_id: 'fa-times'
} %}
</button>
{% set person_content_rendered %}{{ person_content }}{% endset %}
{% if person_content_rendered %}
<div class="person-content">
{{ person_content }}
</div>
{% endif %}
</div>
</div>
</div>
{
"label": "Geschäftsleitung",
"title": "Urs Achermann",
"position": "CEO",
"label_tel": "Telefon:",
"value_tel": "<a href=\"tel: +41449743021\">+41 44 974 30 21</a>",
"label_mail": "E-Mail:",
"href_mail": "<a href=\"mailto:uachermann@kvz-schule.ch\">E-Mail schreiben</a>",
"image_src": "https://placehold.it/100x150",
"image_alt": "alt text",
"image": "",
"label_more": "Mehr",
"person_content": "<p><b class=\"is-highlighted\">Urs Achermann</b> ist Mitglied der Schulleitung seit 2011 und heute CEO der KV Business School Zürich AG. Er schloss sein Wirtschafts- und Rechtsstudium an der Hochschule St. Gallen als lic. oec. HSG bzw. lic. iur. HSG ab. Er ist an der Universität Zürich ausgebildeter dipl. Handelslehrer HLA und verfügt über ein DAS in Weiterbildungsmanagement der Universität Bern. Frühere Stationen in seinem Werdegang waren die Schulleitung von AKAD Profession in Zürich und die Leitung des Weiterbildungszentrums KBZ Zug.</p><ul><li>lorem ipsum dolor</li><li>lorem ipsum dolor</li><li>lorem ipsum dolor</li></ul> <p>lorem ipsum dolor <i>italic text yeee</i> <b>and bold text wuhuuu</b> and <u>underlined text</u> and <a href=\"#\">inline links</a></p>"
}
$(document).on('click', '.person-details [data-person-details]', function() {
$(this).parent().parent().parent().find('.person-details-overlay').toggleClass('is-open');
});
$(document).on('click', '.person-details-overlay-dimmer', function() {
$(this).parent().removeClass('is-open');
});
$(document).on('click', '.person-details-overlay-close', function() {
$(this).parent().parent().removeClass('is-open');
});
.person-details {
background: $color-light-grey;
padding: 1rem;
height: 100%;
.label-title {
color: $primary;
margin-bottom: 0.5rem;
}
.title-small {
font-style: normal;
margin-bottom: 0.5rem;
}
dl {
dd {
height: 35px;
padding-top: 5px;
padding-bottom: 5px;
display: block;
margin: 0;
@extend .text-base;
}
}
img {
flex-shrink: 0;
width: 100%;
height: auto;
max-width: 10rem;
@include media-breakpoint-up(md) {
max-width: 12rem;
}
@include media-breakpoint-up(lg) {
max-width: 16rem;
}
}
.row > div {
margin-bottom: 0;
}
.person-details-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease-in-out;
&.is-open {
opacity: 1;
pointer-events: all;
}
.person-details-overlay-dimmer {
background: rgba(#fff, 0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.person-details-overlay-content {
max-width: 76rem;
width: 90%;
background: $secondary;
padding: 4rem 2rem;
position: relative;
z-index: 3;
color: #fff;
@extend .text-base;
@include media-breakpoint-up(md) {
padding: 4rem;
}
@include media-breakpoint-up(lg) {
padding: 8rem 12rem;
}
.is-highlighted {
color: $primary;
font-style: italic;
@extend .text-medium;
}
ul {
@include styled-list();
}
a {
color: $primary;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
.person-details-overlay-close {
background: none;
border: none;
color: #fff;
opacity: 0.8;
position: absolute;
right: 1rem;
top: 1rem;
font-size: 3.4rem;
outline: none;
&:hover {
opacity: 1;
}
@include media-breakpoint-up(lg) {
right: 2rem;
top: 2rem;
}
}
}
}
svg {
vertical-align: middle;
}
.person-details-buttons {
padding-right: 0;
.btn {
max-width: 90px;
margin-bottom: 1em;
width: 100%;
justify-content: space-between;
justify-content: center;
color: rgba(#fff, 0.8);
text-align: center;
&:hover {
color: rgba(#fff, 1);
}
}
}
.person-details-image {
text-align: right;
}
}
There are no notes for this item.