Style Guide

General

 

Getting Started

Heading 1 : 80px

Heading 2 : 80px

Heading 3 : 60px

Heading 4 : 40px

Heading 5: 30px
Heading 6: 25px

Fonts

Heading Font: Freight Display Pro

Paragraph font: Avenir Ne

Paragraph

Lorem ipsum dolor sit amet molestie cursus aliquet. Placerat bibendum fringilla torquent rhoncus nisi vitae aliquam felis maximus suscipit.

Interdum at magnis augue condimentum auctor ante. Non netus euismod purus finibus dui.

416-488-1125 ext. 4411

Sample Text

This is example of a leading paragraphlorem ipsum dolor est sit tiempo ad astra nollum tiempo. Ad nollum lorem ipsum dolor est sit ad astra tiempo argum.

Social Icons

class: site-social-primary

instagramlinkedinyoutubetiktok

class: site-social-secondary

class: site-social-white

Block Quotes

Nulla quis nibh a enim lobortis gravida et et orci. Praesent quis hendrerit nulla. Cras convallis ac risus non elementum. Sed ligula nisl, luctus a ornare eget, elementum ultrices justo.

CITATION

Nulla quis nibh a enim lobortis gravida et et orci. Praesent quis hendrerit nulla. Cras convallis ac risus non elementum. Sed ligula nisl, luctus a ornare eget, elementum ultrices justo.

Citation

Table Class: custom-blockquote-left-quote

Vitae volutpat molestie amet faucibus risus neque ut mi a. In ultrices lacus elit fermentum. Malesuada dolor quis ut quis erat rutrum semper.

CITATION
UNIVERSITY OF TORONTO

Table Class: custom-blockquote-simple

Vitae volutpat molestie amet faucibus risus neque ut mi a. In ultrices lacus elit fermentum. Malesuada dolor quis ut quis erat rutrum semper.

CITATION UNIVERSITY OF TORONTO

Table Class: custom-blockquote-simple-quote-icon-both

Vitae volutpat molestie amet faucibus risus neque ut mi a. In ultrices lacus elit fermentum. Malesuada dolor quis ut quis erat rutrum semper.

CITATION UNIVERSITY OF TORONTO

Table Class: custom-blockquote-simple-quote-icon-start

Vitae volutpat molestie amet faucibus risus neque ut mi a. In ultrices lacus elit fermentum. Malesuada dolor quis ut quis erat rutrum semper.

CITATION UNIVERSITY OF TORONTO

Table Class: custom-blockquote-simple-border

Vitae volutpat molestie amet faucibus risus neque ut mi a. In ultrices lacus elit fermentum. Malesuada dolor quis ut quis erat rutrum semper.

CITATION UNIVERSITY OF TORONTO

 

Table Class: custom-blockquote-primary

Nulla quis nibh a enim lobortis gravida et et orci. Praesent quis hendrerit nulla. Cras convallis ac risus non elementum. Sed ligula nisl, luctus a ornare eget, elementum ultrices justo.

CITATION
UNIVERSITY OF TORONTO

 

Table Class: custom-blockquote-primary-no-icon

Nulla quis nibh a enim lobortis gravida et et orci. Praesent quis hendrerit nulla. Cras convallis ac risus non elementum. Sed ligula nisl, luctus a ornare eget, elementum ultrices justo.

CITATION
UNIVERSITY OF TORONTO

Colors

  • Primary (main color): #003087
  • Secondary:#F8D522
  • Body: #FFFFFF
  • Text (Default text color): #313131

Ordered List

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Unordered List

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buttons

site-button-primary

site-button-primary-crest

site-button-primary-link

site-button-white-crest

site-button-white-link

site-button-border-white-crest

site-button-border-white-link

site-button-secondary

site-button-border-white

SITE-BUTTON-WHITE

site-button-border-primary

site-button-border-secondary

site-button-full-primary

site-button-full-secondary

SITE-BUTTON-FULL-WHITE

 

Dynamic Modal Buttons

Youtube Video

Vimeo Video

