Vebego Component Library
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="../../assets/css/styles.css">
    <title>Preview</title>
</head>

<body class="sector-schoonmaak">

    <header class='org-header'>
        <div id="mol-header-search" class="">
            <a id="header-search-close">
                <span class="text">Sluiten</span>
                <span class="atm-icon  far fa-times  fa-lg "></span>
            </a>
            <div class="header-search-input">
                <div class="mol-inline-search">
                    <form action="#" method="get">
                        <div class="atm-form-input  ">
                            <input class="form-input" type="search" id="input" name="input">
                            <label class="atm-form-label form-label " for="input">Zoeken</label>

                            <span class="atm-icon form-input-error-icon far fa-times   "></span>
                            <span class="atm-icon form-input-valid-icon far fa-check   "></span>
                        </div>

                        <button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
                            <span class="button-content">

                                <span class="atm-icon  far fa-search  fa-lg fa-fw"></span>
                            </span>
                        </button>

                    </form>
                </div>
            </div>
            <div class="header-search-title">
                <h1 class="atm-heading ">14 zoekresultaten</h1>

            </div>
            <div id="header-search-results">
                <div class="mol-search-result js--clickable">
                    <span class="atm-heading h-subtitle">Facility management</span>

                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Lorem ipsum</a>
                    <div class="atm-paragraph ">
                        <p>Wil je je facilitaire organisatie (her)inrichten? Heb je een facilitair vraagstuk waar je zelf niet uitkomt of waarvoor tijdelijk de capaciteit ontbreekt</p>
                    </div>

                </div>
                <div class="mol-search-result js--clickable">
                    <span class="atm-heading h-subtitle">Facility management</span>

                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Lorem ipsum</a>
                    <div class="atm-paragraph ">
                        <p>Wil je je facilitaire organisatie (her)inrichten? Heb je een facilitair vraagstuk waar je zelf niet uitkomt of waarvoor tijdelijk de capaciteit ontbreekt</p>
                    </div>

                </div>
                <div class="mol-search-result js--clickable">
                    <span class="atm-heading h-subtitle">Facility management</span>

                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Lorem ipsum</a>
                    <div class="atm-paragraph ">
                        <p>Wil je je facilitaire organisatie (her)inrichten? Heb je een facilitair vraagstuk waar je zelf niet uitkomt of waarvoor tijdelijk de capaciteit ontbreekt</p>
                    </div>

                </div>
                <div class="mol-search-result js--clickable">
                    <span class="atm-heading h-subtitle">Facility management</span>

                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Lorem ipsum</a>
                    <div class="atm-paragraph ">
                        <p>Wil je je facilitaire organisatie (her)inrichten? Heb je een facilitair vraagstuk waar je zelf niet uitkomt of waarvoor tijdelijk de capaciteit ontbreekt</p>
                    </div>

                </div>
            </div>
            <div class="header-search-button">
                <a class="atm-button atm-button-secondary button-md ">
                    <span class="button-content">
                        <span>Bekijk 14 resultaten</span>
                        <span class="atm-icon  far fa-long-arrow-right   "></span>
                    </span>
                    <span class="button-underline"></span>
                </a>

            </div>
        </div>
        <a class='header-logo' href='/' title='Hago'><img src='../../assets/img/logo_westerveld.svg' alt='Hago' /></a>
        <div class='hidden md:block'>
            <nav class="mol-header-nav">
                <ul>
                    <li class="active">
                        <input type="checkbox" id="header-nav-checkbox0" class="header-nav-checkbox">
                        <label for="header-nav-checkbox0" class="header-nav-label">
                            <span class="text">Opdrachtgevers met extra text</span>
                            <span class="atm-icon  far fa-chevron-down  fa-xs "></span>
                        </label>
                        <div class="header-nav-sub">
                            <ul>
                                <li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Opdrachtgevers met extra text</a>
                                </li>
                                <li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Mijn project</a>
                                </li>
                                <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Bouwreizen</a>
                                </li>
                                <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Partners</a>
                                </li>
                                <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Blog</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="">
                        <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Schoonmaak</a>

                    </li>
                    <li class="">
                        <input type="checkbox" id="header-nav-checkbox2" class="header-nav-checkbox">
                        <label for="header-nav-checkbox2" class="header-nav-label">
                            <span class="text">Branches</span>
                            <span class="atm-icon  far fa-chevron-down  fa-xs "></span>
                        </label>
                        <div class="header-nav-sub">
                            <ul>
                                <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Branches</a>
                                </li>
                                <li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Mijn project</a>
                                </li>
                                <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Bouwreizen</a>
                                </li>
                                <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Partners</a>
                                </li>
                                <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Blog</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="">
                        <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Over</a>

                    </li>
                    <li class="">
                        <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Nieuws uit het niets</a>

                    </li>
                    <li class="">
                        <a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Vacatures</a>

                    </li>
                </ul>
            </nav>
        </div>
        <div class='ml-auto'>
            <nav class="mol-header-utils">
                <ul>
                    <li class="utils-desktop">
                        <a class="atm-nav-link " href="#" title="" aria-label="" target="">Werken bij Hago Zorg</a>

                        <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                    </li>
                    <li class="utils-desktop">
                        <a class="mol-search-toggle">
                            <span class="text">Zoeken</span>
                            <span class="atm-icon  far fa-search   "></span>
                        </a>

                        <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                    </li>
                    <li class="utils-mobile">
                        <a id="mol-mobile-toggle">
                            <span class="open">
                                <span class="atm-icon  far fa-bars   fa-fw"></span>
                            </span>
                            <span class="close">
                                <span class="atm-icon  far fa-times   fa-fw"></span>
                            </span>
                        </a>

                        <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                    </li>
                    <li class="utils-desktop">
                        <div class='mol-language-select'>
                            <input type='checkbox' id='lang-select-checkbox' class='lang-select-checkbox' />
                            <label for='lang-select-checkbox' class='lang-select-label'>
                                <span class='text'>NL</span>
                                <span class="atm-icon  far fa-chevron-down  fa-xs "></span>
                            </label>
                            <div class='lang-select-sub'>
                                <ul>
                                    <li><a class="atm-nav-link " href="#" title="" aria-label="" target="">EN</a>
                                    </li>
                                    <li><a class="atm-nav-link " href="#" title="" aria-label="" target="">DE</a>
                                    </li>
                                    <li><a class="atm-nav-link " href="#" title="" aria-label="" target="">FR</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <span class="atm-slash  " style="width: 1px; height: 30px;"></span>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="vebego-container">
        <div class='search-block block md:hidden'>
            <div class="mol-inline-search">
                <form action="#" method="get">
                    <div class="atm-form-input  ">
                        <input class="form-input" type="search" id="input" name="input">
                        <label class="atm-form-label form-label " for="input">Verhalen zoeken</label>

                        <span class="atm-icon form-input-error-icon far fa-times   "></span>
                        <span class="atm-icon form-input-valid-icon far fa-check   "></span>
                    </div>

                    <button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
                        <span class="button-content">

                            <span class="atm-icon  far fa-search  fa-lg fa-fw"></span>
                        </span>
                    </button>

                </form>
            </div>
        </div>
    </div>

    <div id="mol-mobile-nav" class=" mobile-nav-has-quicklinks">

        <div class="mobile-nav-panel mobile-nav-panel-active" id="mobile-nav-panel-root">
            <div class='search-block block md:hidden'>
                <div class="mol-inline-search">
                    <form action="#" method="get">
                        <div class="atm-form-input  ">
                            <input class="form-input" type="search" id="input" name="input">
                            <label class="atm-form-label form-label " for="input">Verhalen zoeken</label>

                            <span class="atm-icon form-input-error-icon far fa-times   "></span>
                            <span class="atm-icon form-input-valid-icon far fa-check   "></span>
                        </div>

                        <button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
                            <span class="button-content">

                                <span class="atm-icon  far fa-search  fa-lg fa-fw"></span>
                            </span>
                        </button>

                    </form>
                </div>
            </div>
            <ul>
                <li>
                    <a class="menu-link active" href="#" title="Impact" data-sub="0">
                        <span class="text">Impact</span>
                        <span class="atm-icon  far fa-chevron-right   "></span>
                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Betekenisvol werk">
                        <span class="text">Betekenisvol werk</span>

                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Diensten en segmenten">
                        <span class="text">Diensten en segmenten</span>

                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Contact">
                        <span class="text">Contact</span>

                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Over Vebego">
                        <span class="text">Over Vebego</span>

                    </a>
                </li>

            </ul>
            <div>
                <div class='mol-language-mobile-list'>
                    <div>
                        <ul>
                            <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">English (EN)</a>
                            </li>
                            <li class="active"><a class="atm-nav-link " href="#" title="" aria-label="" target="">Nederlands (NL)</a>
                            </li>
                            <li class=""><a class="atm-nav-link " href="#" title="" aria-label="" target="">Deutsch (DE)</a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

        <div class="mobile-nav-panel" id="mobile-nav-panel-0" data-parent="root">
            <ul>
                <li class="back-button">
                    <a class="atm-button atm-button-primary button-sm  button-light">
                        <span class="button-content">
                            <span class="atm-icon  fal fa-angle-left   "></span>
                            <span>Terug</span>
                        </span>
                    </a>

                    <span class="label">Impact</span>
                </li>
                <li>
                    <a class="menu-link active" href="#" title="Impact">
                        <span class="text">Impact</span>
                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Mijn project">
                        <span class="text">Mijn project</span>

                    </a>
                </li>
                <li>
                    <a class="menu-link active" href="#" title="Bouwreizen" data-sub="01">
                        <span class="text">Bouwreizen</span>
                        <span class="atm-icon  far fa-chevron-right   "></span>
                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Partners">
                        <span class="text">Partners</span>

                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Blog" data-sub="03">
                        <span class="text">Blog</span>
                        <span class="atm-icon  far fa-chevron-right   "></span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="mobile-nav-panel" id="mobile-nav-panel-01" data-parent="0">
            <ul>
                <li class="back-button">
                    <a class="atm-button atm-button-primary button-sm  button-light">
                        <span class="button-content">
                            <span class="atm-icon  fal fa-angle-left   "></span>
                            <span>Terug</span>
                        </span>
                    </a>

                    <span class="label">Bouwreizen</span>
                </li>
                <li>
                    <a class="menu-link active" href="#" title="Bouwreizen">
                        <span class="text">Bouwreizen</span>
                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Meld je aan">
                        <span class="text">Meld je aan</span>
                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Planning">
                        <span class="text">Planning</span>
                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Sri Lanka">
                        <span class="text">Sri Lanka</span>
                    </a>
                </li>
                <li>
                    <a class="menu-link active" href="#" title="Marokko">
                        <span class="text">Marokko</span>
                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Ghana">
                        <span class="text">Ghana</span>
                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Zuid-Afrika">
                        <span class="text">Zuid-Afrika</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="mobile-nav-panel" id="mobile-nav-panel-03" data-parent="0">
            <ul>
                <li class="back-button">
                    <a class="atm-button atm-button-primary button-sm  button-light">
                        <span class="button-content">
                            <span class="atm-icon  fal fa-angle-left   "></span>
                            <span>Terug</span>
                        </span>
                    </a>

                    <span class="label">Blog</span>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Blog">
                        <span class="text">Blog</span>
                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Nieuwste blogs">
                        <span class="text">Nieuwste blogs</span>
                    </a>
                </li>
                <li>
                    <a class="menu-link " href="#" title="Blog aanmelden">
                        <span class="text">Blog aanmelden</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="mobile-nav-quicklinks">
            <a href="#">
                <span><span class="atm-icon  far fa-chevron-right  fa-xs "></span>Werken bij Hago</span>
            </a>
            <a href="#">
                <span><span class="atm-icon  far fa-chevron-right  fa-xs "></span>Inschrijven nieuwsbrief</span>
            </a>
        </div>
    </div>

    <div class="vebego-container" id="breadcrumbs-container">
        <nav class="breadcrumbs" role="navigation">
            <span class="crumb">
                <a class="atm-link " href="#" title="Betekenisvol werk" aria-label="" target="">Betekenisvol werk</a>
                <span class="atm-icon  far fa-external-link   "></span>
            </span>
            <span class="crumb">
                <a class="atm-link " href="#" title="Voor medewerkers" aria-label="" target="">Voor medewerkers</a>
                <span class="atm-icon  far fa-external-link   "></span>
            </span>
        </nav>

    </div>

    <footer class="org-footer">
        <div class="vebego-container">
            <div class="footer-top">
                <div class="footer-column">
                    <div class="logo">
                        <img src="../../assets/img/logo_hago.svg" />
                    </div>
                    <div class="company-info">Vooruitstrevend, klaar voor de toekomst en trots om een rol te mogen spelen in het leven van vrijwel iedereen, op vele momenten.</div>
                </div>
                <div class="footer-column grid grid-cols-2 gap-8">
                    <div>
                        <div class="mol-footer-link-list">
                            <h6 class="atm-heading ">Over ons</h6>

                            <ul>
                                <li>
                                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Over Vebego</a>
                                </li>
                                <li>
                                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Werken bij Vebego</a>
                                </li>
                                <li>
                                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">Contact</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div>
                        <div class="mol-footer-text">
                            <h6 class="atm-heading ">Contact</h6>

                            <div class="atm-paragraph ">Larixplein 6</br>5616 VB Eindhoven</br>088 - 099 08 90</br><a href="info@hago.nl">info@hago.nl</a></div>

                        </div>
                    </div>
                </div>
                <div class="footer-column">
                    <div class="mol-footer-newsletter">
                        <h6 class="atm-heading ">Nieuwsbrief</h6>

                        <div class="atm-form-input  ">
                            <input class="form-input" type="text" id="input" name="input">
                            <label class="atm-form-label form-label " for="input">E-mailadres</label>

                            <span class="atm-icon form-input-error-icon far fa-times   "></span>
                            <span class="atm-icon form-input-valid-icon far fa-check   "></span>
                        </div>

                        <a class="atm-button atm-button-primary button-md  ">
                            <span class="button-content">
                                <span>Aanmelden</span>

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

                    </div>

                    <ul class="mol-social-media horizontal ">
                        <li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"><span class="atm-icon  fab fa-facebook-f  fa-lg "></span></a></li>
                        <li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"><span class="atm-icon  fab fa-instagram  fa-lg "></span></a></li>
                        <li><a href="https://www.twitter.com" target="_blank" aria-label="Twitter"><span class="atm-icon  fab fa-twitter  fa-lg "></span></a></li>
                        <li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"><span class="atm-icon  fab fa-youtube  fa-lg "></span></a></li>
                        <li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"><span class="atm-icon  fab fa-linkedin-in  fa-lg "></span></a></li>
                        <li><a href="https://wa.me/?text&#x3D;" target="_blank" aria-label="Whatsapp"><span class="atm-icon  fab fa-whatsapp  fa-lg "></span></a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="footer-column first">
                    \ A Vebego family company. © 2020 Hago Nederland.
                </div>
                <div class="footer-column second">
                    <nav class="mol-footer-utils">
                        <ul data-reset-text="Reset cookies">
                            <li><a class="atm-link " href="#" title="Privacy statement" aria-label="" target="">Privacy statement</a></li>
                            <li><a class="atm-link " href="#" title="Disclaimer" aria-label="" target="">Disclaimer</a></li>
                            <li><a class="atm-link " href="#" title="Reset cookies" aria-label="" target="">Reset cookies</a></li>
                        </ul>
                    </nav>

                </div>
            </div>
        </div>
    </footer>

    <script src="../../assets/js/scripts.js"></script>

    <script>
        var sectorCookie = getCookie('sectorClass');
        if (sectorCookie) {
            document.body.className = sectorCookie;
        }

        function getCookie(cname) {
            var name = cname + "=";
            var decodedCookie = decodeURIComponent(document.cookie);
            var ca = decodedCookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return null;
        }
    </script>

</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="{{ path '/assets/css/styles.css' }}">
    <title>Preview</title>
</head>

<body class="sector-schoonmaak">

    {{render '@header'}}
    <div class="vebego-container" id="breadcrumbs-container">
        {{render '@breadcrumbs'}}
    </div>
    {{{yield}}}
    {{render '@footer'}}

    <script src="{{ path '/assets/js/scripts.js' }}"></script>

    <script>
        var sectorCookie = getCookie('sectorClass');

        if (sectorCookie) {
            document.body.className = sectorCookie;
        }

        function getCookie(cname) {
            var name = cname + "=";
            var decodedCookie = decodeURIComponent(document.cookie);
            var ca = decodedCookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return null;
        }
    </script>

</body>

</html>
/* No context defined. */

No notes defined.