PSI Software SE Design Library

Contact Card

No notes defined.

<!-- Default -->
<div class="contactCard">

    <div class="contactCard-image">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

        </figure>

    </div>

    <div class="contactCard-content">

        <h3 class="contactCard-heading">
            <span class="kicker">
                Thema
            </span>

            <span class="contactCard-title">Ich bin der Titel</span>
        </h3>

        <div class="contactCard-address">
            PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
        </div>

        <div class="contactCard-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>

</div>


<!-- Long Version -->
<div class="contactCard">

    <div class="contactCard-image">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

        </figure>

    </div>

    <div class="contactCard-content">

        <h3 class="contactCard-heading">
            <span class="kicker">
                Thema
            </span>

            <span class="contactCard-title">Ich bin der Titel</span>
        </h3>

        <div class="contactCard-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 class="contactCard-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>

</div>


<!-- Short Version -->
<div class="contactCard">

    <div class="contactCard-image">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

        </figure>

    </div>

    <div class="contactCard-content">

        <h3 class="contactCard-heading">
            <span class="kicker">
                Thema
            </span>

            <span class="contactCard-title">Ich bin der Titel</span>
        </h3>

        <div class="contactCard-address">
            PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
        </div>

        <div class="contactCard-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>

</div>


<div class="contactCard{{#modifier}} {{.}}{{/modifier}}">

        {{#image}}
    <div class="contactCard-image">
        {{render '@figure' (contextData '@contactcard' this) merge=false}}
    </div>
        {{/image}}

    <div class="contactCard-content">

            {{#if title}}
        <h3 class="contactCard-heading">
            {{#kicker}}
                {{render '@kicker' (contextData '@contactcard' this) merge=true}}
            {{/kicker}}
            {{#title}}<span class="contactCard-title">{{{.}}}</span>{{/title}}
        </h3>
            {{/if}}

            {{#address}}
        <div class="contactCard-address">
            {{{.}}}
        </div>
            {{/address}}

            {{#if contactlinks}}
        <div class="contactCard-contactlinks">
            {{#contactlinks}}
                {{render '@contactlink' (contextData '@contactcard' this) merge=true}}
            {{/contactlinks}}
        </div>
            {{/if}}

    </div>

</div>
 
/* Default */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": {
    "content": "Thema"
  },
  "title": "Ich bin der Titel",
  "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"
    }
  ]
}


/* Long Version */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": {
    "content": "Thema"
  },
  "title": "Ich bin der Titel",
  "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": [
    {
      "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"
    }
  ]
}


/* Short Version */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": {
    "content": "Thema"
  },
  "title": "Ich bin der Titel",
  "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"
    }
  ]
}
  • Content: 
    $contactCard_styles: (
    background-color: $_backdrop-color,
    border-radius: var(--br),
    overflow: hidden,
) !default;

$contactCard_title_styles: (
    text-size: largest,
) !default;

$contactCard_image_ratio: $figure_aspect-ratio !default;
  • URL: /components/raw/contactcard/_contactCard.settings.scss
  • Filesystem Path: components/03-fragments/contactCard/_contactCard.settings.scss
  • Size: 251 Bytes
  • Content: 
    .contactCard {
    @include stack-spacing(component);
    @include styles($contactCard_styles);

    .figure {
        @include stack-spacing(0);

        img {
            --ratio: #{$contactCard_image_ratio} / 1;
        }

    }

    .figure-image {
        border-radius: 0;
    }

    .kicker {
        @include stack-spacing(0);
    }

    &-content {
        @include box-padding();
    }

    &-heading {
        margin-top: -.2em;
    }

    &-title {
        display: block;
        @include styles($contactCard_title_styles);

        &:first-child {
            margin-top: -.2em;
        }

    }

    &-address {
        @include stack-spacing(small);
    }

    &-contactlinks {
        @include stack-spacing();

        .contactLink {
            @include stack-spacing(0);
        }

    }

}
  • URL: /components/raw/contactcard/_contactCard.styles.scss
  • Filesystem Path: components/03-fragments/contactCard/_contactCard.styles.scss
  • Size: 811 Bytes