Vebego Component Library

CTA Block 

<section class="org-cta-block">
    <div class="org-cta-block-wrapper vebego-container">
        <div class="first">
            <div class="wrap-info">
                <h1 class="atm-heading ">Meer weten over onze werkwijze?</h1>

                <div class="atm-paragraph ">
                    <p>Heb je een vraag of uitdaging waarvoor je graag in contact komt met Yask? Onze specialisten denken graag met je mee of helpen je met een passend advies.</p>
                </div>

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

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

            </div>
            <svg viewBox="0 0 82 453" fill="none" class="org-cta-block-desktop" xmlns="http://www.w3.org/2000/svg">
                <path d="M82 380.42C47.6 412.856 13 442.321 0 453V0H10.5C62.5 144.96 79.8333 314.014 82 380.42Z" fill="white" />
            </svg>
            <svg viewBox="0 0 768 186" class="org-cta-block-mobile" xmlns="http://www.w3.org/2000/svg">
                <path d="M86 186C408 154.4 674.833 48.8333 768 0H0V98.5C18.8 118.9 65.1667 165.333 86 186Z" fill="white" />
            </svg>
        </div>
        <div class="second">
            <picture class="atm-image ">
                <img class="" src="https://picsum.photos/id/250/768/432" alt="">
            </picture>
        </div>
    </div>
</section>
 
<section class="org-cta-block">
    <div class="org-cta-block-wrapper vebego-container">
      <div class="first">
        <div class="wrap-info">
          {{render "@heading" title}}
          {{render "@paragraph" paragraph}}
          {{#each buttonsPrimary}}
            {{render "@button-primary" this merge=true}}
          {{/each}}
        </div>
        <svg  viewBox="0 0 82 453" fill="none" class="org-cta-block-desktop" xmlns="http://www.w3.org/2000/svg">
          <path d="M82 380.42C47.6 412.856 13 442.321 0 453V0H10.5C62.5 144.96 79.8333 314.014 82 380.42Z" fill="white"/>
        </svg>
        <svg  viewBox="0 0 768 186" class="org-cta-block-mobile"  xmlns="http://www.w3.org/2000/svg">
          <path d="M86 186C408 154.4 674.833 48.8333 768 0H0V98.5C18.8 118.9 65.1667 165.333 86 186Z" fill="white"/>
        </svg>
      </div>
      <div class="second">
        {{render "@image" image}}
      </div>
    </div>
</section>
 
{
  "title": {
    "text": "Meer weten over onze werkwijze?",
    "tag": "h1"
  },
  "paragraph": {
    "text": "Heb je een vraag of uitdaging waarvoor je graag in contact komt met Yask? Onze specialisten denken graag met je mee of helpen je met een passend advies."
  },
  "buttonsPrimary": [
    {
      "text": "Contact",
      "icon": {
        "style": "fal",
        "icon": "fa-chevron-right"
      }
    }
  ],
  "image": {
    "src": "https://picsum.photos/id/250/768/432"
  }
}
  • Content: 
    .org-cta-block {
    .mol-title,
    .atm-paragraph {
        @apply mb-5;
    }

    .org-cta-block-wrapper {
        @apply flex flex-col;
    }

    .first {
        @apply flex items-center relative z-20;

        svg {
            @apply absolute ml-[-1px] z-[-1];

            &.org-cta-block-desktop {
                @apply h-full left-full top-0 hidden;
                @apply lg:block;
            }
            &.org-cta-block-mobile {
                @apply -z-10 w-full left-0 top-full block -mt-8;
                @apply lg:hidden;
            }
        }

        .atm-button {
            @apply mr-4;
        }
        
        .atm-heading {
            @apply text-secondary-col-1;
        }

        .wrap-info {
            @apply p-0 pt-8 w-full;
        }
    }

    .second {
        @apply -mt-8 lg:mt-0;
        .atm-image {
            @apply sm:h-full h-72;

            img {
                @apply w-full h-full object-cover;
            }
        }
    }

    @screen lg {
        .org-cta-block-wrapper {
            @apply flex-row;
        }

        .first {
            @apply mx-0 py-16 w-[35%];
        }
        .second {
            @apply w-[65%];
        }
    }
}
  • URL: /components/raw/cta-block/cta-block.css
  • Filesystem Path: src\components\04-organisms\cta-block\cta-block.css
  • Size: 1.3 KB

No notes defined.