Bands

Horizontal bands of colour can be used to separate distinct regions of content on websites utilising full-width layout, ie. no left menu.

Usage

To implement the band styles, you must first add the CSS style anu-band to the <body> tag. Then a band wrapper and band style must be declared outside of the ANU grid styles. Content within band styles are constrained to the 960px grid, and you must use ANU grid styles to properly format your layout.

Example:

<body class="anu-band">
.
.
.
<div class="band-white-wrap clearfix">
  <div class="band-white">     
    <div class="full">
      <h2>Section heading</h2>
      <p>Content for this section.</p>
    </div>
  </div>
</div>
 

When choosing alternating bands of colour, you should start with darker shades at the top of the page and use lighter shades toward the bottom. For legibility and accessibility, large blocks of body text should be displayed on band-white, and inline with our digital brand listings of events should be displayed on band-grey (even if the events list is at the bottom of the page).

Please note that heading and body text colour will automatically change when using bands with darker shading, these colours can be overwritten by using text colour styles.

Banner

Banners can be used at the top of website home pages and level 1 landing pages to provide feature messaging or as a visual key to display the uniqueness of high level pages.

It is expected behaviour that clicking on the background image will link to the same location as the call-to-action button.

Because banner image dimensions are very wide (2000 x 500px - 4:1 ratio), and the sides of the banner image will be hidden on devices with smaller screens, it can be difficult to source appropriate pictures. When cropping, it's best to maintain the key focal point in the third quarter of the frame. As the display screen gets smaller, the background image shifts further to the left of center — This ensures that the subject can still be seen regardless of the screen size (see the example below).

Keep subject in third quarter of the frame

Example code:

<div class="band-banner-wrap clearfix" >
  <div class="band-banner-cover">
    <a href="http://www.anu.edu.au"><img src="band-banner.jpg"/></a>
  </div>
  <div class="band-banner">
          <div class="band-banner-text">
      <h1>Band-banner title text</h1>
      <p>Band-banner body text.</p>
      <div><br/><a href="http://www.anu.edu.au" class="band-banner-btn">Call-to-action button</a><br/>&nbsp;</div>
    </div>
  </div>
</div>
 

Band-banner title text

Band-banner body text a very brief description of the content on this landing page. If used as a 'call-to-action' you can include a button, like below.

Video banner

Banners can use motion video for backgrounds. The size requirements are the same as for still images (2000 x 500px - 4:1 ratio). Details for the key focal point also remain the same.

When choosing to use motion video, it is important to consider many accessibility requirements, such as, slow motion action is preferred, the video should last for no longer than 10 seconds before it loops from the beginning, and a pause/play button is compulsory in the description text box. Given the file size, it is best to not use more than one motion video background per page.

It is expected behaviour that clicking on the motion video background will pause/play the video.

Video banner example code:

<div class="band-banner-wrap clearfix" >
  <div class="band-banner-cover">
    <video autoplay muted no-controls loop playsinline id="banner-video" preload="metadata" onclick="vidPlayPause('banner');return false;">
      <source src="anu-rowing.mp4#t=0.5" type="video/mp4">
    </video>
  </div>
  <div class="band-banner">
          <div class="band-banner-text">
      <h1>Band-banner title text</h1>
      <p>Band-banner body text.</p>
      <div class="right"><img src="//style.anu.edu.au/_anu/4/images/buttons/btn-pause-white.png" class="w32px" alt="Pause or play video" id="banner-playpause" onclick="vidPlayPause('banner');return false;"/></div>
      <div><br/><a href="http://www.anu.edu.au" class="band-banner-btn">Call-to-action button</a><br/>&nbsp;</div>
    </div>
  </div>
</div>
 

Band-banner title text

Band-banner body text a very brief description of the content on this landing page. If used as a 'call-to-action' you can include a button, like below.


Promo

Promo bands should be used sparingly on website home pages and level 1 landing pages to target specific promotional messaging.

