Components

Degree Finder

Degree Finder - search block

Used on pages to allow students to search for undergraduate and postgraduate degrees, subjects or careers.

The placeholder text should be able to be customised by site editors to ensure the search suggestion is relevant to a site's content.

JavaScript class: .js-autocomplete__search-wrapper

Degree Finder search for degrees, subjects or careers...

Help me find a degree that matches my goals

<div class="degree-finder-search">
    <h2 class="degree-finder-search__title">
      <a href="//adelaide.edu.au/degree-finder"  class="degree-finder-search__title-link" title="Find your Degree Online">Degree Finder</a>
      <em class="degree-finder-search__title-description">search for degrees, subjects or careers...</em>
    </h2>
  <div class="degree-finder-search__content">
    <div class="js-autocomplete__search-wrapper">
      <form id="degree-finder-search-form" class="degree-finder-search__form" method="get" action="//www.adelaide.edu.au/degree-finder/">
        <!-- inline block component -->
        <div class="c-inline-form c-inline-block-form">
          <input name="autocomplete" placeholder="e.g. Engineering" type="text">
          <div class="c-inline-block-form__controls">
            <button class="c-inline-block-form__controls-button c-btn c-content-form__btn c-btn--danger" type="submit" title="Search the website for this term">Search</button>
          </div>
        </div>
        <!-- / inline block component -->
      </form>
    </div>
    <div class="degree-finder-search__options-divider"><em class="degree-finder-search__options-divider-text">or</em></div>
    <div class="degree-finder-search__search-options">
      <a href="//adelaide.edu.au/degree-finder" class="degree-finder-search__search-options-link" title="Search options">
        Help me find a degree that matches my goals
      </a>
    </div>
  </div>
</div>