This style guide is meant to help our content community create and maintain a consistent BCIT web experience for our audience and site visitors. Here you’ll find details about design components such as typography, colours, and padding. You’ll find many examples of the various components that make up our website design (for example, templates, panels, and link treatments). Use this site to see a specific panel in use, see what types of questions you can use in a form, or see examples of different image alignment and sizing choices.
Find comprehensive information on editing and publishing web content in the Public Web WordPress Knowledge Base (KB).
Find detailed standards on writing style issues such as spelling, punctuation, and grammar in the BCIT Writing Style Guide (login required).
This page shows all samples of the following elements:
- Colour palette
- Paragraph text, anchors, links
- Separator
- Buttons
- Embeds
- Headings
- Overlines (taglines)
- Lists
- Media
- Quotes
- Tables
Colours
Color Palette
Brand colours
BCIT blue – #003c71
BCIT yellow – #fff400
Accent colours
Purple – #602aa9
Turquoise – #00a69d
Functional greys
Light grey – #f8f9fa
Grey – #f2f2f2f2
Alt grey – #d3dcdc
Neutral grey – #767676
Dark grey – #5a5a5a
Functional blues
Medium blue – #0055ce
Primarily used for hover and rollover states
Bright blue – #0069ff
Primarily used for buttons and links
Overlays
#303038 – 50% opacity
Dark overlay, Mid opacity
#001222 – 60% opacity
Paragraph text treatments
Basic link text treatment.
Bold and italic text treatments.
Anchors
Featured Program:
Forest and Natural Areas Management
Separator
Buttons
Button Primary
Button Alt
Overline Small
Button text
Overline Small
Button text
Overline Small
Button text
The following button is the large + split style without an overline added. This serves as a fallback. A note has been added to the panel to guide the user to either have overlines for both buttons or no overlines for both buttons.
No Overline
NOTE: this is a fallback.
Embeds
H1 is Display. Lorem ipsum dolor sit amet
P is Body facilisis suscipit vestibulum. This is link text. Duis nulla velit, vehicula eget viverra non, tristique ut turpis. Eu convallis ligula rutrum a. Maecenas id sollicitudin tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra sagittis diam at ullamcorper.
H2 is Headline Large. Lorem ipsum dolor sit amet
Morbi consequat tempor est. Nullam rutrum sem ut gravida aliquam. Aenean pharetra dolor non sapien mollis rhoncus. In hac habitasse platea dictumst. Etiam ullamcorper eget est vitae dictum. Integer consectetur sed enim et viverra.
H3 is Headline. Lorem ipsum dolor sit amet
Morbi consequat tempor est. Nullam rutrum sem ut gravida aliquam. Aenean pharetra dolor non sapien mollis rhoncus. In hac habitasse platea dictumst. Etiam ullamcorper eget est vitae dictum. Integer consectetur sed enim et viverra.
H4 is Title Large. Lorem ipsum dolor sit amet
Morbi consequat tempor est. Nullam rutrum sem ut gravida aliquam. Aenean pharetra dolor non sapien mollis rhoncus. In hac habitasse platea dictumst. Etiam ullamcorper eget est vitae dictum. Integer consectetur sed enim et viverra.
Title with Overline + Line (Panel Title)
Title with Overline + Line (Panel Title)
Lists
Bulleted (unordered) list:
- Lorem ipsum dolor sit amet
- Aliquam eu elit in mi sagittis lacini
- Nam id odio nec dolor
- Mauris sit amet odio a nisl venenatis consectetur
Morbi consequat tempor est. Nullam rutrum sem ut gravida aliquam. Aenean pharetra dolor non sapien mollis rhoncus.
Numbered (ordered) list:
- Lorem ipsum dolor sit amet
- Aliquam eu elit in mi sagittis lacini
- Nam id odio nec dolor
- Mauris sit amet odio a nisl venenatis consectetur
Morbi consequat tempor est. Nullam rutrum sem ut gravida aliquam. Aenean pharetra dolor non sapien mollis rhoncus. In hac habitasse platea dictumst. Etiam ullamcorper eget est vitae dictum. Integer consectetur sed enim et viverra.
Quotes
Use blockquotes sparingly to call attention to important and impactful quotes.
“One must still have chaos in oneself to be able to give birth to a dancing star.”Friedrich Nietzsche, Thus Spoke Zarathustra
In hac habitasse platea dictumst. Etiam ullamcorper eget est vitae dictum. Integer consectetur sed enim et viverra. Suspendisse dapibus mi eu velit sagittis, sit amet hendrerit nibh pretium. Curabitur sed facilisis ante.
I took a deep breath and listened to the old bray of my heart. I am. I am. I am.Sylvia Plath, The Bell Jar
Media
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu elit in mi sagittis lacinia. Nam id odio nec dolor cursus vulputate nec in urna. posuere vel mauris et aliquam. Ut feugiat non tellus at faucibus. Mauris sit amet odio a nisl venenatis consectetur vel ut lorem.
Aliquam blandit et odio ut porttitor. Aenean a ipsum maximus dui scelerisque dictum. Sed tristique gravida dui, vel rutrum enim lacinia in. Pellentesque consectetur est urna, a venenatis nibh pretium a. Nullam est lacus, molestie id rutrum ultrices, tincidunt ac leo. Morbi consequat tempor est. Nullam rutrum sem ut gravida aliquam. Aenean pharetra hac habitasse platea dictumst. Etiam ullamcorper eget est vitae dictum. Integer consectetur sed enim et viverra.
Dolor non sapien mollis rhoncus. In hac habitasse platea dictumst. Etiam ullamcorper eget est vitae dictum. Integer consectetur sed enim et viverra. velit sagittis, sit amet hendrerit nibh pretium. Curabitur sed facilisis ante. Duis consequat velit diam.
Aliquam blandit et odio ut porttitor. Aenean a ipsum maximus dui scelerisque dictum. Sed tristique gravida dui, vel rutrum enim lacinia in. Pellentesque consectetur est urna, a venenatis nibh pretium a.
Nullam est lacus, molestie id rutrum ultrices, tincidunt ac leo. Morbi consequat tempor est. Nullam rutrum sem ut gravida aliquam. ullamcorper eget est vitae dictum. Integer consectetur sed enim et viverra. velit sagittis, sit amet hendrerit nibh pretium. Curabitur sed facilisis ante. Duis consequat velit diam. In hac habitasse platea dictumst. Etiam ullamcorper eget est vitae dictum. Integer consectetur sed enim et viverra. Suspendisse dapibus mi eu velit sagittis, sit amet hendrerit nibh pretium. Curabitur sed facilisis ante. Integer consectetur sed enim et viverra. Suspendisse dapibus mieu velit sagittis, sit amet hendrerit nibh pretium. Curabitur sed facilisis ante. Integer consectetur sed enim et viverra.
Tables
| Table Heading One | Table Heading Two | Table Heading Three |
|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu elit in mi. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu elit in mi. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu elit in mi. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu elit in mi. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu elit in mi. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu elit in mi. |