Promo image dimensions are also very wide (2000 x 400px - 5:1 ratio). Because these images don't have a defined focal point, they can be abstract, or have an extremely shallow depth of field. Unlike banner images, which shift to the left on smaller devices to retain the focal point, promotional images remain centred regardless of the screen size.

It is expected behaviour that clicking on the background image will link to the same location as the linked title.

Promo message example code:

<div class="band-promo-wrap clearfix">
  <div class="band-promo-cover">
    <a href="http://www.anu.edu.au"><img src="band-promo.jpg"/></a>
  </div>
  <div class="band-promo">
    <div class="band-promo-text">
      <h2><a href="http://www.anu.edu.au">Band-promo heading</a> &raquo;</h2>
      <p>Band-promo body text.</p>
    </div>
  </div>
</div>
 

Band-promo heading text link »

Band-promo body text with a static image. Proin feugiat nibh sed semper tincidunt. Donec placerat commodo mauris eget cursus. Proin feugiat nibh sed semper tincidunt.

Video promo

Promo bands can use motion video for backgrounds. The size requirements are the same as for still images (2000 x 400px - 5:1 ratio). Details for the key focal point also remain the same.

When choosing to use motion video, it is important to consider many accessibility requirements, such as, slow motion action is preferred, the video should last for no longer than 10 seconds before it loops from the beginning, and a pause/play button is compulsory in the description text box. Given the file size, it is best to not use more than one motion video background per page.

It is expected behaviour that clicking on the motion video background will pause/play the video.

Video promo message example code:

<div class="band-promo-wrap clearfix">
  <div class="band-promo-cover">
    <video autoplay muted no-controls loop playsinline id="promo-video" preload="metadata" onclick="vidPlayPause('promo');return false;">
      <source src="anu-rowing.mp4#t=0.5" type="video/mp4">
    </video>
  </div>
  <div class="band-promo">
    <div class="band-promo-text">
      <h2><a href="http://www.anu.edu.au">Band-promo heading</a> &raquo;</h2>
      <p>Band-promo body text.</p>
      <div class="center"><img src="//style.anu.edu.au/_anu/4/images/buttons/btn-pause-white.png" class="w32px" alt="Pause or play video" id="promo-playpause" onclick="vidPlayPause('promo');return false;"/></div>
    </div>
  </div>
</div>
 

Band-promo heading text link »

Band-promo body text with a background video. Proin feugiat nibh sed semper tincidunt. Donec placerat commodo mauris eget cursus. Proin feugiat nibh sed semper tincidunt.

Pause or play video

Testimonial

Testimonial bands are similar to Promotional bands -- but contain a simple quote, with no further action expected of the user.

Testimonial message example code:

<div class="band-promo-wrap clearfix">
  <div class="band-promo-cover">
    <img src="band-promo-quote.jpg"/>
  </div>
  <div class="band-promo">
    <div class="band-promo-text">
      <div class="pullquote fullwidth">
        <p>band-promo pull-quote body text.</p>
      </div>
      <p>Pull-quote attribution</p>
    </div>
  </div>
</div>
 

band-promo body text with a static image. No link, just a pullquote.

Some random attribution

Testimonial overlay

If you can't source an appropriate image for a testimonial, you can use an overlay with a simple head-shot. We can provide overlays in a variety of ANU and College colours. You can adjust the width of the open space by manipulating the sides of the overlay as required. These overlays should not be used with the banner or promo messages.

Select an image to download the full 2000 x 400px (.PNG) version.

Video testimonial

Testimonial bands can use motion video for backgrounds. The size requirements are the same as for still images (2000 x 400px - 5:1 ratio). Details for the key focal point also remain the same.

When choosing to use motion video, it is important to consider many accessibility requirements, such as, slow motion action is preferred, the video should last for no longer than 10 seconds before it loops from the beginning, and a pause/play button is compulsory in the description text box. Given the file size, it is best to not use more than one motion video background per page.

It is expected behaviour that clicking on the motion video background will pause/play the video.

Video testimonial message example code:

