Bands
Horizontal bands of colour can be used to separate distinct regions of content on websites. The colour will take up the whole viewport but we still want the content to keep aligned with others.
Please familiarise yourself with the webstyles and tools for ensuring accessible ANU colour combinations before implementing bands.
Overview
The implementation of this style is not complex. What you need to do is to add a parent <div> with class band-{colour}-wrap to the container you are using. In other words, the band wrapper must be declared outside of the ANU grid styles.
In order to use bands, you will need to replace {colour} with white, tint and black which are defined in our colours page. i.e. band-black-wrap.
When choosing band colours, think about the content you are adding to this <div>:
band-white-wrapfor displaying large blocks of text content.band-tint-wrapcan be used to display promoted information, e.g. events, videos, etc.
Please note: Font colour will automatically change based on the band background (text colour will change to white on band-black-wrap by default, no extra classes need to apply).
<div class="band-black-wrap">
<div class="container">
...content
</div>
</div>
Banner
Banners can be used at the top of website home pages and the first hierarchical level of landing pages to provide featured messages or as a visual key to display the uniqueness of high-level pages.
The dimension of a banner image is very wide (2000 x 500px - 4:1 ratio), it is important that we need to take different screen sizes into consideration. When visitors are using smaller screen size devices (e.g. tablets, phones) to visit our website, the sides of the banner image will be cropped off.
It can be difficult to source appropriate banner images. 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 centre — This ensures that the subject can still be seen regardless of the screen size (see the example below).
Customisation
Options for colour bands include:
band-black-wrapband-white-wrapband-tint-wrap
Use cases
Below are examples of different bands with different coloured boxes.
Black band with white box:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Posuere ac ut consequat semper viverra nam libero. Quam nulla porttitor massa id. Ultrices dui sapien eget mi. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Tellus at urna condimentum mattis. Sagittis orci a scelerisque purus. Donec enim diam vulputate ut pharetra sit amet. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Nulla pharetra diam sit amet. Nisl nisi scelerisque eu ultrices. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Bibendum enim facilisis gravida neque. Urna nunc id cursus metus. Viverra adipiscing at in tellus integer feugiat scelerisque. Sit amet purus gravida quis.
Black band with tint box:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Posuere ac ut consequat semper viverra nam libero. Quam nulla porttitor massa id. Ultrices dui sapien eget mi. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Tellus at urna condimentum mattis. Sagittis orci a scelerisque purus. Donec enim diam vulputate ut pharetra sit amet. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Nulla pharetra diam sit amet. Nisl nisi scelerisque eu ultrices. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Bibendum enim facilisis gravida neque. Urna nunc id cursus metus. Viverra adipiscing at in tellus integer feugiat scelerisque. Sit amet purus gravida quis.
White band with tint box:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Posuere ac ut consequat semper viverra nam libero. Quam nulla porttitor massa id. Ultrices dui sapien eget mi. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Tellus at urna condimentum mattis. Sagittis orci a scelerisque purus. Donec enim diam vulputate ut pharetra sit amet. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Nulla pharetra diam sit amet. Nisl nisi scelerisque eu ultrices. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Bibendum enim facilisis gravida neque. Urna nunc id cursus metus. Viverra adipiscing at in tellus integer feugiat scelerisque. Sit amet purus gravida quis.
White band with black box:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Posuere ac ut consequat semper viverra nam libero. Quam nulla porttitor massa id. Ultrices dui sapien eget mi. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Tellus at urna condimentum mattis. Sagittis orci a scelerisque purus. Donec enim diam vulputate ut pharetra sit amet. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Nulla pharetra diam sit amet. Nisl nisi scelerisque eu ultrices. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Bibendum enim facilisis gravida neque. Urna nunc id cursus metus. Viverra adipiscing at in tellus integer feugiat scelerisque. Sit amet purus gravida quis.
Tint band with white box:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Posuere ac ut consequat semper viverra nam libero. Quam nulla porttitor massa id. Ultrices dui sapien eget mi. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Tellus at urna condimentum mattis. Sagittis orci a scelerisque purus. Donec enim diam vulputate ut pharetra sit amet. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Nulla pharetra diam sit amet. Nisl nisi scelerisque eu ultrices. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Bibendum enim facilisis gravida neque. Urna nunc id cursus metus. Viverra adipiscing at in tellus integer feugiat scelerisque. Sit amet purus gravida quis.
Tint band with black box:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Posuere ac ut consequat semper viverra nam libero. Quam nulla porttitor massa id. Ultrices dui sapien eget mi. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Tellus at urna condimentum mattis. Sagittis orci a scelerisque purus. Donec enim diam vulputate ut pharetra sit amet. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Nulla pharetra diam sit amet. Nisl nisi scelerisque eu ultrices. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Bibendum enim facilisis gravida neque. Urna nunc id cursus metus. Viverra adipiscing at in tellus integer feugiat scelerisque. Sit amet purus gravida quis.
Bands with different applicable font sizes
For more information on web accessibility, please see the Accessibility page.
We have only listed out the approved combination of background colour, font size and text colour. DO NOT use combinations that were not listed here, because they either not pass Web Accessibility or don't follow our University branding.
Black band with white text:
By default, the font colour on a black background will automatically convert to white. No extra class is needed.
H1: Lorem ipsum dolor sit amet
H2: Maecenas tempor nisl nec neque luctus
H3: Aut expedita necessitatibus et quia consequuntur?
H4: Non natus voluptatem et soluta possimus.
H5: Qui consequatur quia et corporis expedita!
H6: sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
P: band-black-wrap regular link
Large: Quam nulla porttitor massa id.
Semi-large: Ultrices dui sapien eget mi.
Small: Eget magna fermentum iaculis eu non diam phasellus vestibulum.
Black band with gold text:
The link colour for text buttons on black background by default is white, but since we are appending .text-gold to the header tags, it's overriding the default colour setting.
H1: Lorem ipsum dolor sit amet
H2: Maecenas tempor nisl nec neque luctus
H3: Aut expedita necessitatibus et quia consequuntur?
H4: Non natus voluptatem et soluta possimus.
H5: Qui consequatur quia et corporis expedita!
H6: sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
P: band-black-wrap regular link
Large: Quam nulla porttitor massa id.
Semi-large: Ultrices dui sapien eget mi.
Small: Eget magna fermentum iaculis eu non diam phasellus vestibulum.
White band with black text:
By default, the font colour on white/no background is black. No extra class is needed.
H1: Lorem ipsum dolor sit amet
H2: Maecenas tempor nisl nec neque luctus
H3: Aut expedita necessitatibus et quia consequuntur?
H4: Non natus voluptatem et soluta possimus.
H5: Qui consequatur quia et corporis expedita!
H6: sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
P: band-white-wrap regular link
Large: Quam nulla porttitor massa id.
Semi-large: Ultrices dui sapien eget mi.
Small: Eget magna fermentum iaculis eu non diam phasellus vestibulum.
White band with gold text:
White band with unigrey text:
H1: Lorem ipsum dolor sit amet
H2: Maecenas tempor nisl nec neque luctus
H3: Aut expedita necessitatibus et quia consequuntur?
H4: Non natus voluptatem et soluta possimus.
H5: Qui consequatur quia et corporis expedita!
H6: sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
P: band-white-wrap regular link
Large: Quam nulla porttitor massa id.
Semi-large: Ultrices dui sapien eget mi.
Small Eget magna fermentum iaculis eu non diam phasellus vestibulum.
Tint band with black text:
H1: Lorem ipsum dolor sit amet
H2: Maecenas tempor nisl nec neque luctus
H3: Aut expedita necessitatibus et quia consequuntur?
H4: Non natus voluptatem et soluta possimus.
H5: Qui consequatur quia et corporis expedita!
H6: sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
P: band-white-wrap regular link
Large: Quam nulla porttitor massa id.
Semi-large: Ultrices dui sapien eget mi.
Small: Eget magna fermentum iaculis eu non diam phasellus vestibulum.
Tint band with unigrey text:
H1: Lorem ipsum dolor sit amet
H2: Maecenas tempor nisl nec neque luctus
H3: Aut expedita necessitatibus et quia consequuntur?
H4: Non natus voluptatem et soluta possimus.
H5: Qui consequatur quia et corporis expedita!
H6: sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
P: band-white-wrap regular link
Large: Quam nulla porttitor massa id.
Semi-large: Ultrices dui sapien eget mi.
Small Eget magna fermentum iaculis eu non diam phasellus vestibulum.
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. The colour will take up the whole viewport but we still want the content to keep align with others.
Usage
The implementation of this style is not complex. What you need to do is to add a parent <div> with class band-[colour]-wrap to the container you are using. In other words, the band wrapper must be declared outside of the ANU grid styles.
Please note the "[colour]" here is not the actual class name. Its value can be white, tint and black which are difined in our colours page. i.e. band-black-wrap.
<div class="band-black-wrap">
<div class="container">
...content
</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-wrap, and inline with our digital brand listings of events should be displayed on band-tint-wrap (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).
Black band with white box:
H2 Maecenas tempor nisl nec neque luctus
Aut expedita necessitatibus et quia consequuntur?
Non natus voluptatem et soluta possimus.
Qui consequatur quia et corporis expedita!
Lorem ipsum dolor sit amet. Qui eius magni eum amet quod et aliquam molestiae ut laboriosam saepe ea enim alias. Rem pariatur architecto aut nesciunt doloremque ea quis totam est quia velit ab enim laborum.
band-black-wrap regular link
Black band with tint box:
H2 Maecenas tempor nisl nec neque luctus
Aut expedita necessitatibus et quia consequuntur?
Non natus voluptatem et soluta possimus.
Qui consequatur quia et corporis expedita!
Lorem ipsum dolor sit amet. Qui eius magni eum amet quod et aliquam molestiae ut laboriosam saepe ea enim alias. Rem pariatur architecto aut nesciunt doloremque ea quis totam est quia velit ab enim laborum.
band-black-wrap regular link
White band with tint box:
H2 Maecenas tempor nisl nec neque luctus
Aut expedita necessitatibus et quia consequuntur?
Non natus voluptatem et soluta possimus.
Qui consequatur quia et corporis expedita!
Lorem ipsum dolor sit amet. Qui eius magni eum amet quod et aliquam molestiae ut laboriosam saepe ea enim alias. Rem pariatur architecto aut nesciunt doloremque ea quis totam est quia velit ab enim laborum.
band-white-wrap regular link
White band with black box:
H2 Maecenas tempor nisl nec neque luctus
Aut expedita necessitatibus et quia consequuntur?
Non natus voluptatem et soluta possimus.
Qui consequatur quia et corporis expedita!
Lorem ipsum dolor sit amet. Qui eius magni eum amet quod et aliquam molestiae ut laboriosam saepe ea enim alias. Rem pariatur architecto aut nesciunt doloremque ea quis totam est quia velit ab enim laborum.
band-white-wrap regular link
Tint band with white box:
H2 Maecenas tempor nisl nec neque luctus
Aut expedita necessitatibus et quia consequuntur?
Non natus voluptatem et soluta possimus.
Qui consequatur quia et corporis expedita!
Lorem ipsum dolor sit amet. Qui eius magni eum amet quod et aliquam molestiae ut laboriosam saepe ea enim alias. Rem pariatur architecto aut nesciunt doloremque ea quis totam est quia velit ab enim laborum.
band-tint-wrap regular link
Tint band with black box:
H2 Maecenas tempor nisl nec neque luctus
Aut expedita necessitatibus et quia consequuntur?
Non natus voluptatem et soluta possimus.
Qui consequatur quia et corporis expedita!
Lorem ipsum dolor sit amet. Qui eius magni eum amet quod et aliquam molestiae ut laboriosam saepe ea enim alias. Rem pariatur architecto aut nesciunt doloremque ea quis totam est quia velit ab enim laborum.
band-tint-wrap regular link