» Web style guide » Bands Bands
Please familiarise yourself with the webstyles and tools for ensuring accessibile ANU colour combinations before implementing 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:
.
.
.
<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).
Example code:
<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/> </div>
</div>
</div>
</div>
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-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/> </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-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> »</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-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> »</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.
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-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-cover">
<video autoplay muted no-controls loop playsinline id="quote-video" preload="metadata" onclick="vidPlayPause('quote');return false;">
<source src="promo.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
H2 Maecenas tempor nisl nec neque luctus
band-black regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-white regular link
H3 Etiam tincidunt rutrum
Text in bg-uni and regular link
H2 Maecenas tempor nisl nec neque luctus
band-uni2 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-uni regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-uni75 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-uni50 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-uni25 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-uni10 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-grey regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-grey75 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-grey50 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-grey25 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-grey10 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-college regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-college75 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-college50 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-college25 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and regular link
H2 Maecenas tempor nisl nec neque luctus
band-college10 regular link
H3 Etiam tincidunt rutrum
Text in bg-white and 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="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: 16 August 2018/ Responsible Officer: Director Marketing/ Page Contact: Webstyle
