About
Themes
Searchbox
Searchbox description
Searchbox basic
ready
		<div class="pow-search-box">
    <div class="pow-search-box-input-wrapper">
        <label class="visuallyhidden" for="refered_input">label</label>
        <input type="text" id="refered_input" class="pow-input" placeholder="Input value text">
        <button type="button" class="pow-input-empty">
            <span class="visuallyhidden">Search</span>
        </button>
        <button type="button" class="pow-input-search">
            <span class="visuallyhidden">Clear</span>
        </button>
    </div>
</div>
		
Searchbox with auto-completion
ready
		<div class="pow-search-box">
    <div class="pow-search-box-input-wrapper">
        <label class="visuallyhidden" for="refered_input">label</label>
        <input type="text" id="refered_input" class="pow-input" placeholder="Input value text">
        <button type="button" class="pow-input-empty">
            <span class="visuallyhidden">Search</span>
        </button>
        <button type="button" class="pow-input-search">
            <span class="visuallyhidden">Clear</span>
        </button>
    </div>
    <div class="pow-input-autocompletion">
        <div class="pow-list-with-image">
            <div class="wrap">
                <div class="grid-container-item no-gutters">
                    <div class="item pow-padding-sm pow-flexbox pow-flex-row pow-flex-nowrap item-size--1 pow-flex-align-items-center">
                        <div class="container-image pow-margin-right-sm pow-icon-container-xs pow-rounded pdf">
                        </div>
                        <div class="container-content pow-flex-fit pow-font-regular">
                            <a href="#" class="pow-heading-4 pow-max-line-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates numquam iure ducimus perferendis, laboriosam atque eius, aperiam placeat aliquam a quae obcaecati fugit. Laborum veniam laudantium hic dignissimos repellat qui!</a>
                            <div class="pow-flexbox pow-flex-row pow-flex-nowrap">
                                <span class="pow-color-black400">Bernard Testing</span>&nbsp;
                                <a href="#" class="pow-color-primary pow-flex-fit pow-max-line-1" title="Testing site">
                                    <span>in</span>
                                    Testing site
                                </a>&nbsp;
                                <span class="pow-color-black pow-flex-align-right pow-font-light">01/23/2019</span>
                            </div>
                        </div>
                    </div>
                    <div class="item pow-padding-sm pow-flexbox pow-flex-row pow-flex-nowrap item-size--1 pow-flex-align-items-center">
                        <div class="container-image pow-margin-right-sm pow-icon-container-xs pow-rounded pdf">
                        </div>
                        <div class="container-content pow-flex-fit pow-font-regular">
                            <a href="#" class="pow-heading-4 pow-max-line-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates numquam iure ducimus perferendis, laboriosam atque eius, aperiam placeat aliquam a quae obcaecati fugit. Laborum veniam laudantium hic dignissimos repellat qui!</a>
                            <div class="pow-flexbox pow-flex-row pow-flex-nowrap">
                                <span class="pow-color-black400">Bernard Testing</span>&nbsp;
                                <a href="#" class="pow-color-primary pow-flex-fit pow-max-line-1" title="Testing site">
                                    <span>in</span>
                                    Testing site
                                </a>&nbsp;
                                <span class="pow-color-black pow-flex-align-right pow-font-light">01/23/2019</span>
                            </div>
                        </div>
                    </div>
                    <div class="item pow-padding-sm pow-flexbox pow-flex-row pow-flex-nowrap item-size--1 pow-flex-align-items-center">
                        <div class="container-image pow-margin-right-sm pow-icon-container-xs pow-rounded pdf">
                        </div>
                        <div class="container-content pow-flex-fit pow-font-regular">
                            <a href="#" class="pow-heading-4 pow-max-line-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates numquam iure ducimus perferendis, laboriosam atque eius, aperiam placeat aliquam a quae obcaecati fugit. Laborum veniam laudantium hic dignissimos repellat qui!</a>
                            <div class="pow-flexbox pow-flex-row pow-flex-nowrap">
                                <span class="pow-color-black400">Bernard Testing</span>&nbsp;
                                <a href="#" class="pow-color-primary pow-flex-fit pow-max-line-1" title="Testing site">
                                    <span>in</span>
                                    Testing site
                                </a>&nbsp;
                                <span class="pow-color-black pow-flex-align-right pow-font-light">01/23/2019</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>