Searchbox basic Searchbox basic ready View Source Code Open in new window <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 Searchbox with auto-completion ready View Source Code Open in new window <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> <a href="#" class="pow-color-primary pow-flex-fit pow-max-line-1" title="Testing site"> <span>in</span> Testing site </a> <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> <a href="#" class="pow-color-primary pow-flex-fit pow-max-line-1" title="Testing site"> <span>in</span> Testing site </a> <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> <a href="#" class="pow-color-primary pow-flex-fit pow-max-line-1" title="Testing site"> <span>in</span> Testing site </a> <span class="pow-color-black pow-flex-align-right pow-font-light">01/23/2019</span> </div> </div> </div> </div> </div> </div> </div> </div>