Style Guide

Colours

Yellow

#FBE600

OffWhite

#F9F9F9

Light Grey

#C9C8C8

Medium Grey

#898C8D

Dark Grey

#24282A

Light Green

#89C540

Medium Green

#4E9D45

Teal

#009483

Forest Green

#1D5732

Light Orange

#F6A81C

Cadmium

#F26724

Red

#E91D2D

Magenta

#9F237E

Lavender

#804D9F

Dark Violet

#492366

Cyan

#00B3E2

Cobalt

#2374BB

Ultramarine

#1B449C

Navy

#21285C

Buttons

Primary Primary
Secondary
Secondary
Inactive

Forms

Gravity Forms Documentation

Inputs

Text Input

Text Input: Error State

Text Input: Inactive

Submit Button

Input Group: Inactive

Tags

Category

Category

Category

Category

Category

Category

Cards

Horizontal Card With Image

Category

Card Title

Card Subtitle

Card Detail

Horizontal Card With Missing Image

Category

Card Title

Card Subtitle

Horizontal Card With No Image

Category

Card Title

Card Subtitle

Horizontal Card: (Large) Text Only

Ken Spencer Science Park

Horizontal Card: (Small) Text Only

Ken Spencer Science Park

Vertical Card

Content Types

Date & Time

Default format: Thursday, September 26, 2019 12:30pm

Wordpress format string: "l, F j, Y g:ia"

Creating a Content Navigator

In the Gutenberg editor, beginning by clicking the + symbol and adding a Content Navigator block.

Tidbits

Tidbits are additional bits of related content that can be added to supplement the main content. They initially appear as small yellow circles which fade in and out of view as they scroll up/down through the window. These small yellow circles occasionally pulse to indicate they are interactive, and that pulse increases in frequency as they are hovered over. Once a tidbit is clicked, it expands to the show the title and text, as well as the name and photo of the staff member adding the tidbit. Multiple tidbits can be added to a page, but they work best when used sparingly and in between two sections of text content. Scroll down the page to view a tidbit in action and/or edit this page to view how a tidbit looks in the backend.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Test Form

  • :
  • Date Format: MM slash DD slash YYYY