Search
Users expect to be able to find what they're looking for quickly and intuitively. The GEM global search allows users to get immediate information using simple keywords or powerful advanced search features.
2.0.1
20 Nov 2019
Search overlay
The global search is positioned in the top right corner of the page header, where it is easy to find. It is represented by the search icon. Once activated, it triggers a modal overlay showing the search box and quick links.
Don't erase queries
Leaving the user's initial query in the search box after they hit the search button. This way they don't have to re-type the entire query.
Provide accurate and relevant results
Users make quick judgements about a website's quality after one or two search attempts. Give them quality search results to reflect positively on our site.
Use effective auto-suggest
Accurate and predictive auto-suggest helps your users find what they're looking for more quickly.
Sort and filter
Don't overwhelm users with irrelevant results. Enable precise searches with effective filters, and the option to apply multiple filters at once.
Search Styles
Search
<button type="button" name="button" class="button js-modal-activator" data-target="#modal--search">Active Search</button>
<aside class="search js-modal" id="modal--search">
<div class="wrap wrap--padded">
<div class="search__header">
<a href="#LINK" class="header__logo icon icon--logo-white" aria-label="Macquarie University Logo - Click here to go home">
<span class="visually-hidden">Macquarie University</span>
</a>
<button type="button" class="icon icon--close js-modal-deactivator">
<span class="visually-hidden">Click to close search</span>
</button>
</div>
<form class="search__form" action="index.html" method="post">
<div class="search__input">
<input type="search" name="#NAME" value="" placeholder="I'm looking for..." id="search" autocomplete="off"/>
<label for="search">Search for courses, people, events or anything else...</label>
</div>
<button type="submit" name="button" class="ico ico--f-search ico--lg"></button>
</form>
<div class="search__results grid">
<div class="grid__col grid__col--12 grid__col-md--4 search__quick-link">
<h3>Quick links</h3>
<ul>
<li>
<a href="#" class="link--cta link--cta--white">Link one</a>
</li>
<li>
<a href="#" class="link--cta link--cta--white">Link two</a>
</li>
<li>
<a href="#" class="link--cta link--cta--white">Link three</a>
</li>
<li>
<a href="#" class="link--cta link--cta--white">Link four</a>
</li>
<li>
<a href="#" class="link--cta link--cta--white">Link five</a>
</li>
<li>
<a href="#" class="link--cta link--cta--white">Link six</a>
</li>
</ul>
</div>
</div>
</div>
</aside>