UHasselt Component Library

CTA Block: Cta Block Red 

<section class="cta-block red">
    <div class="uhasselt-container">
        <div class="column has-image">
            <h2 class="heading ">
                The quick brown fox jumps over the lazy dog
            </h2>

            <div class='paragraph '>
                <p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
            </div>

            <div class="button-wrap">
                <a href="#" class="button button-black ">
                    <span>
                        <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                        <span class="text">
                            This is a CTA Button
                        </span>
                    </span>
                </a>

                <a href="#" class="button button-white-border ">
                    <span>
                        <span class="icon fal fa-envelope   " aria-hidden="true"></span>
                        <span class="text">
                            This is a CTA Button
                        </span>
                    </span>
                </a>

            </div>
        </div>
    </div>
    <div class="wrap-image">
        <picture class="picture ">
            <source srcset="https://picsum.photos/id/239/150/200" media="(min-width: 1024px)">
            <source srcset="https://picsum.photos/id/239/150/150" media="(min-width: 640px)">
            <img class="picture-image " src="https://picsum.photos/id/239/200/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
        </picture>

    </div>
</section>
 
<section class="cta-block {{modifier}}">
    <div class="uhasselt-container">
        <div class="column {{#if image}}has-image{{/if}}">
            {{render '@heading--h2'}}

            {{#if paragraph}}
                {{render '@paragraph'}}
            {{/if}}
                
            <div class="button-wrap">
                {{#if btn-black}} {{render '@button'}} {{/if}}
                {{#if btn-red}} {{render '@button--red'}} {{/if}}
                {{#if btn-white}} {{render '@button--white'}} {{/if}}
                {{#if btn-white-border}} {{render '@button--white-border'}} {{/if}}
            </div>
        </div>
    </div>
    {{#if image}}
        <div class="wrap-image">
            {{render '@image' imageurl}}
        </div>
    {{/if}}
</section>
 
{
  "image": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/960/517"
  },
  "modifier": "red",
  "btn-black": true,
  "btn-white-border": true,
  "paragraph": true
}
  • Content: 
    .cta-block {
    @apply mb-16;
    @apply lg:relative;
    @apply sm:grid;
    @apply lg:block;
    @apply sm:grid-flow-row;
    @apply lg:grid-rows-none;

    .wrap-image {
        @apply w-full;
        @apply lg:w-1/2;
        @apply h-96;
        @apply lg:h-auto;
        @apply lg:absolute;
        @apply lg:right-0;
        @apply lg:top-0;
        @apply lg:bottom-0;

        &:before {
            content: url(/assets/img/square-dots.svg);
            @apply hidden lg:block;
            @apply absolute;
            @apply top-16 left-2;
            width: 157px;
            height: 131px;
        }

        &:after {
            content: url(/assets/img/triangle-big.svg);
            @apply hidden lg:block;
            @apply absolute;
            @apply top-64 left-16;
            width: 66px;
            height: 66px;
        }

        .picture {
            @apply w-auto;
            @apply h-full;

            @screen lg {
                clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
            }

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

    .uhasselt-container {
        .column {
            @apply py-8 pl-8 w-full;

            &.has-image {
                @apply lg:w-1/2;
            }

            .heading {
                @apply mb-8;
            }

            .paragraph-intro {
                @apply mb-10;
            }

            .button-wrap {
                @apply flex;
                @apply flex-wrap;

                .button {
                    @apply mr-4;
                }
            }

            .email-wrap {
                .usp-list {
                    @apply p-0;
                    @apply mb-8;
                }

                .text {
                    @apply w-full;
                    @apply block;
                    @apply text-md;
                    @apply mb-1;
                }
            }
        }
    }

    &.red {
        @apply bg-red;
        @apply text-white;

        .heading.text-red {
            @apply text-white;
        }

        a {
            @apply text-white underline;
        }

        .wrap-image:before {
            content: url(/assets/img/square-dots-white.svg);
        }
    }
}
  • URL: /components/raw/cta-block/cta-block.css
  • Filesystem Path: src\components\04-organisms\cta-block\cta-block.css
  • Size: 2.4 KB

No notes defined.