No notes defined.
<div class="contactList">
<h2 class="contactList-title">Ich bin der Titel</h2>
<ul class="contactList-list">
<li class="contactList-item">
<div class="contactList-image">
<div class="avatar">
<span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
</div>
</div>
<div class="contactList-column">
<span class="kicker">
Thema
</span>
<strong class="contactList-name">Leora Gulgowski</strong> <span class="contactList-jobtitle">Direct Tactics Specialist</span>
<div class="contactList-address">
PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
</div>
</div>
<div class="contactList-column">
<div class="contactList-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>
<div class="contactLink" data-type="phone">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="mobile">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="linkedin">
<span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
</div>
</div>
<div class="contactList-links">
<a href="#" class="link"><span class="link-label">Zum Portrait</span><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="contactList-item">
<div class="contactList-image">
<div class="avatar" data-type="person">
<span class="avatar-initials">BM</span>
</div>
</div>
<div class="contactList-column">
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<strong class="contactList-name">Leora Gulgowski</strong> <span class="contactList-jobtitle">Direct Tactics Specialist</span>
<div class="contactList-address">
PSI Information Technology (Shanghai) Co., Ltd.<br />1212 South Building, Raycom InfoTech Park Tower C<br />KeXueYuanNanLu No. 2, Haidian District<br />Peking, 100190<br />V.R. China
</div>
</div>
<div class="contactList-column">
<div class="contactList-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">verylong.mailaddress@domain.com</span></a>
</div>
<div class="contactLink" data-type="phone">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="mobile">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="linkedin">
<span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
</div>
</div>
<div class="contactList-links">
<a href="#" class="link"><span class="link-label">Zum Portrait</span><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
</a>
<a href="#" class="link"><span class="link-label">Anfahrt planen</span><svg class="icon is-arrow-square-out">
<use href="../../icons/icons-bold.svg#icon--arrow-square-out" xlink:href="../../icons/icons-bold.svg#icon--arrow-square-out"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="contactList-item">
<div class="contactList-image">
<div class="avatar" data-type="location">
<span class="avatar-initials">BM</span>
</div>
</div>
<div class="contactList-column">
<strong class="contactList-name">ACME Inc.</strong> <span class="contactList-jobtitle">Headquater</span>
</div>
<div class="contactList-column">
<div class="contactList-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="contactList{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h2 class="contactList-title">{{{.}}}</h2>
{{/title}}
<ul class="contactList-list">
{{#items}}
<li class="contactList-item">
<div class="contactList-image">
{{#avatar}}
{{render '@avatar' (contextData '@persondata' this) merge=true}}
{{/avatar}}
</div>
<div class="contactList-column">
{{#kicker}}
{{render '@kicker' (contextData '@contactlist' this) merge=true}}
{{/kicker}}
<strong class="contactList-name">{{{name}}}</strong>{{#jobtitle}} <span class="contactList-jobtitle">{{{.}}}</span>{{/jobtitle}}
{{#address}}
<div class="contactList-address">
{{{.}}}
</div>
{{/address}}
</div>
<div class="contactList-column">
{{#if contactlinks}}
<div class="contactList-contactlinks">
{{#contactlinks}}
{{render '@contactlink' (contextData '@contactlist' this) merge=true}}
{{/contactlinks}}
</div>
{{/if}}
{{#if links}}
<div class="contactList-links">
{{#links}}
{{render '@link' (contextData '@contactlist' this) merge=true}}
{{/links}}
</div>
{{/if}}
</div>
</li>
{{/items}}
</ul>
</div>
{
"title": "Ich bin der Titel",
"items": [
{
"kicker": {
"items": null
},
"avatar": {
"initials": "BM",
"image": {
"src": "https://i.pravatar.cc/640"
}
},
"name": "Leora Gulgowski",
"jobtitle": "Direct Tactics Specialist",
"address": "PSI Software SG<br/>Dircksenstraße 42-44<br/>10178 Berlin",
"contactlinks": [
{
"title": "E-Mail",
"label": "mail@domain.com",
"url": "mailto:mail@domain.com",
"type": "mail"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "phone"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "mobile"
},
{
"title": "LinkedIn",
"label": "@psi-se",
"url": "https://de.linkedin.com/company/psi-se",
"type": "linkedin"
}
],
"links": [
{
"label": "Zum Portrait",
"url": "#",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
]
},
{
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"avatar": {
"initials": "BM",
"type": "person",
"image": null
},
"name": "Leora Gulgowski",
"jobtitle": "Direct Tactics Specialist",
"address": "PSI Information Technology (Shanghai) Co., Ltd.<br/>1212 South Building, Raycom InfoTech Park Tower C<br/>KeXueYuanNanLu No. 2, Haidian District<br/>Peking, 100190<br/>V.R. China",
"contactlinks": [
{
"type": "mail",
"title": "E-Mail",
"label": "verylong.mailaddress@domain.com",
"url": "mailto:mail@domain.com"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "phone"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "mobile"
},
{
"title": "LinkedIn",
"label": "@psi-se",
"url": "https://de.linkedin.com/company/psi-se",
"type": "linkedin"
}
],
"links": [
{
"label": "Zum Portrait",
"url": "#",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
},
{
"label": "Anfahrt planen",
"url": "#",
"icon": {
"id": "arrow-square-out",
"weight": "bold"
}
}
]
},
{
"kicker": null,
"avatar": {
"initials": "BM",
"type": "location",
"image": null
},
"name": "ACME Inc.",
"jobtitle": "Headquater",
"contactlinks": [
{
"title": "E-Mail",
"label": "mail@domain.com",
"url": "mailto:mail@domain.com",
"type": "mail"
}
]
}
]
}
@import "_contactList.styles";
.contactList {
$padding: var(--bp);
@include stack-spacing(section);
&-title {
@extend %sectionTitle;
@include stack-spacing(component, margin-bottom);
}
&-list {
list-style: none;
padding: 0;
}
&-item {
padding: $padding;
background-color: $_backdrop-color;
border-radius: var(--br);
& + & {
@include stack-spacing();
}
}
.avatar {
@extend %avatar--large;
@include stack-spacing(0);
}
.kicker {
@include text-size(small);
font-weight: $_font-weight--bold;
}
&-name {
@extend %heading--subheading;
display: block;
&:not(:first-child) {
@include stack-spacing(0);
}
}
&-jobtitle {
display: block;
}
&-address {
@include text-size(small);
&:not(:first-child) {
@include stack-spacing();
}
}
&-contactlinks {
&:not(:first-child) {
@include stack-spacing();
}
> * {
@include stack-spacing(0);
}
}
&-links {
&:not(:first-child) {
@include stack-spacing();
}
.link {
@extend %link--stand-alone;
@include stack-spacing(0);
&:not(:first-child) {
@include stack-spacing(small);
}
}
}
@include only-on-desktop(){
$gutter: var(--bp-large);
&-list {
display: grid;
grid-template-columns: calc(#{$avatar_size--large} + var(--bp-large)) 1fr max-content;
column-gap: $gutter;
width: get-columns-width(10);
margin: calc(-1 * var(--sp)) auto 0;
border-collapse: separate;
border-spacing: 0 var(--sp);
}
&-item {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
padding: $padding var(--bp-large);
background-color: transparent;
position: relative;
&::before {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-color: $_backdrop-color;
}
> * {
vertical-align: middle;
}
}
&-image {
width: 100%;
}
&-column {
&:not(:last-child) {
margin-right: calc(.5 * #{$gutter});
}
& + & {
margin-left: calc(.5 * #{$gutter});
&::before {
content: "";
display: block;
height: calc(100% - 2 * #{$padding});
width: var(--bw);
position: absolute;
top: $padding;
transform: translateX(-50%);
margin-left: calc(-1 * #{$gutter});
background-color: $_gray-300;
}
}
}
.avatar,
.kicker,
&-contactlinks {
@include stack-spacing(0);
}
}
@include not-on-desktop(){
&-contactlinks {
@include stack-spacing();
}
}
}