UHasselt Component Library

Call To Action 

<div class="call-to-action">
    <div class="wrap-info">
        <div class="title">Online Infodagen 8/7 en 26/8</div>
        <a href="#" class="button button-red ">
            <span>
                <span class="text">
                    Bekijk de online infodagen
                </span>
            </span>
        </a>

    </div>
</div>
 
<div class="call-to-action">
    <div class="wrap-info">
        {{#if text}}<div class="title">{{ text }}</div>{{/if}}
        {{#if button}}{{ render '@button' button }}{{/if}}
    </div>
</div>
 
{
  "text": "Online Infodagen 8/7 en 26/8",
  "button": {
    "modifier": "red",
    "text": "Bekijk de online infodagen",
    "element": "a",
    "type": "",
    "title": "",
    "target": "",
    "href": "#",
    "id": "",
    "icon": false
  }
}
  • Content: 
    .call-to-action {
    @apply w-1/2 relative lg:w-60 lg:h-60 lg:border-r-0;

    @screen lg {
        border: 8px solid white;
        border-right: 0;

        &:before {
            content: '';
            @apply absolute right-0 -top-1 h-16 block bg-white;
            width: 8px;
        }

        &:after {
            content: '';
            @apply absolute right-0 -bottom-1 h-16 block bg-white;
            width: 8px;
        }
    }

    @screen xl {
        border: 10px solid white;

        &:before {
            width: 10px;
        }

        &:after {
            width: 10px;
        }
    }

    @apply xl:w-80 xl:h-80 xl:border-r-0;

    .wrap-info {
        @apply lg:w-44 lg:h-auto lg:absolute lg:top-10 lg:left-6 xl:w-80 xl:top-20 xl:left-6;

        .title {
            @apply mb-6 font-bold text-white text-lg;

            @screen lg {
                font-size: 1.3rem;
                line-height: 1.8rem;
            }

            @screen xl {
                font-size: 2rem;
                line-height: 2.5rem;
            }
        }

        .title:first-letter {
            text-transform: capitalize;
        }
    }
}
  • URL: /components/raw/call-to-action/call-to-action.css
  • Filesystem Path: src\components\03-molecules\call-to-action\call-to-action.css
  • Size: 1.2 KB

No notes defined.