Vebego Component Library

Alert 

<div class="wrapper-alert">
    <div class="alert-popup  js--clickable">

        <div class="vebego-container">
            <a href="#" class="close"><span class="atm-icon  fal fa-times  fa-2x "></span></a>

            <div class="alert-block"></div>

            <picture class="atm-image ">
                <img class="" src="//placehold.co/264x280" alt="">
            </picture>
            <span class="text">
                <h6 class="atm-heading ">This is the alert title</h6>

            </span>

            <a href="https://www.google.nl" class="js--main-link">
                <span class="atm-icon  fal fa-chevron-right  fa-lg "></span>
            </a>
        </div>
    </div>
</div>
 
<div class="wrapper-alert">
    <div class="alert-popup {{modifier}} {{#if isLink}}js--clickable{{/if}}">
   
        <div class="vebego-container">
             <a href="#" class="close">{{ render '@icon' @root.icon-close  }}</a>
          
                <div class="alert-block"></div>
       
            
            {{ render '@image' image  }}
            <span class="text">
                {{ render '@heading' @root.heading  }}
            </span>

            {{#if isLink}}
                <a href="{{url}}" class="js--main-link" {{#if isExternal}}target="_blank" rel="noopener noreferrer"{{/if}}>
                {{ render '@icon' @root.icon-chev }}
                </a>
            {{/if}}
        </div>
    </div>
</div>
 
{
  "heading": {
    "text": "This is the alert title",
    "tag": "h6"
  },
  "paragraph": {
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue."
  },
  "icon-chev": {
    "style": "fal",
    "icon": "fa-chevron-right",
    "size": "fa-lg"
  },
  "icon-alert": {
    "style": "fal",
    "icon": "fa-exclamation-triangle",
    "size": "fa-lg"
  },
  "icon-close": {
    "style": "fal",
    "icon": "fa-times",
    "size": "fa-2x"
  },
  "isLink": true,
  "url": "https://www.google.nl",
  "isExternalLink": false,
  "image": {
    "src": "//placehold.co/264x280"
  }
}
  • Content: 
    .wrapper-alert {
    @apply bg-black bg-opacity-90 w-full absolute -top-48 bottom-0 right-0 left-0 z-[100000] hidden;
    height: calc(100% + 192px);

    .alert-popup {
        @apply mx-auto relative bg-white top-1/2 -translate-y-1/2;
        @apply text-primary max-w-lg;

        .close {
            @apply absolute right-4 -top-9 text-lg;

            .atm-icon {
                font-size: 28px;
            }
        }

        .vebego-container {
            @apply flex items-center pl-0;

            .alert-block {
                @apply hidden md:block w-[400px] min-h-[300px] bg-primary-100 mr-4;
            }

            .text {
                @apply px-8 w-full relative z-10  py-12;

                h6 {
                    @apply font-semibold;
                }
            }

            .atm-icon {
                @apply text-md;
                transition: all 0.3s ease;
            }
        }

        picture {
            @apply w-auto min-w-[100px] p-4 md:p-0;

            img {
                @apply w-full;
            }
        }

        .extra-info {
            @apply p-8 bg-white text-black;

            .paragraph {
                @apply mb-8;
            }
        }

        &.js--clickable {
            cursor: pointer;
        }

        &:hover {
            @apply no-underline;

            .fa-chevron-right {
                transform: translateX(5px);
            }
        }
    }
}
  • URL: /components/raw/alert-popup/alert-popup.css
  • Filesystem Path: src\components\03-molecules\alert-popup\alert-popup.css
  • Size: 1.5 KB
  • Content: 
    $(function () {

    'use strict';

    const $alertPopup = $('.wrapper-alert');

    if ($alertPopup) {
        const popupId = 'alert-popup-' + $alertPopup.attr('id');
        const popupCookieValue = getCookie(popupId);

        if (!popupCookieValue) {
            $alertPopup.show();

            $('.wrapper-alert').on('click', function (e) {
                e.preventDefault();
                $alertPopup.hide();
                setCookie(popupId, 'true', 365);
            });
        }
    }

    function setCookie(cname, cvalue, exdays) {
        const d = new Date();
        d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
        const expires = 'expires=' + d.toUTCString();
        document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/';
    }

    function getCookie(cname) {
        const name = cname + '=';
        const decodedCookie = decodeURIComponent(document.cookie).split(';');
        for (let i = 0; i < decodedCookie.length; i++) {
            let c = decodedCookie[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return null;
    }
});
  • URL: /components/raw/alert-popup/alert-popup.js
  • Filesystem Path: src\components\03-molecules\alert-popup\alert-popup.js
  • Size: 1.3 KB

No notes defined.