Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.5)

Note

This page is archived under version 1.5 and is available for reference purposes only. The latest version of Pattern Library is 2.

Search

Global search

Basic search box



Search box with mobile modal

This variant has a different experience for smaller mobile screens (576px or less wide). For the smaller screens, a fake search box is displayed. When tapping this fake search box, a modal will open up with the real search box field.

Resize your window to see this in action.

Submit search

Code


<!-- Basic search box -->
<div class="cui search-box">
    <label for="search-field" class="hidden">Search</label>
    <input id="search-field" class="search-box-input" type="search">
    <button class="cui search-box-btn btn-md icon-only primary">
        <span class="cicon-search"></span>
        <span class="sr-only">Submit search</span>
    </button>
</div>


<!-- Search box with mobile modal -->
<!-- Mobile Part 1. Real search box, hidden for xxs screens -->
<div class="cui search-box hidden-xxs">
    <label for="search-field" class="hidden">Search</label>
    <input id="search-field" class="search-box-input" type="search">
    <button class="cui search-box-btn btn-md icon-only primary">
        <span class="cicon-search"></span>
        <span class="sr-only">Submit search</span>
    </button>
</div>

<!-- Mobile Part 2. Fake search-box, clicking this will open up the modal, only visible for xxs screens -->
<a href="#modal-search" class="cui search-box visible-xxs" role="button" tabindex="0" aria-label="click to open the search window" rel="modal:open">
    <div class="search-box-input"></div>
    <div class="cui search-box-btn btn-md icon-only primary">
        <span class="cicon-search"></span>
        <span class="sr-only">Submit search</span>
    </div>
</a>

<!-- Mobile Part 3. Modal, embedded in the document, activated by the mobile fake search box -->
<div id="modal-search" class="cui modal-window modal-window-search">
    <div class="modal-window-header">
        <a class="btn-modal-close cui btn-md primary-text" rel="modal:close">Close</a>
    </div>
    <div class="modal-window-body">
        <div class="cui search-box">
            <label for="search-field-modal" class="hidden">Search</label>
            <input id="search-field-modal" class="search-box-input" type="search">
            <button class="cui search-box-btn btn-md icon-only primary">
                <span class="cicon-search"></span>
                <span class="sr-only">Submit search</span>
            </button>
        </div>
    </div>
</div>

Usage

Search box with mobile modal

This variant has a different experience for smaller mobile screens (576px or less wide). For the smaller screens, a fake search box is displayed. When tapping this fake search box, a modal will open up with the real search box field.

Resize your window to see this in action.



Sub-search

Code


<label for="search-field-3" class="form-control-label cui">Search</label>
<div class="input-group cui">
    <input id="search-field-3" type="search" class="form-control sub-search-autocomplete cui" placeholder="Search for...">
    <span class="input-group-btn cui">
        <button class="cui btn-md primary">Go</button>
    </span>
</div>

Accessibility

This sub search pattern can be used for page-level search. There is no set width applied to the component. To limit the size, you can either place the component inside of a grid, or apply the .set-max-width class to a wrapping element.