Normal Video

Page Popup

Gallery Options

Number of thumbnails to show on desktop:
Clases: site-thumbnail-dt-1 site-thumbnail-dt-6 (variation of 1 to 6)

Number of thumbnail to show on Mobile:
Clases: site-thumbnail-mob-1 site-thumbnail-mob-6 (variation of 1 to 6)

Hides the pop up image in a pop up slideshow gallery
Class: custom-hide-pop-image

Grid

  • Clear grid (both) - site-clear-grid
  • Clear right- site-clear-left
  • Clear left- site-clear-right
  • New row in grid - site-row
  • Right block - site-right-block

Row Spacing:

  • no top/bottom row spacing - site-row-block-no-spacing
  • no bottom row spacing - site-row-block-no-bottom-spacing
  • enable row bottom spacing - site-row-block-bottom-spacing

Row Alignment / Visuals:

  • Full width - site-row-block-fullwidth
  • Light Background - site-row-block-colour-light

Row Fuctionality:

  • Overlay Content (used on a text featrue that comes after a gallery) - site-row-block-overlay-content
  • Delay the slide-in animation of the overlay row (added after the above class) - custom-delay-slide-in
  • Reduces the top spacing inside the pinned Overlay Content - custom-less-block-padding

Components

Page Classes
  • Class: custom-has-toggles
  • Description: Enables header division toggle buttons.

    When switching to a division, it will find the current page of the switched division, for example when switching to "prep" (Current page: /academics, switching to: /academics-prep) the base url of a page must match across divisions.

    It will find features from /academics on the /academics-prep that have the class "custom-prep" and it will load those versions into the current page.
    So if /academics has custom-hero-gallery, and /academics-prep has  "custom-hero-gallery custom-prep" it will fetch that feature into the current page.
 OptimizedImage,,,Optimized
Gallery Features
  • Feature Name: custom-hero-gallery
  • Collection: Hero gallery
  • Class: custom-hero-gallery
  • Optional Classes: 
    custom-high-low
    - Staggers the caption and additional content so that one is higher than the other.
    custom-image-horizontal-mb-{5-100}
    - Changes the horizontal alignment of the background image at mobile (lower = left, higher = right), you can use intervals of 5 such as: custom-image-horizontal-mb-25
  • GO TO SETTINGS
 OptimizedImage,,,Optimized

 

  • Feature Name: custom-entry-points
  • Collection: Entry points gallery
  • Class: custom-entry-points
  • GO TO SETTINGS
 OptimizedImage,,,Optimized

 

  • Feature Name: Animated Gallery
  • Collection: Animated Gallery
  • Class: custom-animated-gallery
  • Description: 
    First slide:     Animated intro background/caption.
    Slides between the first and last: Images that are shown/hidden when clicking the buttons in the last slide.
    Last slide: The content added here is displayed and linked to the slides in the same order in which the slides appear.
    Cutout images can be added in the description of this slide with a class that is relative to the slide its related to, if you have 3 slides between the first and last slides and the second of the three slides has a cut out, you provide the class "custom-cutout-2" to the image.
  • GO TO SETTINGS
 OptimizedImage,,,Optimized

 

  • Feature Name: Double content gallery 
  • Collection: Double content gallery 
  • Class: custom-double-content-gallery 
  • GO TO SETTINGS
 OptimizedImage,,,Optimized 

  

  • Feature Name: Custom Division Gallery
  • Collection: Custom Division Gallery
  • Class: custom-division-gallery
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
 

 
Display Features
  • Feature Name: custom-display
  • Collection: display
  • Class: custom-display-wrapper
  • GO TO SETTINGS
 OptimizedImage,,,Optimized

Class: custom-display-featured
Description: The same as custom-display, but without the grouped items on the right side.

Class: custom-news-display
Description: Styles a display with square images, smaller primary color titles and truncated descriptions

