Main Navigation


CSS Cheat Sheet


Hierarchical titles, universally applied colour rules and action buttons, consistent widths and spacing - especially for two column treatments, easily performed combinations, and full support for responsive content. These are the rules based in best-practice for our website CSS moving forward. This cheat-sheet should be used to help us as we move forward.

Headings and body text

Colour classes and bar treatments

Buttons

Borders, boxes and columns

Blockquotes and teasers

Images and video

Real world examples

Headings and body text

 

How to:

Just your usual standard heading + paragraph treatments, as follows:

<h1>A h1 heading</h1>
<p>Some paragraph text</p>

Heading one (h1) style with link

Paragraph following heading one with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.

Heading two (h2) style with link

Paragraph following heading two with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.

Heading three (h3) style with link

Paragraph following heading three with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.

How to:

But what about those times you need more space before your heading? There's now a universal way to apply that spacing, just by adding a single class:

<h3 class="spacer">A h3 heading with spacing above</h3>
<p>Some paragraph text</p>

Heading three (h3) style with a spacer above

Paragraph following heading three with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.

Heading four (h4) style with link

Paragraph following heading four with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.

Heading five (h5) style with link

Paragraph following heading five with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.

Heading six (h6) style with link

Paragraph following heading six with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.

Colour classes and bar treatments

 

How to:

With a simple addition of a class to your headings, boxes, buttons or other elements, you can use any of our universal colours. For example, on h3 headings:

<h3 class="red">A red h3 heading</h3>

<h3 class="silver">A silver h3 heading</h3>

You can use any of the colour names listed at left, plus "white".

Test of "black" class

Test of "red" class

Test of "orange" class

Test of "yellow" class

Test of "purple" class

Test of "cyan" class

Test of "green" class

Test of "teal" class

Test of "grey" class

Test of "silver" class

 

How to:

Adding a coloured "bar" also demonstrates how to use background colour classes in combination with normal colour classes, now universal and easily applied:

<h4 class="bar red-bg white">A h4 heading in white on a red background</h4>

Test of "bar / black-bg" class

Test of "bar / red-bg" class

Test of "bar / orange-bg" class

Test of "bar / yellow-bg" class

Test of "bar / purple-bg" class

Test of "bar / cyan-bg" class

Test of "bar / green-bg" class

Test of "bar / teal-bg" class

Test of "bar / grey-bg" class

Test of "bar / silver-bg" class

 

How to:

And in those times where a lighter variant of the colour is required for a background, just add the "light" class - and you'll probably want to ensure that you use the "black" class for the text to appear on it:

<h4 class="bar orange-bg light black">A h4 heading in white on a red background</h4>

Test of "bar / black-bg" class

Test of "bar / red-bg" class

Test of "bar / orange-bg" class

Test of "bar / yellow-bg" class

Test of "bar / purple-bg" class

Test of "bar / cyan-bg" class

Test of "bar / green-bg" class

Test of "bar / teal-bg" class

Test of "bar / grey-bg" class

 

How to:

Our previous additional bar styles also work with the new colourising system, but the method of calling them differs depending on the type of bar:

<h3 class="red-bg white bar"><a href="#" class="linkbar">A h3 bar with a red background, white text, and a link applied to the text with the class "linkbar"</a></h3>

<h3 class="rc-poptitle navy-bg silver"><a href="#" class="linkbar">A h3 poptitle bar with a navy background and silver text</a></h3>

Linkbar test

Linkbar test

 

Buttons

 

How to:

The "button" element should be used for clickable buttons on websites, and it has additional benefits since the advent of HTML5 for browsers. So now we've got one! It's compatible with the above colour combinations, calling the same classes. And it doesn't get any smaller than the minimum recommended touch size on mobile!

<button class="red-bg white">A button with a red background and white text</button>

 

Borders, boxes and columns

 

How to:

We've now got columns for sitting two elements next to each other that then degrade gracefully into single columns on mobiles. The "box" class is useful for framing content in it's own distinct box, either with a background colour or with a border. Borders are as easy to apply to content as background colours, all done with a class.

<div class="box silver-bg black">A generic box div with silver background and black text inside.</div>

<div class="box red-border red">A red-bordered box with red text inside.</div>

<div class="box red-border thick-border rounded navy">A thick, rounded border in red on a box with navy text inside.</div>

<div class="col-wrapper"><div class="col-1">A left column without any boxing or bordering.</div>
<div class="col-2">A right column with a box div, with a thick, cyan, rounded border, on a navy background with white text.</div>
</div>

A generic box div with silver background and black text inside.

A red-bordered box with red text inside.

A left column without any boxing or bordering. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper.

 

Floating widgets with varying priority levels

How to:

