Vebego Component Library

Contact Block 

<section class="org-contact-block">
    <div class="vebego-container">
        <h2 class="atm-heading secondary-color">Contact block</h2>

        <div class="org-contact-block--wrapper">
            <picture class="atm-image ">
                <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                <img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
            </picture>
            <div class="org-contact-block--content">
                <h1 class="atm-heading secondary-color">Martina Musterman</h1>

                <h4 class="atm-heading ">Head of Facility Management</h4>

                <div class="atm-tag " title="This is a tag link" href="#">
                    <span>
                        Standort Wuppertal
                    </span>
                </div>

                <div class="atm-paragraph text-md">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
                </div>

                <a class="atm-button atm-button-primary  button-md no-icon  ">
                    <div class="button-content-wrapper">
                        <span class="button-content">
                            <span>Telefonischer kontakt</span>
                            <i class="atm-icon  fal fa-arrow-right   "></i>

                        </span>
                    </div>
                    <span class="button-triangle"></span>
                </a>

                <a class="atm-button atm-button-primary  button-md no-icon  ">
                    <div class="button-content-wrapper">
                        <span class="button-content">
                            <span>E-Mail kontakt</span>
                            <i class="atm-icon  fal fa-arrow-right   "></i>

                        </span>
                    </div>
                    <span class="button-triangle"></span>
                </a>

            </div>
        </div>
    </div>
</section>
 
<section class="org-contact-block">
    <div class="vebego-container">
        {{render "@heading--h2" title merge=true}}
        <div class="org-contact-block--wrapper">
            {{render '@image'}}
            <div class="org-contact-block--content">
                {{render "@heading--h1" name merge=true}}
                {{render "@heading--h4" jobTitle merge=true}}
                {{render "@tag" location merge=true}}
                {{render "@paragraph"}}
                {{render "@button-primary" phoneButton merge=true}}
                {{render "@button-primary" emailButton merge=true}}
            </div>
        </div>
    </div>
</section>
 
{
  "title": {
    "text": "Contact block",
    "modifier": "secondary-color"
  },
  "name": {
    "text": "Martina Musterman",
    "modifier": "secondary-color"
  },
  "jobTitle": {
    "text": "Head of Facility Management"
  },
  "location": {
    "text": "Standort Wuppertal",
    "element": "div"
  },
  "phoneButton": {
    "text": "Telefonischer kontakt"
  },
  "emailButton": {
    "text": "E-Mail kontakt"
  }
}
  • Content: 
    .org-contact-block {
    * {
        @apply transition-all;
    }

    .vebego-container > .atm-heading {
        @apply text-secondary-col-1 text-h2 lg:text-h1m;
    }

    .atm-heading.secondary-color {
        @apply text-secondary-col-1;
    }

    .atm-button {
        @apply mr-4;
    }
    
    &--wrapper {
        @apply md:grid grid-cols-2 gap-x-8 2xl:gap-x-16 items-center;
        .atm-image {
            @apply rounded-xl overflow-hidden self-start mb-8 md:mb-0;
        }
        .atm-tag {
            @apply mb-8 md:mb-4 hover:border-gray-100 hover:border hover:text-gray-500;
        }
    }

    &--content h1.atm-heading {
        @apply text-secondary-col-1 text-h2 lg:text-h1m;
    }
}
  • URL: /components/raw/contact-block/contact-block.css
  • Filesystem Path: src\components\04-organisms\contact-block\contact-block.css
  • Size: 740 Bytes

No notes defined.