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>


<!-- Contact Block Mobile -->
<div class="mol-contact-block contact-block-mobile">
    <div class="wrap-info">
        <span class="atm-heading h4">Heb je nog vragen?</span>

        <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>

        <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>
 
/* Contact Block Desktop */
{
  "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"
  }
}


/* Contact Block Mobile */
{
  "image": "",
  "modifier": "contact-block-mobile",
  "paragraph": "",
  "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.