<div class="band-promo-wrap clearfix">
  <div class="band-promo-cover">
    <video autoplay muted no-controls loop playsinline id="quote-video" preload="metadata" onclick="vidPlayPause('quote');return false;">
      <source src="anu-rowing.mp4#t=0.5" type="video/mp4">
    </video>
  </div>
  <div class="band-promo">
    <div class="band-promo-text">
      <div class="pullquote fullwidth">
        <p>band-promo pull-quote body text.</p>
        <div class="center"><img src="//style.anu.edu.au/_anu/4/images/buttons/btn-pause-white.png" class="w32px" alt="Pause or play video" id="quote-playpause" onclick="vidPlayPause('quote');return false;"/></div>
      </div>
      <p>Pull-quote attribution</p>
    </div>
  </div>
</div>
 

band-promo body text with a background video. No link, just a pullquote.

Some random attribution

Pause or play video

University colours

Options for university colours include:

  • band-black
  • band-white
  • band-uni2 (dark platinum)

As well as options for all shades of platinum and university grey:

  • band-uni
  • band-uni75
  • band-uni50
  • band-uni25
  • band-uni10
  • band-grey
  • band-grey75
  • band-grey50
  • band-grey25
  • band-grey10

Examples:

H2 Maecenas tempor nisl nec neque luctus

band-black regular link

H2 Maecenas tempor nisl nec neque luctus

band-white regular link

H2 Maecenas tempor nisl nec neque luctus

band-uni2 regular link

H2 Maecenas tempor nisl nec neque luctus

band-uni regular link

H2 Maecenas tempor nisl nec neque luctus

band-uni75 regular link

H2 Maecenas tempor nisl nec neque luctus

band-uni50 regular link

H2 Maecenas tempor nisl nec neque luctus

band-uni25 regular link

H2 Maecenas tempor nisl nec neque luctus

band-uni10 regular link

H2 Maecenas tempor nisl nec neque luctus

band-grey regular link

H2 Maecenas tempor nisl nec neque luctus

band-grey75 regular link

H2 Maecenas tempor nisl nec neque luctus

band-grey50 regular link

H2 Maecenas tempor nisl nec neque luctus

band-grey25 regular link

H2 Maecenas tempor nisl nec neque luctus

band-grey10 regular link

College colours

There are options for all shades of College colours:

  • band-college
  • band-college75
  • band-college50
  • band-college25
  • band-college10

Examples:

H2 Maecenas tempor nisl nec neque luctus

band-college regular link

H2 Maecenas tempor nisl nec neque luctus

band-college75 regular link

H2 Maecenas tempor nisl nec neque luctus

band-college50 regular link

H2 Maecenas tempor nisl nec neque luctus

band-college25 regular link

H2 Maecenas tempor nisl nec neque luctus

band-college10 regular link

Subfooter

The Subfooter region can be used to provide additional site contextual information. This content can be links to existing navigation elements, small promotional messages, links to site specific social media, or anything relevant to a specific website or main section within a larger website. For instance, the ANU gateway website uses a megamenu navigation model to separate distinct content areas - such as STUDY and GIVING. Each of these sections of the ANU gateway website may have a unique subfooter, as the majority of the content on each section has different audience expectations.

Similar to the implementation of band styles, the subfooter wrappers must be declared outside of the ANU grid system.

Example:

<div id="subfooter-wrap">
  <div id="anu-subfooter">
    <div class="one-third">
      <p>Subfooter content</p>
    </div>
    <div class="one-third">
      <ul class="linklist">
        <li><a href="#">Subfooter links</a></li>
        <li><a href="#">Subfooter links</a></li>
        <li><a href="#">Subfooter links</a></li>
      </ul>
    </div>
    <div class="one-third box bg-white">
      <h3><a href="#">H3 Etiam tincidunt</a>  rutrum</h3>
      <p>Text in bg-white and <a href="#">regular link</a></p>
    </div>
  </div>
</div>

 

Updated:  18 May 2018/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle