Heading fonts

Heading 1 : 100px

Heading 2 : 40px

Heading 3 : 30px

Heading 4 : 25px

Heading 5: 20px

Heading 6: 18px

PARAGRAPH

Duis massa tortor consectetur porta amet risus ante ultrices. Netus massa tortor placerat et consectetuer urna sodales ex venenatis penatibus curae. Curabitur parturient gravida duis iaculis mauris. Gravida blandit accumsan magna fringilla ornare vestibulum nibh amet maximus. Sodales pellentesque nunc risus ad natoque sed quis aenean nostra. Letius bibendum gravida rhoncus lacus facilisis eros. Ac lobortis platea nascetur nec felis facilisi maximus senectus fames. Dui sem tempor dignissim letius ut.

Finibus dictumst sociosqu lorem porta est blandit. A ac cras erat maecenas aliquam quisque. Etiam mauris quis phasellus enim inceptos mi adipiscing nunc nam class augue. Dolor habitant mus purus ligula sagittis. Praesent himenaeos diam sit ligula natoque nisl condimentum ut. Dictumst ornare convallis condimentum nam donec aenean egestas senectus elementum.

Risus parturient montes facilisis potenti in augue nunc. Sociosqu posuere vulputate convallis tempus pretium ut class. Fringilla faucibus finibus nisl cursus montes placerat ipsum. Ante ultricies felis placerat dui nibh gravida class. Senectus quisque justo malesuada sed adipiscing sodales odio volutpat mauris.

COLOUR CODE

Red (main color): #AA0040

Dark Red: #9C003B

Coral: #FF4951

Dark Gray(Default text color): #5D5D5D

CLASS STRUCTURE

Page Classes:

site-theme-home (home page class)

site-theme-landing (red colored theme)

site-theme-landing-coral (coral colored theme)

site-theme-content (sidebar with 2 column content)

site-theme-content-coral (sidebar with 2 column content)

site-theme-content-single-column (sidebar & horizontal nav below hero banner with 1 column content)

site-theme-content-single-column-coral (sidebar & horizontal nav below hero banner with 1 column content)

site-theme-content-alt (sidebar & horizontal nav below hero banner with 2 column content)

site-theme-content-alt-coral (sidebar & horizontal nav below hero banner with 2 column content)

hide-mobile-nav (hides the page from the first section of menu items in the mobile navigation)

no-bottom-spacing (on landing pages, prevents the bottom arrows from underlaying the last content)

site-custom-banner-size (required when a hero banner gallery on the page uses the slider height: banner height setting and should be set to 65%)

Feature Classes:

Hero banner features

site-custom-hero-banner--sm (Normal Hero Banner)

site-custom-hero-banner--sm--solid (Normal Hero Banner variant, the one with the solid BG KC on the left)

site-custom-hero-banner--lg (Large Hero Banner, the one with the giant KC and right colored bar)

Gallery feature class usage

site-custom-gallery-slider (image top, content bottom)

custom-gallery-with-text--left custom-push-right (image with left aligned vertically middle text)

custom-gallery-with-text--right custom-push-left (image with right aligned vertically middle text)

custom-arrow-center (center arrows)

Display feature class usage

site-custom-display-slider (image top, content bottom)

site-custom-display-landing (images left/right content middle)

Other feature class usage

site-body-fullwidth (Overrides width, and sets the feature to be 100% width)

site-body-fullwidth-edge (can be used to make a feature fullwidth to the edge of its boundary)

site-custom-text (For text that is aligned right, aligns left at < 1100 width)

site-custom-gallery-fixed-caption (makes gallery captions sit below the image with red (main color) as the background)

custom-push-right (Push feature to the right side, past the container)

custom-push-left (Push feature to the left side, past the container)

custom-no-overflow (used with custom-push-left)

Popup class usage (text feature)

site-custom-popup (causes feature to act as a popup modal on page load out of edit mode)

Landing feature class usage
The following three classes should be used consecutively, specific to the last 3 features in admissions-2

landing-left

landing-middle

landing-right

Parallax class usage
You can use either inner or outer versions fo the class depending on the feature, parallax will move the feature up as you scroll down

Outer:

parallax-up

parallax-up-slow

parallax-up-slower

Inner (only usable with text features):

inner-parallax-up

inner-parallax-up-slow

inner-parallax-up-slower

Buttons

site-button-primary

site-button-secondary

site-button-white-border-primary

site-button-white-border-secondary

Site-button-full-primary

site-button-full-secondary

site-button-full-white-border-primary

site-button-full-white-border-secondary

Numbered List

1. Number 1
2. Number 2
3. Number 3

Ordered List

• Item 1
• Item 2
• Item 3

Tables

Table Accordion

Class: site-table-accordion

Table Accordion

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

Table with the same width columns

Class: site-table-same-width

Responsive table in mobile

Class: site-table-mobile

Responsive table with same width in mobile

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

Class: site-table-mobile-stack

Youtube Video

Vimeo Video