Heading 1 : 80px

Heading 2 : 80px

Heading 3 : 60px

Heading 4 : 40px

Heading 5: 30px

Heading 6: 18px

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.

Colors

Dark Green (main color): #06412F

Mid Green: #216450

Gold: #BCAB77

Dark Gray(Default text color): #616161

Numbered List

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

Ordered List

• Item 1
• Item 2
• Item 3

Buttons

site-button-primary

site-button-border-primary

site-button-secondary

site-button-border-secondary

Site-button-full-primary

site-button-full-border-primary

site-button-full-secondary

site-button-full-border-secondary

Table Widths

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

Responsive table mobile stacked

Class: site-table-mobile-stack

Table Accordion

Class: site-table-accordion

Table Accordion

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

Classes

Page Classes:

no-sidebar-menu (hides the sidebar)

Gallery Classes:

custom-menu-gallery (toggle menu left gallery)

site-header-custom-thumbnails (toggle menu right gallery, requires other addon classes: site-gallery-grid site-thumbnail-disable-popup site-thumbnail-dt-4 site-thumbnail-mob-1)

site-custom-gallery (general/muti-use custom gallery like the hero banners/lower banners)

site-custom-facts-gallery (home, image left - caption content right)

site-custom-link-gallery (home, thumbnail style link slideshow)

site-custom-link-gallery-explore (home, thumbnail style link slideshow)

site-custom-thumbnails (experience, custom gallery thumbnails)

site-custom-sidebar-gallery (academics, sidebar slideshow gallery)

Display Classes:

site-custom-display-related (content with sidebar, display feature, related news in the sidebar)

site-custom-display-1-big (home, display feature, 1 big 3 small posts)

site-custom-display-slideshow (home, thumbnail style display slideshow)

Calendar Classes:

site-custom-calendar (home, custom calendar)

Other Feature Classes:

header-logo (header logo)

header-mobile-logo (mobile toggle menu logo)

site-custom-header-navigation (header navigation, requires class: custom-link-active)

site-custom-toggle-lower-links (toggle menu below right gallery)

site-custom-fixed-socials (header, fixed position social icons on the left side)

site-custom-section-title (home, the westfield school beliefs)

site-custom-text (general, basic custom text feature has underlined link styling)

site-custom-discover (home, text feature, requires class: has-quote if using a blockquote)

site-custom-wasp-cta (content, custom text feature)

no-cal-logo (sets the calendar feature logo to hidden)

school-cal-logo (sets the calendar feature logo to the school crest logo)

Feature addon classes:

width-50 (gives the feature a width of 50% will take a range of 1-100)
Example: You have two features, both have the "width-50" class which combined totals 100% of the available width.

width-mob-100 (gives the feature a width of 100% on mobile will take a range of 1-100)

order-mob-1 (allows you to define the order of features on mobile will take a range of 1-100)
Example: You have two features, but on mobile you want the second feature to be above the first, so you give the second feature, "order-mob-1" and the first feature "order-mob-2".

push-left (align feature left)

push-right (align feature right)

iframe-resize-video (automatically sets the video to a 16:9 aspect ratio)

no-caption-background (makes the gallery caption background color transparent)

no-hover-arrow (removes the corner arrow that shows on hover for display/gallery features)

no-main-desc (Hides green hover effect and the white text.
Used with gallery class: site-custom-link-gallery maintains the additional content text but still requires some description text
Used with Dispaly class: site-custom-display-slideshow)

more-title-text (displays more additional text.
Used with gallery class: site-custom-link-gallery)