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.
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).
<div class="band-banner-wrap clearfix" >
<a href="http://www.anu.edu.au"><img src="band-banner.jpg"/></a>
<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/> </div>