Class: custom-date-formatted
Description: This is format dates in display features to MM/DD/YY
Text Features
  • Feature Name: custom-journey-table
  • Collection: journey table
  • Class: custom-journey-table
  • GO TO SETTINGS
 OptimizedImage,,,Optimized

 

  • Feature Name: custom-experience-table
  • Collection: custom-experience-table
  • Class: custom-experience-table
  • GO TO SETTINGS
 OptimizedImage,,,Optimized

   

  • Feature Name: custom-journey-steps-table
  • Collection: custom-journey-steps-table
  • Class: custom-journey-steps-table
  • Create one table per year group from the "custom-experience-table" and make sure the title from the groups link matches the id of the table.
    (year 1 &  2 > custom-year-1-2) with the "custom" prefix before it.
    (do not include "&" in the id).
    The return button can have any button style class and text, but must have the class "custom-journey-return".
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
Other Feature Classes
  • Class: custom-caption-reveal
  • Description: On mobile set hero gallery to pin and reveal caption on scroll
  • Class: video-popup-button
  • Description: Ideally you would only use this popup class on a button.
  • Class: custom-popup
  • Description: This is more universal and can be used to popup the link of a video or a page, this could be used on a button, or a link slide show gallery.
  • Class: custom-bottom-mob
  • Description: will move a feature to the bottom of the parent container it is inside (useful for sidebar features)
  • Class (image): custom-has-caption
  • Description: Creates a visual caption of the title (Advisory Title) thats added to the image adjacent to it
  • Class (image): custom-has-overlay-caption
  • Description: Creates a visual caption of the title (Advisory Title) thats added to the image overlaid onto it
  • Class: custom-gradient-5
  • Description: Applies a different intensity of gradient to the feature, use increments of 5 (0-100) The higher the darker the
    example: custom-gradient-45 
  • Class: custom-hide-hover
  • Description: when allied to a thumbnail gallery will hide the hover data and allow clicking the entire card
  • Class: custom-logo
  • Optional class: custom-show-mob
  • Description: custom-show-mob shows the image at mobile.
  • Class: custom-multi-gallery
  • Description: overrides the 450px height at mobile and default spacings.
  • Class: custom-thumbnail-gallery
  • Description: original style for the popup
  • Image focus to change the horizontal position of the image, can be applied to the feature or individual slides.
  • custom-image-focus-{pos}, custom-image-focus-{pos}-tab, custom-image-focus-{pos}-mob
  • Positions: 10-90 (percentage horizontal focus, e.g. custom-image-focus-30 = 30% from left)
    custom-image-focus-10
    custom-image-focus-20-tab
    custom-image-focus-30-mob

 

  • Heading Crests (table class):
  • custom-heading-icon
  • custom-heading-icon-outline

 

 
Footer Features

Adding this to a paragraph within a text feature will keep the year up to date with the current year, regardless of the year typed into the span.
<span id="current-year">2022</span>

Example (set to 2022): 2022

Table Widths

50% 50%
33% 33% 33%

Table with the same width columns

Class: site-table-same-width

Heading 1 Heading 2 Heading 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Responsive table in mobile

Class: site-table-mobile

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Responsive table with same width in mobile

Class: site-table-same-width site-table-mobile

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Responsive table mobile stacked

Class: site-table-mobile-stack

ID NAme Subject Grade School section
1 Jo Subj 1 Grade 1 Senior
2 Sean $2,443 Grade 2 Prep
3 Rosie $1,181 Grade 1 Junior
4 Jorge $842 Grade 3 Senior
5 Felipe $99 Grade 3 Junior

Table Accordion

Class: site-table-accordion

Accordion Title 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 4
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Table Accordion

Class: site-table-accordion site-table-accordion-arrow-first

Accordion Title 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 4
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

SG - Tabbed Table

Class: site-table-tabs

Tab 1

Desc 1.1 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Desc 1.2 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Tab 2

Desc 2 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Tab 3

Desc 3.1 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Desc 3.2 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Tab 4

Desc 4 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Tab 5

5 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

p

IN THIS SECTION

SG - Site Feature Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Important Notice Popup

Hello i am a popup

SITE-BUTTON-FULL-WHITE