Vebego Component Library

Header Search 

<div id="mol-header-search" class="opened">
    <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>
 
<div id="mol-header-search" class="{{#if startOpened}}opened{{/if}}">
    <a id="header-search-close">
        <span class="text">Sluiten</span>
        {{render '@icon' iconClose merge=true}}
    </a>
    <div class="header-search-input">
        {{render '@inline-search' inputField merge=true}}
    </div>
    <div class="header-search-title">
        {{render '@heading' searchTitle merge=true}}
    </div>
    <div id="header-search-results">
        {{#each results}}
            {{render '@search-result' this merge=true}}
        {{/each}}
    </div>
    <div class="header-search-button">
        {{render '@button-secondary' buttonMore merge=true}}
    </div>
</div>
 
{
  "startOpened": true,
  "inputField": {
    "input": {
      "label": {
        "text": "Zoeken"
      }
    }
  },
  "searchTitle": {
    "text": "14 zoekresultaten"
  },
  "results": [
    {},
    {},
    {},
    {}
  ],
  "iconClose": {
    "style": "far",
    "icon": "fa-times",
    "size": "fa-lg"
  },
  "buttonMore": {
    "text": "Bekijk 14 resultaten"
  }
}
  • Content: 
    #mol-header-search {
    @apply absolute p-12 shadow-lg bg-white;
    @apply top-0 right-0 z-10;
    @apply transform-gpu transition-transform;
    @apply w-full md:w-min;
    z-index: 1000;
    transform: translateY(calc(-100% - 4rem));

    &.opened {
        transform: translateY(0);
    }

    #header-search-close {
        @apply absolute top-6 right-6;
        @apply font-display text-md text-black;
        @apply inline-block;
        @apply cursor-pointer;
        @apply select-none;

        .atm-icon {
            @apply relative ml-1;
            top: 2px;
        }
    }

    .header-search-input {
        @apply w-full md:w-80;
        @apply mt-4 mb-4;
    }

    .header-search-results {
        .mol-search-result {
            + .mol-search-result {
                @apply mt-6;
            }
        }
    }

    .header-search-button {
        @apply mt-12;
    }
}
  • URL: /components/raw/header-search/header-search.css
  • Filesystem Path: src\components\03-molecules\header-search\header-search.css
  • Size: 935 Bytes
  • Content: 
    (function () {


    'use strict';

    $('#mol-header-search #header-search-close').on('click', function () {

        $(this).parents('#mol-header-search').removeClass('opened');
    });

})();
  • URL: /components/raw/header-search/header-search.js
  • Filesystem Path: src\components\03-molecules\header-search\header-search.js
  • Size: 205 Bytes

No notes defined.