<div class="uk-section uk-section-default uk-flex uk-flex-middle" uk-height-viewport>
    <div class="uk-width-1-1">
        <div class="uk-container uk-container-small">


            <h2>Default</h2>

            <div class="uk-margin" uk-margin>
                <form class="uk-search uk-search-default">
                    <span uk-search-icon></span>
                    <input class="uk-search-input" type="search" placeholder="Search...">
                </form>
            </div>

            <h2>Navbar</h2>

            <div class="uk-margin uk-navbar-container uk-navbar">
                <div class="uk-navbar-left">
                    <div class="uk-navbar-item">

                        <form class="uk-search uk-search-navbar">
                            <span uk-search-icon></span>
                            <input class="uk-search-input" type="search" placeholder="Search...">
                        </form>

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

            <h2>Large</h2>

            <div class="uk-margin" uk-margin>
                <form class="uk-search uk-search-large">
                    <span uk-search-icon></span>
                    <input class="uk-search-input" type="search" placeholder="Search...">
                </form>
            </div>

            <h2>Toggle</h2>

            <a class="uk-search-toggle" href="#" uk-search-icon></a>

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