Address Block

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->
<address class="addressBlock">

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

    <div class="addressBlock-content">
        PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
    </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>


        
            <!-- Social Channels -->
<address class="addressBlock">

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

    <div class="addressBlock-content">
        PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
    </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>


        
            <!-- Large -->
<address class="addressBlock is-large">

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

    <div class="addressBlock-content">
        PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
    </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>


        
            <!-- Documenation only -->
<section class="doc-variant" style="margin-bottom: var(--sp)">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <address class="addressBlock">

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

        <div class="addressBlock-content">
            PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
        </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>

</section>
<section class="doc-variant" style="margin-bottom: var(--sp)">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Large</h2>

        <div class="doc-variant-configuration">
            <ul data-label="Modifier">
                <li>is-large</li>
            </ul>
        </div>

    </header>

    <address class="addressBlock is-large">

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

        <div class="addressBlock-content">
            PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
        </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>

</section>

Handle: @addressblock
Preview:
- With layout
- Component only
Filesystem Path: components/03-fragments/addressBlock/addressBlock.html
References (2): @contactlink, @addressblock
Referenced by (5): @contactinset, @contactinset--complete, @addressblock--social-channels, @addressblock--large, @addressblock--doc-only


        <!-- Default -->
<address class="addressBlock{{#modifier}} {{.}}{{/modifier}}">

        {{#title}}
    <div class="addressBlock-title">
        <strong>{{.}}</strong>
    </div>
        {{/title}}

        {{#content}}
    <div class="addressBlock-content">
        {{{.}}}
    </div>
        {{/content}}

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

</address>

<!-- Social Channels -->
<address class="addressBlock{{#modifier}} {{.}}{{/modifier}}">

        {{#title}}
    <div class="addressBlock-title">
        <strong>{{.}}</strong>
    </div>
        {{/title}}

        {{#content}}
    <div class="addressBlock-content">
        {{{.}}}
    </div>
        {{/content}}

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

</address>

<!-- Large -->
<address class="addressBlock{{#modifier}} {{.}}{{/modifier}}">

        {{#title}}
    <div class="addressBlock-title">
        <strong>{{.}}</strong>
    </div>
        {{/title}}

        {{#content}}
    <div class="addressBlock-content">
        {{{.}}}
    </div>
        {{/content}}

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

</address>

<!-- Documenation only -->
{{#variants}}
<section class="doc-variant" style="margin-bottom: var(--sp)">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if modifiers}}
            <ul data-label="Modifier">
                    {{#modifiers}}
                <li>{{{.}}}</li>
                    {{/modifiers}}
            </ul>
                {{/if}}
        </div>

    </header>

    {{#samples}}
        {{render '@addressblock' (contextData '@addressblock' this) merge=true}}
    {{/samples}}

</section>
    {{/variants}}


        
        
            /* Default */
{
  "title": "Ich bin der Titel",
  "content": "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"
    }
  ]
}


        
            /* Social Channels */
{
  "title": "Ich bin der Titel",
  "content": "PSI Software SG<br/>Dircksenstraße 42-44<br/>10178 Berlin",
  "contactlinks": [
    {
      "title": "LinkedIn",
      "label": "@psi-se",
      "url": "https://de.linkedin.com/company/psi-se",
      "type": "linkedin"
    }
  ]
}


        
            /* Large */
{
  "title": "Ich bin der Titel",
  "content": "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"
    }
  ],
  "modifier": "is-large"
}


        
            /* Documenation only */
{
  "title": "Ich bin der Titel",
  "content": "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"
    }
  ],
  "variants": [
    {
      "title": "Default",
      "samples": {
        "title": "Ich bin der Titel",
        "content": "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": "Large",
      "modifiers": "is-large",
      "samples": {
        "title": "Ich bin der Titel",
        "content": "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"
          }
        ],
        "modifier": "is-large"
      }
    }
  ]
}

File:

Content:


                                @import "_addressBlock.styles";

%addressBlock {

    &-title {
        @extend %kicker;
        @include stack-spacing(0);
    }

}

%addressBlock--large {

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

    %addressBlock-title {
        @extend %kicker--large;
        border-bottom: $_border;
    }

    > * + * {
        @include stack-spacing();
    }

}

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

URL: /components/raw/addressblock/_addressBlock.scss
Filesystem Path: components/03-fragments/addressBlock/_addressBlock.scss
Size: 438 Bytes

Content:


                                %addressBlock {
    @include stack-spacing(component);

    font-style: inherit;
    font-weight: inherit;

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

    &-title {
        @extend %heading--subheading;
        @include stack-spacing(0);
    }

    > * + * {
        @include stack-spacing(small);
    }

}

.addressBlock {
    @extend %addressBlock;

    &-title {
        @extend %addressBlock-title;
    }

}

URL: /components/raw/addressblock/_addressBlock.styles.scss
Filesystem Path: components/03-fragments/addressBlock/_addressBlock.styles.scss
Size: 430 Bytes