University of Adelaide Style guide: Layouts

Default local footer

The default local footer sits within the .o-layout-secondary-bottom section of the grid system, as documented in the grid system section of the style guide.

<div class="c-local-footer">
  <div class="c-local-footer__col c-local-footer__col-first">
    <p class="c-local-footer__title">Division of the Deputy Vice-Chancellor &amp; Vice-President (Academic)</p>
  </div>
  <div class="c-local-footer__col c-local-footer__col-second">
    <p class="c-local-footer__title">Address</p>
    <div class="c-local-footer__contact">
      <p class="c-local-footer__text">The University of Adelaide<br>
        South Australia 5005<br>
        Australia</p>
    </div>
  </div>
  <div class="c-local-footer__col c-local-footer__col-third">
    <p class="c-local-footer__title">Street Address</p>
    <div class="c-local-footer__contact">
      <p class="c-local-footer__text">Level 7, Wills Building<br>
        North Terrace Campus</p>
    </div>
  </div>
  <div class="c-local-footer__col c-local-footer__col-fourth">
    <p class="c-local-footer__title">Contact</p>
    <div class="c-local-footer__contact">
      <ul class="c-local-footer__list">
        <li class="c-local-footer__list-item">T <strong><a href="tel:+61883135208">+61 8 8313 5901</a></strong></li>
        <li class="c-local-footer__list-item">F <strong><a href="tel:+61883135208">+61 8 8313 8333</a></strong></li>
        <li class="c-local-footer__list-item"><a href="mailto:dvca@adelaide.edu.au">dvca@adelaide.edu.au</a></li>
      </ul>
    </div>
  </div>
  <aside class="c-local-footer__col c-local-footer__col-fifth">
    <div class="c-local-footer__sprite-wrap">
      <a href="//www.facebook.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Friend us on Facebook"><img src="/ua_theme/images/social-icons/facebook.png" alt="Facebook"></a>
      <a href="//twitter.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Follow us on Twitter"><img src="/ua_theme/images/social-icons/twitter.png" alt="Twitter"></a>
      <a href="//www.linkedin.com/company/university-of-adelaide" class="c-local-footer__icon-list ua-social-icon" title="Network with us on LinkedIn"><img src="/ua_theme/images/social-icons/linkedin.png" alt="LinkedIn"></a>
      <a href="//www.youtube.com/user/universityofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Watch us on YouTube"><img src="/ua_theme/images/social-icons/youtube.png" alt="YouTube"></a>
      <a href="//plus.google.com/109424345116380358719/posts" class="c-local-footer__icon-list ua-social-icon" title="See us on Google+"><img src="/ua_theme/images/social-icons/gplus.png" alt="Google+"></a>
      <a href="//www.adelaide.edu.au/rss/" class="c-local-footer__icon-list ua-social-icon" title="Subscribe to our RSS"><img src="/ua_theme/images/social-icons/rss.png" alt="RSS"></a>
    </div>
  </aside>
</div>

This is a variation to the default local footer and should be used in place of the default local footer, it should never be used in addition to the local footer. It is intended for use on student focused sites and service oriented sites.

There are a few variations of this pattern (see below). Display rules are as follows:

The main contact details should always appear in the first column.
Subsequent columns can include a pod or title with button(s) and/or social media icons.

This footer sits within the .o-layout-secondary-bottom section of the grid system, as documented in the grid system section of the style guide.

Components that can be used within the promotional local footer are buttons, text and social media icons. Button colours should be used with discretion.

<div class="c-local-footer c-local-footer--promo has-one-col"> <!-- Apply modifier classes to this element, ie., .has-two-col, .has-three-col, .has-four-col, .has-five-col -->
  <div class="c-local-footer__col c-local-footer__col-first">
    <p class="c-local-footer__title">Ask Adelaide</p>
    <div class="c-local-footer__contact">
      <p class="c-local-footer__text-large">Call us <strong><a href="tel:+61883135208">+61 8 8313 5208</a></strong></p>
      <p class="c-local-footer__text">(Toll free) 1800 061 459</p>
    </div>
    <div class="c-local-footer__details">
      <a href="#0" class="c-local-footer__icon-list c-btn c-btn--warning c-local-footer__promo-btn">Answers to Your Questions</a>
      <a href="#0" class="c-local-footer__icon-list c-btn c-btn--warning c-local-footer__promo-btn">Hub Central</a>
      <div class="c-local-footer__sprite-wrap">
        <a href="//www.facebook.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Friend us on Facebook"><img src="/ua_theme/images/social-icons/facebook.png" alt="Facebook"></a>
        <a href="//twitter.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Follow us on Twitter"><img src="/ua_theme/images/social-icons/twitter.png" alt="Twitter"></a>
      </div>
    </div>
  </div>
