Contact Inset

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


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

    <div class="contactInset-author">
        <div class="personData">

            <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 class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>

                <a class="personData-link" href="#"><span>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>

    </div>

    <div class="contactInset-contact">
        <address class="addressBlock">

            <div class="addressBlock-title">
                <strong>Ich bin der Titel</strong>
            </div>

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

        </address>

        <address class="addressBlock">

            <div class="addressBlock-title">
                <strong>Ich bin der Titel</strong>
            </div>

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

        </address>

    </div>

</div>


        
            <!-- Complete -->
<div class="contactInset">

    <div class="contactInset-author">
        <div class="personData">

            <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 class="personData-text">
                <strong class="personData-name">Leora Gulgowski</strong>
                <span class="personData-jobtitle">Direct Tactics Specialist</span>, <span class="personData-organisation">Goldner GmbH & Co. KG</span>

                <div class="personData-description">
                    <p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
                </div>

                <a class="personData-link" href="#"><span>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>

    </div>

    <div class="contactInset-contact">
        <address class="addressBlock">

            <div class="addressBlock-title">
                <strong>Ich bin der Titel</strong>
            </div>

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

        </address>

        <address class="addressBlock">

            <div class="addressBlock-title">
                <strong>Ich bin der Titel</strong>
            </div>

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

        </address>

    </div>

</div>

Handle: @contactinset
Variants (2): Default , Complete
Preview:
- With layout
- Component only
Filesystem Path: components/04-modules/contactInset/contactInset.html
References (3): @persondata, @contactinset, @addressblock
Referenced by (6): @contactinset--complete, @pagesection, @pagesection--with-backdrop, @pagesection--with-description, @pagesection--with-blocks, @pagesection--with-blocks-on-backdrop


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

        {{#author}}
    <div class="contactInset-author">
        {{#persondata}}
            {{render '@persondata' (contextData '@contactinset' this) merge=true}}
        {{/persondata}}
    </div>
        {{/author}}

        {{#contact}}
    <div class="contactInset-contact">
        {{#addressblock}}
            {{render '@addressblock' (contextData '@contactinset' this) merge=true}}
        {{/addressblock}}
    </div>
        {{/contact}}

</div>


        
        
            /* Default */
{
  "author": {
    "persondata": {
      "avatar": {
        "initials": "BM",
        "image": {
          "src": "https://i.pravatar.cc/640"
        }
      },
      "name": "Leora Gulgowski",
      "jobtitle": "Direct Tactics Specialist",
      "link": {
        "label": "Zum Portrait",
        "url": "#",
        "icon": {
          "id": "arrow-right",
          "weight": "bold"
        }
      }
    }
  },
  "contact": {
    "addressblock": [
      {
        "content": null
      },
      {
        "content": null,
        "contactlinks": [
          {
            "title": "LinkedIn",
            "label": "@psi-se",
            "url": "https://de.linkedin.com/company/psi-se",
            "type": "linkedin"
          }
        ]
      }
    ]
  }
}


        
            /* Complete */
{
  "author": {
    "persondata": {
      "avatar": {
        "initials": "BM",
        "image": {
          "src": "https://i.pravatar.cc/640"
        }
      },
      "name": "Leora Gulgowski",
      "jobtitle": "Direct Tactics Specialist",
      "organisation": "Goldner GmbH & Co. KG",
      "description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
      "link": {
        "label": "Zum Portrait",
        "url": "#",
        "icon": {
          "id": "arrow-right",
          "weight": "bold"
        }
      }
    }
  },
  "contact": {
    "addressblock": [
      {
        "content": null
      },
      {
        "content": null,
        "contactlinks": [
          {
            "title": "LinkedIn",
            "label": "@psi-se",
            "url": "https://de.linkedin.com/company/psi-se",
            "type": "linkedin"
          }
        ]
      }
    ]
  }
}

File:

Content:
@import "_contactInset.styles";
URL: /components/raw/contactinset/_contactInset.scss
Filesystem Path: components/04-modules/contactInset/_contactInset.scss
Size: 32 Bytes

Content:


                                %contactInset {
    @include stack-spacing(section);

    @include box-padding();
    @include border-radius();

    background-color: $_backdrop-color;

    .personData {
        @extend %personData--large;
        @include stack-spacing(0);
    }

    &-contact {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
        grid-auto-flow: row;
        column-gap: var(--gg);
        row-gap: var(--sp);
    }

    @include only-on-desktop(){
        padding: var(--sp-component) calc((100% + var(--gg)) * #{math.div(2, 12)});
    }

    .addressBlock {
        @extend %addressBlock--large;
    }

}

.contactInset {
    @extend %contactInset;

    &-contact {
        @extend %contactInset-contact;
    }

}

URL: /components/raw/contactinset/_contactInset.styles.scss
Filesystem Path: components/04-modules/contactInset/_contactInset.styles.scss
Size: 764 Bytes