primary and secondary colours

Primary colours

Please reference the image below on GBC's primary colours.

Secondary colours

Please reference the image below for GBC secondary colours for usage in GBC content.

Headings

H1 Heading Style

Oswald, Medium, All Caps, 38px, #000000

The H1 is the title of the page. For most content types, this is powered by the Marketing Title field. Only one H1 Heading should be used per page.

Content Types that do not use the Marketing Title field: Bios, Programs

H2 Heading Style

Oswald, Medium, All Caps, 26px, #000000
Displays at 2.4em on Landing/Campaign pages

H3 Heading Style

Open Sans, Semibold, 20px, #000000
Displays at 2.2em on Landing/Campaign pages

H4 Heading Style

Open Sans, Regular, All Caps 18px, #303030

H5 Heading Style

Oswald, Medium, 17px, #303030

H6 Heading Style

Open Sans, Semibold, 16px, #303030

Paragraph Styles

Body Copy

Open Sans, Regular, 16px, #303030

Body Copy - Bold

Bold should be used sparingly for emphasis

Open Sans, Bold, 16px, #303030

Body Copy - Italics

Italics should be used sparingly for emphasis

Open Sans, Italic, 16px, #303030

Body Copy - Link Text

Open Sans, Bold, 16px, #005AA5
On hover: Underline
Visited: #734D99

Inline Styles

Teaser Title

Open Sans, Regular, 20px, #303030
class="teaser-title"

Used on the lead sentence or paragraph of a page, where appropriate.

Small Type

Open Sans, Regular, 13px, #303030
class="small-type"

Used for footnotes and other supplementary text.

Blue background

class="background-color blue"

Multiple paragraphs can be displayed in a block by wrapping the in a div and applying this class.

Grey background

class="background-color grey"

Multiple paragraphs can be displayed in a block by wrapping the in a div and applying this class.

Blockquote is a way of highlighting a quote from a person. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Attribution

Open Sans, Regular, 21px, #303030
Attribution: Small Type

Blockquotes should not be wrapped in double quotes, and should always have an attribution.

Lists

Unordered List

• Centre for Arts, Design & Information Technology.
  • Design
  • Fashion & Jewelry
  • Media & Performing art
    • Theatre
    • Dance
    • Media

Ordered List

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   1. hello
      1. goodbye
2. Sed in eros eu nulla imperdiet tempor.
3. Quisque dictum lacus sit amet libero dapibus, rutrum ullamcorper mi feugiat.

Nested Ordered and Unordered Lists

1. Centre for Arts, Design & Information Technology.
   • Design
   • Fashion & Jewelry
   • Media & Performing Arts
     1. Theatre
     2. Dance
     3. Media

List with Checklist icon

class="checkmark-ol"

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Sed in eros eu nulla imperdiet tempor.
3. Quisque dictum lacus sit amet libero dapibus, rutrum ullamcorper mi feugiat.

Two-column Unordered List

class="two-col-ul"

The break in the list cannot be controlled and will produce different results at different breakpoints.

• Blockchain Development (T175)
• Computer Programmer Analyst (T127)
• Computer Programming and Analysis (T177)
• Computer Systems Technician (T141)
• Computer Systems Technology (T147)
• Cyber Security (Postgraduate) (T433)
• Game – Programming (T163)
• Health Informatics (Postgraduate) (T402)
• Information Systems Business Analysis (with experiential learning capstone) (T405)
• Mobile Application Development and Strategy (T430)
• Network and System Security Analysis (Postgraduate) (T413)
• Wireless Networking (Postgraduate) (T411)

Buttons

Primary button Secondary button

New button colours

Primary

Secondary

Tertiary

Tables