Vebego Component Library

Alert 

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

            <div class="content">
                <div class="alert-block">
                    <picture class="atm-image ">
                        <img class="" src="//placehold.co/264x280" alt="">
                    </picture>
                </div>
                <div class="text">
                    <h4 class="atm-heading ">The quick brown fox jumps over the lazy dog</h4>

                    <div class="atm-paragraph ">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue.</p>
                    </div>

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

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

                </div>
            </div>

            <a href="https://www.google.nl" class="js--main-link overlay">
            </a>
        </div>
    </div>
</div>
 
<div class="wrapper-alert">
    <div class="alert-popup {{modifier}} {{#if isLink}}js--clickable{{/if}}">
        <div class="relative">
                
            <div class="content">
                 <div class="alert-block">
                     {{ render '@image' image  }}
                </div>
            <div class="text">
                {{ render '@heading--h4' }}
                {{ render '@paragraph' @root.paragraph  }}
                {{ render '@button-primary' @root.button-primary  }}
            </div>
            </div>
               

            {{#if isLink}}
                <a href="{{url}}" class="js--main-link overlay" {{#if isExternal}}target="_blank" rel="noopener noreferrer"{{/if}}>
                </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 w-full h-full fixed bottom-0 right-0 left-0 z-[100000] bg-black bg-opacity-90 hidden;

    .alert-popup {
        @apply mx-auto fixed  bg-white top-1/2 left-1/2  -translate-y-1/2  -translate-x-1/2  max-w-sm;
        @apply w-[85%] md:max-w-4xl rounded-2xl overflow-hidden;

        .close-btn {
            @apply w-12 h-12 flex items-center justify-center z-50 absolute right-2 top-2 text-lg text-secondary-col-1 bg-white rounded-full;

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

        picture {
            @apply w-auto h-full md:p-0;

            img {
                @apply w-full;
            }
        }

        .atm-video {
            @apply h-full;
        }

        .content {
            @apply md:flex items-stretch pl-0 max-h-[90vh] md:overflow-auto overflow-y-scroll;

            .alert-block {
                @apply w-full bg-primary;
                flex: 1;

                img {
                    @apply object-cover h-[200px] md:h-full;
                }
                .atm-video {
                    @apply md:h-full h-[200px] pb-0;
                }

                video {
                    @apply object-cover object-[center_center];
                }
            }

            .text {
                @apply py-6 px-6 md:px-8 md:py-16 w-full relative z-10 col-span-2;
                flex: 2;

                h6 {
                    @apply font-semibold;
                }
            }

            .atm-heading{
                @apply text-[1.5rem] leading-8 pr-6 md:pr-0;
            }

            .atm-paragraph p{
                @apply text-md leading-6;
            }

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

            .umbraco-forms-fieldset{
                @apply mb-4 min-w-0;

                .umbraco-forms-field{
                    @apply mb-2;
                }
                .dataconsent{
                     label{
                        font-size: .8rem;
                        line-height: 1rem;
                     }

                     .atm-form-checkbox{
                        @apply gap-4;
                     }
                }
            }
        }

        .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: 2.8 KB
  • Content: 
    $(function () {

    'use strict';
    const $setCookiesWrapper = $('.set-cookies-wrapper');
    const $alertPopup = $('.wrapper-alert');

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

        if (!popupCookieValue) {
            setCookie(popupId, 'true', 30);

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

                $('.close').on('click', function (e) {
                    e.preventDefault();

                    $alertPopup.hide();
                });
            }
        }
    }

    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];
            if (c) {
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
        }
        return null;
    }

    // Close alert popup on click outside of popup content.
    if ($alertPopup) {
        $($alertPopup).on('click', function (event) {
            var content = $('.content');

            if (
                !content.is(event.target) &&
                content.has(event.target).length === 0
            ) {
                $alertPopup.hide();
            }
        });
    }
});
  • URL: /components/raw/alert-popup/alert-popup.js
  • Filesystem Path: src\components\03-molecules\alert-popup\alert-popup.js
  • Size: 1.9 KB

No notes defined.