Styleguide

Person 

<div class="person">
    <div class="label-title">Leitung dieses Bildungsganges</div>

    <h3 class="title-small">Cornelia Hess</h3>
    <div class="person-infos">
        <div class="row">
            <div class="col-7">

                <a href="#lorem" class="btn btn-grey" data-person-details>
                    Zur Person
                    <i class="fas fa-user fa-fw"></i>
                </a>
                <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>
                        <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>

                <a data-value="" href="#lorem" class="btn btn-grey">
                    044 966 33 22
                    <i class="fas fa-phone fa-fw"></i>
                </a>

                <a data-value="" href="#lorem" class="btn btn-grey">
                    E-Mail
                    <i class="fas fa-envelope fa-fw"></i>
                </a>

            </div>
            <div class="col-5">
                <img src="https://placehold.it/100x150" alt="alt text">

            </div>
        </div>
    </div>

</div>
 
<div class="person">
    <div class="label-title">{{ label }}</div>
    {% for person in persons %}
    
    <h3 class="title-small">{{ person.title }}</h3>
    <div class="person-infos">
        <div class="row">
            <div class="col-7">
                {% for item in person.items %}
                    {% if not item.person_content %}
                      <a data-value="{{ item.data_value }}" href="{{ item.link_href }}" {% if item.link_onclick %}onclick="{{ item.link_onclick }}"{% endif %} class="btn btn-grey">
                        {{ item.link_text }}
                        {% if item.icon_id %}
                        {% render "@components/01-core/icon/icon.twig" with {
                            icon_type: item.icon_type,
                            icon_id: item.icon_id,
                            icon_options: item.icon_options
                        } %} 
                        {% endif %}
                    </a>
                    {% endif %}

                    {% if item.person_content %}
                    <a href="{{ item.link_href }}" class="btn btn-grey" {% if item.link_onclick %}onclick="{{ item.link_onclick }}"{% endif %} data-person-details>
                        {{ item.link_text }}
                        {% if item.icon_id %}
                        {% render "@components/01-core/icon/icon.twig" with {
                            icon_type: item.icon_type,
                            icon_id: item.icon_id,
                            icon_options: item.icon_options
                        } %} 
                        {% endif %}
                    </a>
                    <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>
                            {{ item.person_content }}
                        </div>
                    </div>
                    {% endif %}

                {% endfor %}
            </div>
            <div class="col-5">
                {% if person.image %}
                    {{ person.image }}
                {% else %}
                    <img src="{{ person.image_src }}" alt="{{ person.image_alt }}">
                {% endif %}

            </div>
        </div>
    </div>
    {% endfor %}
    
</div>
 
{
  "label": "Leitung dieses Bildungsganges",
  "image": "",
  "persons": [
    {
      "person": null,
      "title": "Cornelia Hess",
      "image_src": "https://placehold.it/100x150",
      "image_alt": "alt text",
      "items": [
        {
          "item": null,
          "link_text": "Zur Person",
          "link_href": "#lorem",
          "icon_type": "fas",
          "icon_id": "fa-user",
          "icon_options": "fa-fw",
          "data_value": "",
          "link_onclick": "",
          "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>"
        },
        {
          "item": null,
          "link_text": "044 966 33 22",
          "link_href": "#lorem",
          "icon_type": "fas",
          "icon_id": "fa-phone",
          "data_value": "",
          "link_onclick": "",
          "icon_options": "fa-fw"
        },
        {
          "item": null,
          "link_text": "E-Mail",
          "link_href": "#lorem",
          "icon_type": "fas",
          "data_value": "",
          "link_onclick": "",
          "icon_id": "fa-envelope",
          "icon_options": "fa-fw"
        }
      ]
    }
  ]
}
  • Content: 
    $('.person-infos [data-person-details]').click(function() {
    $(this).parent().find('.person-details-overlay').toggleClass('is-open');
});
$('.person-details-overlay-dimmer').click(function() {
    $(this).parent().removeClass('is-open');
});
$('.person-details-overlay-close').click(function() {
    $(this).parent().parent().removeClass('is-open');
});
  • URL: /components/raw/person/person.js
  • Filesystem Path: components/02-components/sidebar/person/person.js
  • Size: 358 Bytes
  • Content: 
    .person {
	background: $color-light-grey;
	padding: 1rem 0;
	margin-bottom: 4rem;

	@include media-breakpoint-up(lg) {
		padding: 1rem;
	}

	.label-title {
		color: $primary;
		margin-bottom: 0.5rem;
	}
	.title-small {
		font-style: normal;
		margin-bottom: 2.5rem;
	}

	.person-infos {
		.btn {
			width: 100%;
			margin-bottom: 1rem;
			justify-content: space-between;
			color: rgba(#fff, 0.8);
			&:hover {
				color: rgba(#fff, 1);
			}

			svg {
				color: $primary;
			}
		}
	}

	img {
		flex-shrink: 0;
		width: 100%;
		height: auto;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			margin-bottom: 1rem;
			a {
				padding-left: 2.5rem;
				position: relative;
				display: block;
				font-size: 1.4rem;

				svg {
					color: $primary;
					position: absolute;
					left: 0;
					top: 0.2rem;
					font-size: 2rem;
				}
			}
		}
	}

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

			.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;
				}
			}
			.is-highlighted {
				color: $primary;
				font-style: italic;
				@extend .text-medium;
			}
			ul {
				@include styled-list();
			}

			a {
				color: $primary;
				text-decoration: underline;
				&:hover {
					text-decoration: none;
				}
			}
		}
	}
}
  • URL: /components/raw/person/person.scss
  • Filesystem Path: components/02-components/sidebar/person/person.scss
  • Size: 2.3 KB

There are no notes for this item.