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="promo.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

University colours

Options for university colours include:

  • band-black
  • band-white
  • band-tint

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-tint regular link

All the college bands [college, college75, college50, college25 and college10] are converted to band-tint.

If you would like to have white text as heading use the below class

text-white

H2 Maecenas tempor nisl nec neque luctus

band-black regular link