promoting the sustainable and responsible use of cobalt in all forms

Styles

Colours

dark blue #051d90 steel blue #0a4a9c midnight blue #211db9 corn blue #188bee mid blue #33aefa lilac blue #7c73d4 light slate gray #a2a1bd light steel blue #cac9d3

Headings

h1. This is a very large header - only used for the page heading.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content. You can make it bold! You can also italicize your words. The colour is #474747.


Superscript and subscript

Normal text superscript subscript

Links

Links are preset to the primary colour.

Accordion

Buttons

Tiny button

Small button

Large button

Expanded button

One Two Three

Callouts

This is a callout.

It can have headings and several paragraphs.

And links

This is a secondary callout.

It can have headings and several paragraphs.

And links

This is a success callout.
This is a warning callout.
This is a alert callout.

Responsive Tables

Responsive table - scrollable on mobile

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Responsive table - stacked on mobile

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Tabs

one

Check me out! I'm a super cool Tab panel with text content!

two

three

Check me out! I'm a super cool Tab panel with text content!

four

five

Check me out! I'm a super cool Tab panel with text content!

six

Dividers


Bullets - unordered list

Bullets - ordered list

  1. Cheese (essential)
  2. Pepperoni
  3. Bacon
    1. Normal bacon
    2. Canadian bacon
  4. Sausage
  5. Onions
  6. Mushrooms

Blockquote

Those people who think they know everything are a great annoyance to those of us who do. Isaac Asimov

Images

Banner images

Use a free online photo editing tool like:

Resize dimensions to 2,000px wide by 450px high

Optimise images (reduce quality) for web before uploading - this will reduce filesize.

Banner images should be uploaded to the directory: assets/images/banners

The default images are:


News/Home News images

Resize and crop to square image 380px high x 380px high.

The image appears on both the sidebar of the News article and as a background on the Home page grid. Make sure the image has enough colour (ie does not have too much white on it) so that the white text on the Home page has enough contrast.

The specified web pages that appear on the Home page grid use a portion of that page's existing banner image.

Images should be uploaded to the directory: assets/images/news


Contact images

Resize and crop to square image 300px high x 300px wide.

Images should be uploaded to the directory: assets/images/contacts


On page images

On page images have been uploaded to the directory: assets/images/uploads

Full width - no caption at side

For an image, like a graph, you may want it to extend the full width, rather than have a caption at the side. Resize images like this to 800px. Insert image on the page using the 'insert image' icon. When you Edit the image to add the ALT tag, do not add anything in the Caption field.

With caption at side

Resize image to 500px wide. No specific height - as an example, the ones below are 350px high

If there are several images on a page, make sure they are all the same height! The site has been coded to alternate the image/caption for up to 4 images on one page.

Image is then inserted on the page using the 'insert image' icon and Edited to add Caption and ALT tag


Always put some ALT text in here for screen readers
Image width is 500px. Add a caption to the image here.
Always put some ALT text in here for screen readers
The second image alternates the caption to the left and changes background colour.
Always put some ALT text in here for screen readers
The third image alternates the caption to the right and changes background colour..
Always put some ALT text in here for screen readers
The fourth image alternates the caption to the left and changes background colour.