Vebego Component Library

Search Header 

<section class="org-search-header">
    <div class="vebego-container">
        <span class="atm-heading h5">15 zoekresultaten voor</span>

        <h1 class="atm-heading ">&quot;facilitair advies&quot;</h1>

        <div class="wrap-search">
            <div class="center">
                <form action="#" method="get">
                    <span class="atm-icon  far fa-search  fa-md "></span>
                    <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-lg  " type="submit">
                        <span class="button-content">
                            <span>Zoeken</span>

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

                </form>
            </div>
        </div>
    </div>
</section>
 
<section class="org-search-header">
    <div class="vebego-container">
        {{ render '@heading' subtitle }}
        {{ render '@heading--h1' title merge=true }}
        
        <div class="wrap-search">
            <div class="center">
                <form action="{{formAction}}" method="{{formMethod}}">
                {{ render '@icon' icon }}
                {{ render '@input' input merge=true }}
                {{ render '@button-primary--lg' button merge=true }}
                </form>
            </div>
        </div>
    </div>
</section>
 
{
  "subtitle": {
    "tag": "span",
    "modifier": "h5",
    "text": "15 zoekresultaten voor"
  },
  "title": {
    "text": "\"facilitair advies\""
  },
  "icon": {
    "icon": "fa-search",
    "style": "far",
    "size": "fa-md"
  },
  "button": {
    "text": "Zoeken",
    "type": "submit",
    "element": "button"
  },
  "input": {
    "type": "search",
    "label": {
      "text": "Zoeken..."
    }
  },
  "formMethod": "get",
  "formAction": "#"
}
  • Content: 
    .org-search-header {
    @apply bg-primary-100;
    @apply text-center;
    @apply py-14;

    .atm-heading.h5 {
        @apply font-normal;
    }

    .wrap-search {
        @apply md:bg-white;
        @apply md:inline-block;
        @apply md:w-max;
        @apply p-4;
        @apply md:p-2;
        @apply md:pl-6;

        .center {
            @apply grid;
            @apply gap-3;
            @apply md:flex;
            @apply md:justify-center;

            form {
                @apply flex;
            }

            .atm-icon {
                @apply mr-4;
            }

            .atm-form-input {
                .form-input {
                    @apply border-0;
                    @apply w-full;
                    @apply md:w-64;
                }
            }
        }
    }

    *,
    ::after,
    ::before {
        @apply items-center;
    }
}
  • URL: /components/raw/search-header/search-header.css
  • Filesystem Path: src\components\04-organisms\search-header\search-header.css
  • Size: 923 Bytes
  • Content: 
    (function () {


    'use strict';

    $('.org-search-header form').on('submit', function(e) {

        return $(this).find('input[type="search"]').val().trim() !== '';
    });
})();
  • URL: /components/raw/search-header/search-header.js
  • Filesystem Path: src\components\04-organisms\search-header\search-header.js
  • Size: 192 Bytes

No notes defined.