</div>

Two columns

<div class="c-local-footer c-local-footer--promo has-two-col"> <!-- Apply modifier classes to this element, ie., .has-two-col, .has-three-col, .has-four-col, .has-five-col -->
  <div class="c-local-footer__col c-local-footer__col-first">
    <p class="c-local-footer__title">Ask Adelaide</p>
    <div class="c-local-footer__contact">
      <p class="c-local-footer__text-large">Call us <strong><a href="tel:+61883135208">+61 8 8313 5208</a></strong></p>
      <p class="c-local-footer__text">(Toll free) 1800 061 459</p>
    </div>
    <div class="c-local-footer__details">
      <a href="#0" class="c-local-footer__icon-list c-btn c-btn--warning c-local-footer__promo-btn">Answers to Your Questions</a>
      <a href="#0" class="c-local-footer__icon-list c-btn c-btn--warning c-local-footer__promo-btn">Hub Central</a>
      <div class="c-local-footer__sprite-wrap">
        <a href="//www.facebook.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Friend us on Facebook"><img src="/ua_theme/images/social-icons/facebook.png" alt="Facebook"></a>
        <a href="//twitter.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Follow us on Twitter"><img src="/ua_theme/images/social-icons/twitter.png" alt="Twitter"></a>
      </div>
    </div>
  </div>
  <div class="c-local-footer__col c-local-footer__col-second">
    <div class="c-pod">
      <a href="#0" title="" class="c-pod__link">
        <p class="c-pod__title">Strategic Plan</p>
        <div class="c-pod__content">
          <img src="/kss-assets/images/placeholder/600x392.jpg" alt="">
          <span class="c-btn--more" aria-hidden="true">More</span>
        </div>
      </a>
    </div>
  </div>
</div>

Three columns

<div class="c-local-footer c-local-footer--promo has-three-col"> <!-- Apply modifier classes to this element, ie., .has-two-col, .has-three-col, .has-four-col, .has-five-col -->
  <div class="c-local-footer__col c-local-footer__col-first">
    <p class="c-local-footer__title">Ask Adelaide</p>
    <div class="c-local-footer__contact">
      <p class="c-local-footer__text-large">Call us <strong><a href="tel:+61883135208">+61 8 8313 5208</a></strong></p>
      <p class="c-local-footer__text">(Toll free) 1800 061 459</p>
    </div>
    <div class="c-local-footer__details">
      <a href="#0" class="c-local-footer__icon-list c-btn c-btn--warning c-local-footer__promo-btn">Answers to Your Questions</a>
      <a href="#0" class="c-local-footer__icon-list c-btn c-btn--warning c-local-footer__promo-btn">Hub Central</a>
      <div class="c-local-footer__sprite-wrap">
        <a href="//www.facebook.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Friend us on Facebook"><img src="/ua_theme/images/social-icons/facebook.png" alt="Facebook"></a>
        <a href="//twitter.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Follow us on Twitter"><img src="/ua_theme/images/social-icons/twitter.png" alt="Twitter"></a>
      </div>
    </div>
  </div>
  <div class="c-local-footer__col c-local-footer__col-second">
    <div class="c-pod">
      <a href="#0" title="" class="c-pod__link">
        <p class="c-pod__title">Strategic Plan</p>
        <div class="c-pod__content">
          <img src="/kss-assets/images/placeholder/600x392.jpg" alt="">
          <span class="c-btn--more" aria-hidden="true">More</span>
        </div>
      </a>
    </div>
  </div>
  <div class="c-local-footer__col c-local-footer__col-third">
    <div class="c-pod">
      <a href="#0" title="" class="c-pod__link">
        <p class="c-pod__title">Strategic Plan</p>
        <div class="c-pod__content">
          <img src="/kss-assets/images/placeholder/600x392.jpg" alt="">
        <span class="c-btn--more" aria-hidden="true">More</span>
        </div>
      </a>
    </div>
  </div>
</div>

Four columns

