Styles page

This is a sub-header. It's a larger paragraph. It's all you can have just now, as it's not a visual editor field - but it could be changed if we want more than just text!

What do I need to know about the basic site styles?

The light blue has been replaced with #0079AD as this will pass AA accessibility. This was chosen on the testing tool, by darkening the brand blue untill it passed on a white background.

Multiple paragraphs will be common, and the spacing matters.

What does skin cancer look like?

I'm adding some bolded text here, and some italicised copy also. 

There are three main types of skin cancer. This most serious is melanoma.

Melanoma (heading level 3)

Cancer

Like all body tissues our skin is made up of cells: basal cells, squamous cells and melanocytes.

  • A = asymmetry, look for spots that are asymmetrial not round
  • B = border, looks for spots with uneven borders
  • C = colour, look for spots with an unusual or uneven colour
    • 1 - look hard
    • 2 - look really hard
    • 3 - get someone to look for you
  • D = diameter, look for spots that are larger than 7mm

Some more paragraph text might go here. Here's a link. Some more paragraph text might go here. Some more paragraph text might go here. Some more paragraph text might go here. Some more paragraph text might go here. Some more paragraph text might go here. Some more paragraph text might go here. 

Heading level 4 looks like this

You'd normally have paragraphs between headings, or some kind of content so here it is. Just so we can show heading levels 5 and 6.

Heading level 5 looks like this

You'd normally have paragraphs between headings, or some kind of content so here it is. Just so we can show heading levels 5 and 6.

Heading level 6 looks like this

You'd normally have paragraphs between headings, or some kind of content so here it is. Just so we can show heading levels 5 and 6.

And even more paragraph text could go here. And even more paragraph text could go here. 

  1. Staples, Elwood M, Burton
  2. Aussie Bureau of Stats.
  3. Something else

A last tiny bit of text.

This is a blockquote. Skin cancer mostly appears as a new and unusual looking spot. It may also appear as an existing spot that has changed colour, size  or shape.

A tad more text is likely here and there.

Button styles

Primary buttons - application button class:

Primary button

Secondary buttons - secondary button class:

Secondary button

A white button needs class "whiteButton":

Button

And a green button: "greenButton":

This is a green button, and quite a long one at that

Default table style

Training type Summary Time Cost
Standard UV Safety Training Session

A focus on UV as an OHS hazard, UV risk assessment and reduction, skin cancer prevention and early detection.

Resources for employers and workers are provided.

60 minutes $550 (+ $50 for each additinal half hour)
Standard UV Safety Training Session

A focus on UV as an OHS hazard, UV risk assessment and reduction, skin cancer prevention and early detection.

60 minutes $550 (+ $50 for each additinal half hour)

Colours used

  • Brand dark blue: #0F1E64
  • Brand light blue (adjusted for accessibility): #0079AD
  • Text/copy grey: #717074
  • Grey lines: #e0e0e1
  • Lighter grey lines: #f0f0f0
  • Seconday button background grey: #eee
  • Orange (blockquote border): #fe9b37
  • Footer background: #f5f5f5
  • Footer copy: #4c4c4c

Links and downloads

Format Size
This is a summary for the attachment.
- -
This is a real attachment, I'm just using it for testing. This is a real attachment, I'm just using it for testing. This is a real attachment, I'm just using it for testing.
.pdf 33 Kb
.pdf 333 Kb
.doc 787 Kb
Summary copy for the style guide. This will tell us a little about the subject matter of the page.
Learn more: Styles page
Special content elements
A guide to special elements, how they look and how to add them.
Learn more: Special content elements
News & stories
Read news and stories from SunSmart
Learn more: News & stories
Resource widget testing
Just a place to test the resource widget.
Learn more: Resource widget testing
Form styles
To display the different form elements and how they're styled.
Learn more: Form styles

Without thumbnails

Summary copy for the style guide. This will tell us a little about the subject matter of the page.
Learn more: Styles page
A guide to special elements, how they look and how to add them.
Learn more: Special content elements
Read news and stories from SunSmart
Learn more: News & stories
Just a place to test the resource widget.
Learn more: Resource widget testing
To display the different form elements and how they're styled.
Learn more: Form styles

Without read more

Summary copy for the style guide. This will tell us a little about the subject matter of the page.
A guide to special elements, how they look and how to add them.
Read news and stories from SunSmart
Just a place to test the resource widget.
To display the different form elements and how they're styled.
Back to top