Standard Life Digital Framework

Search

full screen new window example HTML markup

The search component allows for a site search function to be added to each page.

This is a non-functional search component and will need to be linked to the search provider JS to work.

Usage

Place the search form into any component for the search input to be displayed.

To use the search component in the navigation, add the the html markup to the modal component in the main navigation. Some utility classes may be required to get the required styles.

Search heading

Markup: search\search.hbs

Copy

<div class="slb-search">
    <div class="slb-search__block">
        <form>
            <div class="slb-search__group">
                <input type="text" class="slb-search__control-block" id="website-search-mobile-nav" />
                <label class="slb-search__label" for="website-search-mobile-nav">Search</label>
                <div class="slb-search__control-group-append-block slb-bl-0 slb-background-white slb-show">
                    <button type="submit" class="slb-button slb-button--search">
                        <span class="fa fa-search slb-colour-blue-alt" aria-hidden="true"></span>
                        <span class="sr-only">Search</span>
                    </button>
                </div>
            </div>
        </form>
        <div class="row">
            <div class="col-12 col-md-6">
                <h3 class="slb-search__heading">Search heading</h3>
                <ul class="slb-search__list">
                    <li class="slb-search__list--item"><a href="#" class="slb-search__list--item-link" target="_self" title="Link title text">Link text</a></li>
                    <li class="slb-search__list--item"><a href="#" class="slb-search__list--item-link" target="_self" title="Link title text">Link text</a></li>
                    <li class="slb-search__list--item"><a href="#" class="slb-search__list--item-link" target="_self" title="Link title text">Link text</a></li>
                    <li class="slb-search__list--item"><a href="#" class="slb-search__list--item-link" target="_self" title="Link title text">Link text</a></li>
                </ul>
            </div>
            <div class="col-12 col-md-6">
                <h3 class="slb-search__heading">Search heading</h3>
                <ul class="slb-search__list">
                    <li class="slb-search__list--item"><a href="#" class="slb-search__list--item-link" target="_self" title="Link title text">Link text</a></li>
                    <li class="slb-search__list--item"><a href="#" class="slb-search__list--item-link" target="_self" title="Link title text">Link text</a></li>
                    <li class="slb-search__list--item"><a href="#" class="slb-search__list--item-link" target="_self" title="Link title text">Link text</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Source: components/_search.scss