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>
Search Documentation
Use
Search is just a unique modal variation. See modal documentation.
Search results data is currently hard coded in the search.js file. This will need to be refactored once a working API is provided.