University of Adelaide Style guide: Layouts

Header toolbar

The header toolbar sits within the .o-layout-header section of the grid system, as discussed in the grid system section of the style guide.

JavaScript class: .js-toolbar-search-form

<div class="c-header-toolbar">
  <div class="c-header-toolbar__aside1">
    <a href="//adelaide.edu.au" class="c-header-toolbar__home-link"><span class="c-header-toolbar__home-link-icon ua-icon-library"></span> University of Adelaide</a>
  </div>
  <div class="c-header-toolbar__aside2">
    <!-- Search form -->
    <div class="c-toolbar-search-form js-toolbar-search-form">
      <div class="c-toolbar-search-form__content c-append-form">
        <input type="text" name="Search" class="c-toolbar-search-form__text-input u-input--small" autocomplete="off" placeholder="Search Current Site" title="Search Current Site">
        <button class="c-toolbar-search-form__select-btn c-btn c-btn--small" name="Search Options">
          <span class="hidden-text">Search Options</span> &#9660;
        </button>
        <ul class="c-toolbar-search-form__select-options">
          <li class="c-toolbar-search-form__select-options__item">
            <label class="c-toolbar-search-form__select-options__label" for="toolbar-search-opt-current">
              <input class="c-toolbar-search-form__select-options__input" id="toolbar-search-opt-current" name="toolbar-search-opt" value="current" type="radio" checked="checked">
              Current Site
            </label>
          </li>
          <li class="c-toolbar-search-form__select-options__item">
            <label class="c-toolbar-search-form__select-options__label" for="toolbar-search-opt-website">
              <input class="c-toolbar-search-form__select-options__input" id="toolbar-search-opt-website" name="toolbar-search-opt" value="website" type="radio">
              All University Sites
            </label>
          </li>
          <li class="c-toolbar-search-form__select-options__item">
            <label class="c-toolbar-search-form__select-options__label" for="toolbar-search-opt-people">
              <input class="c-toolbar-search-form__select-options__input" id="toolbar-search-opt-people" name="toolbar-search-opt" value="people" type="radio">
              People
            </label>
          </li>
          <li class="c-toolbar-search-form__select-options__item">
            <label class="c-toolbar-search-form__select-options__label" for="toolbar-search-opt-library">
              <input class="c-toolbar-search-form__select-options__input" id="toolbar-search-opt-library" name="toolbar-search-opt" value="library" type="radio">
              Library
            </label>
          </li>
          <li class="c-toolbar-search-form__select-options__item">
            <label class="c-toolbar-search-form__select-options__label" for="toolbar-search-opt-degrees">
              <input class="c-toolbar-search-form__select-options__input" id="toolbar-search-opt-degrees" name="toolbar-search-opt" value="degrees" type="radio">
              Degrees
            </label>
          </li>
          <li class="c-toolbar-search-form__select-options__item">
            <label class="c-toolbar-search-form__select-options__label" for="toolbar-search-opt-blogs">
              <input class="c-toolbar-search-form__select-options__input" id="toolbar-search-opt-blogs" name="toolbar-search-opt" value="blogs" type="radio">
              Blogs
            </label>
          </li>
        </ul>
      </div>
      <button class="c-toolbar-search-form__search-btn c-btn c-btn--danger c-btn--small">
        <span class="c-toolbar-search-form__search-btn__icon ua-icon-search"></span> Search
      </button>
    </div>
    <!-- /Search form -->
    <!-- auth -->
    <div class="c-auth-login">
      <a href="#0" class="c-auth-login__link"><span class="ua-icon-lock"></span> Logout <span class="c-auth-login__user">(a1234567)</span></a>
    </div>
    <!-- /auth -->
  </div>
</div>

Header toolbar minimal

The header toolbar minimal is a variation of the original header toolbar with minimal components and is used for 3rd party applications that need to implement header and footer only.

If your application only requires the header and footer from the style guide, you can download the latest copy of the header and footer HTML template.

<div class="c-header-toolbar">
  <div class="c-header-toolbar__aside1">
    <a href="//adelaide.edu.au" class="c-header-toolbar__home-link"><span class="c-header-toolbar__home-link-icon ua-icon-library"></span> University of Adelaide</a>
  </div>
  <div class="c-header-toolbar__aside2">
    <!-- Search form -->
    <div class="c-toolbar-search-form js-toolbar-search-form">
      <span class="c-toolbar-search-form__search-btn c-btn c-btn--danger c-btn--small">
        <a href="//search.adelaide.edu.au/" class="c-toolbar-search-form__search-btn-link">
          <span class="c-toolbar-search-form__search-btn__icon ua-icon-search"></span> Search
        </a>
      </span>
    </div>
    <!-- /Search form -->
    <!-- auth -->
    <div class="c-auth-login">
      <a href="#0" class="c-auth-login__link"><span class="ua-icon-lock"></span> Logout <span class="c-auth-login__user">(a1234567)</span></a>
    </div>
    <!-- /auth -->
  </div>
</div>

Header branding

The header branding sits within the .o-layout-header section of the grid system, as documented in the grid system section of the style guide.

<div class="c-header-branding">
  <div class="c-header-branding__site-title">
    <a href="#0" id="" class="c-header-branding__site-title-link" title="">
      The University of Adelaide
    </a>
  </div>
  <div class="c-header-branding__branding-logo">
    <a href="//www.adelaide.edu.au/" class="c-header-branding__branding-logo-link" title="">
      <img src="/ua_theme/images/logos/uofa-logo.png" class="c-header-branding__branding-logo-image" alt="The University of Adelaide Logo">
    </a>
  </div>
</div>