Vebego Component Library

Contact block: Contact Block Desktop 

<div class="mol-contact-block ">
    <div>
        <picture class="atm-image ">
            <img class="" src="https://picsum.photos/id/250/250/380" alt="">
        </picture>
    </div>
    <div class="wrap-info">
        <span class="atm-heading h4">Heb je nog vragen?</span>

        <div class="atm-paragraph ">
            <p>Neem contact op met onze kantoorcoach Annabel Janssen als je meer wilt weten. Zij helpt je graag!</p>
        </div>

        <div class="buttons">
            <a class="atm-button atm-button-primary button-md  ">
                <span class="button-content">
                    <span>Contact opnemen</span>

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

        </div>
    </div>
</div>
 
<div class="mol-contact-block {{ modifier }}">
    {{#if image}}
        <div>  
            {{ render '@image' image }}
        </div>
    {{/if}}
    <div class="wrap-info">
        {{ render '@heading' heading }}
        {{ render '@paragraph' paragraph }}
        <div class="buttons">
            {{ render '@button-primary' button merge=true}}
        </div>
    </div>
</div>
 
{
  "image": {
    "src": "https://picsum.photos/id/250/250/380"
  },
  "modifier": "",
  "paragraph": {
    "text": "Neem contact op met onze kantoorcoach Annabel Janssen als je meer wilt weten. Zij helpt je graag!"
  },
  "heading": {
    "tag": "span",
    "modifier": "h4",
    "text": "Heb je nog vragen?"
  },
  "button": {
    "text": "Contact opnemen"
  }
}
  • Content: 
    .mol-contact-block {
    @apply grid;
    @apply grid-cols-2 md:grid-cols-1;
    @apply grid-rows-1;
    @apply gap-9 md:gap-6;
    @apply bg-cta-100;
    @apply md:bg-white;
    @apply px-4 md:px-0;
    @apply py-9 md:py-0;

    @screen md {
        max-width: 250px;
    }

    .atm-heading {
        @apply mb-3;
        @apply block;
    }

    .atm-paragraph {
        @apply mb-4;
    }

    &.contact-block-mobile {
        @apply bg-white;
        @apply grid-cols-none;
        @apply grid-rows-none;
        @apply gap-0;
        @apply px-12;
        @apply py-6;
        @apply border-t;
        @apply border-solid;
        @apply border-gray-200;

        @screen md {
            max-width: 100%;
        }

        .wrap-info {
            @apply grid;
            @apply grid-cols-2;

            .atm-heading {
                align-self: center;
                justify-self: center;
            }

            .buttons {
                align-self: center;
                justify-self: center;
            }
        }
    }
}
  • URL: /components/raw/contact-block/contact-block.css
  • Filesystem Path: src\components\03-molecules\contact-block\contact-block.css
  • Size: 1.1 KB

No notes defined.