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.