<div class="c-local-footer c-local-footer--promo has-four-col"> <!-- Apply modifier classes to this element, ie., .has-two-col, .has-three-col, .has-four-col, .has-five-col -->
  <div class="c-local-footer__col c-local-footer__col-first">
    <p class="c-local-footer__title">Ask Adelaide</p>
    <div class="c-local-footer__contact">
      <p class="c-local-footer__text"><strong>Call us <a href="tel:+61883135208">+61 8 8313 5208</a></strong></p>
      <p class="c-local-footer__text">(Toll free) 1800 061 459</p>
    </div>
  </div>
  <div class="c-local-footer__col c-local-footer__col-second">
    <p class="c-pod__title">Get in touch</p>
    <div class="c-local-footer__details">
      <a href="#0" class="c-local-footer__icon-list c-btn c-btn--warning c-local-footer__promo-btn">Answers to Your Questions</a>
      <div class="c-local-footer__sprite-wrap">
        <a href="//www.facebook.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Friend us on Facebook"><img src="/ua_theme/images/social-icons/facebook.png" alt="Facebook"></a>
        <a href="//twitter.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Follow us on Twitter"><img src="/ua_theme/images/social-icons/twitter.png" alt="Twitter"></a>
      </div>
    </div>
  </div>
  <div class="c-local-footer__col c-local-footer__col-third">
    <div class="c-pod">
      <a href="#0" title="" class="c-pod__link">
        <p class="c-pod__title">Strategic Plan</p>
        <div class="c-pod__content">
          <img src="/kss-assets/images/placeholder/600x392.jpg" alt="">
        <span class="c-btn--more" aria-hidden="true">More</span>
        </div>
      </a>
    </div>
  </div>
  <div class="c-local-footer__col c-local-footer__col-fourth">
    <div class="c-pod">
      <a href="#0" title="" class="c-pod__link">
        <p class="c-pod__title">Strategic Plan</p>
        <div class="c-pod__content">
          <img src="/kss-assets/images/placeholder/600x392.jpg" alt="">
          <span class="c-btn--more" aria-hidden="true">More</span>
        </div>
      </a>
    </div>
  </div>
</div>

Five columns

<div class="c-local-footer c-local-footer--promo has-five-col"> <!-- Apply modifier classes to this element, ie., .has-two-col, .has-three-col, .has-four-col, .has-five-col -->
  <div class="c-local-footer__col c-local-footer__col-first">
    <p class="c-local-footer__title">Ask Adelaide</p>
    <div class="c-local-footer__contact">
      <p class="c-local-footer__text"><strong>Call us <a href="tel:+61883135208">+61 8 8313 5208</a></strong></p>
      <p class="c-local-footer__text">(Toll free) 1800 061 459</p>
    </div>
  </div>
  <div class="c-local-footer__col c-local-footer__col-second">
    <p class="c-local-footer__title">Get in touch</p>
    <div class="c-local-footer__details">
      <a href="#0" class="c-local-footer__icon-list c-btn c-btn--warning c-local-footer__promo-btn">Answers to Your Questions</a>
      <a href="#0" class="c-local-footer__icon-list c-btn c-btn--primary c-local-footer__promo-btn">Email us</a>
      <a href="#0" class="c-local-footer__icon-list c-btn c-btn--warning c-local-footer__promo-btn">Hub Central</a>
    </div>
  </div>
  <div class="c-local-footer__col c-local-footer__col-third">
    <p class="c-local-footer__title">Column 3 title</p>
    <div class="c-local-footer__details">
      <a class="c-local-footer__icon-list c-btn c-btn--primary c-btn--two-line c-local-footer__promo-btn">
        <span class="c-btn__title">Register</span>
        <span class="c-btn__caption">for more info</span>
      </a>
    </div>
  </div>
  <div class="c-local-footer__col c-local-footer__col-fourth">
    <div class="c-pod">
      <a href="#0" title="" class="c-pod__link">
        <p class="c-pod__title">Strategic Plan</p>
        <div class="c-pod__content">
          <img src="/kss-assets/images/placeholder/600x392.jpg" alt="alternate text">
          <span class="c-btn--more" aria-hidden="true">More</span>
        </div>
      </a>
    </div>
  </div>
  <aside class="c-local-footer__col c-local-footer__col-fifth">
    <p class="c-local-footer__title">Find us online</p>
    <div class="c-local-footer__details">
      <div class="c-local-footer__sprite-wrap">
        <a href="//www.facebook.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Friend us on Facebook"><img src="/ua_theme/images/social-icons/facebook.png" alt="Facebook"></a>
        <a href="//twitter.com/uniofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Follow us on Twitter"><img src="/ua_theme/images/social-icons/twitter.png" alt="Twitter"></a>
        <a href="//www.youtube.com/user/universityofadelaide" class="c-local-footer__icon-list ua-social-icon" title="Watch us on YouTube"><img src="/ua_theme/images/social-icons/youtube.png" alt="YouTube"></a>
        <a href="//plus.google.com/109424345116380358719/posts" class="c-local-footer__icon-list ua-social-icon" title="See us on Google+"><img src="/ua_theme/images/social-icons/gplus.png" alt="Google+"></a>
      </div>
    </div>
  </aside>
</div>