By default, text content is designed to occupy a maximum width of 445px on desktops. This allows the space at right to be used for widgets. But what happens when it's viewed on a mobile device? Do you want the widget to be above or below the text content? It's all about ordering it logically in your HTML. What is coded first appears first. Here's how you do either:

<div class="with-widget">This is where you'll put the content to sit at left of the widget on desktops, when you want it to appear ABOVE the widget on mobile</div>
<div class="widget">The content to go in the widget, that will appear BELOW the accompanying text on mobile.</div>

<div class="widget">The content to go in the widget, to still remain at right on desktops, but to sit ABOVE the accompanying content on mobiles.</div>
<div class="with-widget">This is where you'll put the content to sit at left of the widget on desktops, when you want it to appear BELOW the widget on mobile.</div>

When widget is secondary priority

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

When widget is first priority

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.

 

Blockquotes and teasers

 

How to:

We've now also got beautiful blockquotes to work with, thanks to Zero Seven and some additional tweaks we've made! They work with all of the previously mentioned colour combinations and border treatments, and even utilise transparency for the block quotes. Additionally, there's a "teaser" class for getting them (and other elements) to float to one side or another.

<blockquote class="silver-bg red-border thick-border rounded navy">A blockquote with silver background, thick, rounded red border and navy text.</blockquote>

<div class="teaser"><blockquote>A blockquote that floats left as a teaser.</blockquote></div>

<div class="teaser teaser-right"><blockquote>A blockquote that floats right as a teaser.</blockquote></div>
Undeclared blockquote text with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Undeclared blockquote text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper.
Undeclared blockquote text with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Undeclared blockquote text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper.
Undeclared blockquote text with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Undeclared blockquote text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper.
Undeclared blockquote text with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Undeclared blockquote text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper.

Paragraph following blockquote with link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.

 

Images and videos

 

How to:

Images are now a lot easier - for a default image to work responsively in full-width, no hard-coding of dimensions is required. On the full-width template, you just need to ensure the <p> tags are removed from around the image to ensure it goes full width. A simple "centre" class will centre align images and text. And there's also "textwrap-left" and "textwrap-right" classes. In the full-width template, you'll just want to make sure it's wrapped within the <p> tags you're trying to wrap it with. Video embeds are easy, you just need to wrap them in an "embed-container" div. And audio embeds actually just work really nicely with all the above column and box treatments.

<img src="..." /> - the super-easy way to place an image.

<img src="..." class="centre" /> - how to centre an image on the page (or text, for that matter).

<p><img src="..." class="textwrap-left">Paragraph text...</p> - how to wrap an image left.

<p><img src="..." class="textwrap-right">Paragraph text...</p> - how to wrap an image right.

<div class="embed-container"><iframe ...></iframe></div> - how to embed a responsive video.

<div class="box silver-bg black">
<div class="col-wrapper">
<div class="col-1"><h3>Heading</h3><p>Paragraph text...</p></div>
<div class="col-2"><iframe ...></iframe></div>
</div>
</div> - how you might embed an audio file with a title and description in a box 
A large, unformatted image.

 

A smaller, centred image.

 

An image with "textwrap-left" class applied. Michael Legge was elected as President of Australian Red Cross at the Annual General Meeting, in December 2011, having served as Deputy President for the seven years prior. Michael has a long and distinguished involvement with Red Cross and his leadership appointments are numerous.

An image with "textwrap-right" class applied. Michael Legge was elected as President of Australian Red Cross at the Annual General Meeting, in December 2011, having served as Deputy President for the seven years prior. Michael has a long and distinguished involvement with Red Cross and his leadership appointments are numerous.

A week of terror and inadequacy

This week we look at your very first mission as an aid worker: whether it's Pakistan after an earthquake, a refugee camp in South Sudan or a tiny Tongan island. We reflect on how expectation differs from reality and how you see the world afterwards.

 

Forms

 




For more details on how we use your email address please read our privacy statement.
* required field

 

Real world examples

 

Donation boxes

 

Give once

Your donation online, will help provide vital programs and services to the most vulnerable people »

Give monthly

For just $1 a day you can help people around Australia, around our region, around the clock »

Leave a gift in your Will to Red Cross

A powerful commitment that will change the future, for the better, for generations to come »

 

Shops layout

 

Red Cross Shops

Step inside our new-look shops, find a shop near you, learn about donating and volunteering.

Shop online

Step inside our new-look shops, find a shop near you, learn about donating and volunteering.

 

New RFR module

Currently being briefed with Zero Seven.

Emergency Information

For people affected by the [disaster title]. Register to let family and friends know you're OK. Find family and friends who have registered.


 

Update to floating boxes for responsive

When widget is secondary priority

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

When widget is first priority

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna vitae ante porta ullamcorper. Quisque ac metus vitae orci lacinia porta et vitae ligula. Cras ut metus tempus, vestibulum ex feugiat, porta lorem. Vivamus.