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.