Style Guide

This is our style guide. Or at least it will be, when I get round to writing it. For now though, there the different text and button styles on our site.

Headings

This is Heading 1

h1 is usued sparingly, usually just for the title of a given page.

This is Heading 2

h2 is the main heading style used for sections of a page. Heading’s in this style are shown in the contents card, which is the thing to the left of this.

This is Heading 3

We’re using h3 for sub-sections. These also show in the contents card.

This is Heading 4

It’s pink! This isn’t shown in the contents card. It’s actually not always puink — pages on this side can have an overriding tint-colour, which isn’t in effect on this page, but you’ll notice on some pages, the site logo and other elements on the page change colour to match the tint of that page.

Heading 5

This one is spare and left over, we’re not really using it for anything yet, so it just gets to be super tiny for now.

Heading 6

This is just getting silly, so i’ve made it super silly small.

Quotes

“This is a blockquote, it surely contains some very profound and important text.”

“Here’s another quote of equal importance”.

The webmaster

Code

here's a code block, incase we want to, i dunno, share some code? We're a tech union after all.

Buttons

We’re got lots of style of buttons for different things.

This is a regular button, used for navigation.

Regular Button

This is globe button, used for links to other sites.

🌐︎This is a globe button

This is a next button, for when you need to go to the next thing.

→This button goes over there

This is a document button, for opening up docuemnts, documentation, files, whatever.

▤Click me I'm a button

This is a download button, for downloading documents.

↓Webmaster's P45

This is an edit button, for filling out forms, maybe?

✎Fill out a form

Partials

Below are some reusable blocks that will appear around the site:

• Join Block
• About Block
• FAQ Block
• Education Block
• Related Block