style-guide-and-templates

IN THIS SECTION


 

General

Getting Started

Heading 1 : 100px

Heading 2 : 100px

Heading 3 : 46px

Heading 4 : 30px

Heading 5: 26px
Heading 6: 24px

Fonts

Heading Font: baskerville-display-pt

Paragraph font: Lato


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.

Sample Text


Social Icons

class: site-social-primary

instagramlinkedinyoutubetiktok

class: site-social-secondary


Block Quotes

class: custom-blockquote-primary or custom-blockquote-senior

Lorem ipsum dolor sit amet consectetur. Faucibus leo integer amet lorem suspendisse a. Arcu morbi rhoncus mauris at sed. Diam erat egestas elementum vitae placerat.

site-button-secondary-outlined

class: custom-blockquote-secondary or custom-blockquote-nursery

Lorem ipsum dolor sit amet consectetur. Faucibus leo integer amet lorem suspendisse a. Arcu morbi rhoncus mauris at sed. Diam erat egestas elementum vitae placerat.

site-button-primary-outlined

class: custom-blockquote-tertiary or custom-blockquote-prep

Lorem ipsum dolor sit amet consectetur. Faucibus leo integer amet lorem suspendisse a. Arcu morbi rhoncus mauris at sed. Diam erat egestas elementum vitae placerat.

site-button-primary

class: custom-blockquote-quaternary or custom-blockquote-sixth-form

Lorem ipsum dolor sit amet consectetur. Faucibus leo integer amet lorem suspendisse a. Arcu morbi rhoncus mauris at sed. Diam erat egestas elementum vitae placerat.

site-button-primary

class: custom-blockquote-no-bg

“An outdoorsy, idyllic country school and an intimate setting that focuses on individual care and attention”.

Colors

  • Primary (main color): #AB2328
  • Secondary: #CFB023
  • Tertiary: #C9C9C9
  • Quaternary: #54585A
  • Text (Default text color): #444443

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-secondary

site-button-primary-outlined

site-button-secondarY-OUTLINED

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-border-white

site-button-full-border-primary

site-button-full-border-secondary

MUDDY STILETTOS

MUDDY STILETTOS

CLICK TO MUTE


Dynamic Modal Buttons

Youtube Video

Vimeo Video

Normal Video


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)

Components

Page Classes
  • Using one of the following landing page classes changes the pages color theme.
  • Classes: custom-theme-prep custom-theme-nursery custom-theme-sixth-form
Gallery Features
  • Feature Name: Custom Intro Gallery
  • Collection: intro-gallery
  • Class:  custom-intro-gallery
  • Additional: You can add the class custom-image-right to change the order of the image/description

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Landing Center Gallery
  • Collection: center-gallery
  • Classes:  custom-center-gallery custom-arrows-center-bottom custom-hide-gradient

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Custom Featured Gallery (left)
  • Collection: featured-gallery
  • Class:  custom-featured-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Custom Tabbed Gallery
  • Collection: custom-tabbed-gallery
  • Class:  custom-tabbed-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Custom Video Gallery
  • Collection: viideo-gallery
  • Class:  custom-video-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Entry Gallery
  • Collection: entry-gallery
  • Class:  custom-entry-gallery-wrapper

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Display Dates Gallery (left)
  • Collection: dates-gallery
  • Class:  custom-dates-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Where Next Gallery
  • Collection: next-gallery
  • Class:  custom-next-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Custom Team Gallery
  • Collection: roles-display
  • Class:  custom-roles-display

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Custom Activity Gallery
  • Collection: activity-gallery
  • Classes:  custom-activity-gallery custom-arrows-outside custom-right-overflow

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Custom Results Gallery
  • Collection: results-gallery
  • Classes:  custom-results-gallery custom-arrows-left-bottom

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Footer Gallery
  • Collection: footer
  • Class:  custom-footer-gallery custom-unslick

GO TO SETTINGS

 OptimizedImage,Optimized

  • Feature Name: Footer Logos
  • Collection: footer
  • Class:  custom-footer-logos custom-unslick

GO TO SETTINGS

Display Features
  • Feature Name: Custom Featured Display (right)
  • Collection: featured-display
  • Class:  custom-featured-display

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Custom Dates Display (right)
  • Collection: dates-display
  • Class:  custom-dates-display

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Custom Roles Display
  • Collection: roles-display
  • Class:  custom-roles-display

GO TO SETTINGS

 OptimizedImage,Optimized

  • Feature Name: Where Next Display
  • Collection: next-display
  • Class:  custom-next-display

GO TO SETTINGS

 

Text Features
  • Feature Name: Entry Text
  • Collection: entry-text
  • Class:  custom-entry-text

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Landing Section Heading
  • Collection: text
  • Class:  custom-slider-section-title

GO TO SETTINGS

 OptimizedImage,Optimized

 

  • Feature Name: Footer Content
  • Collection: footer
  • Class:  custom-footer-copyright

GO TO SETTINGS

Table Classes
  • Class: custom-table-headings-mb
  • Description: When you have mutiple headings, the class will restructure the table at mobile correctly to stack content below each heading.
Other Feature Classes
  • This feature lets you name the sections of the homepage as they are shown in the side nav that get generated.
  • Class: custom-pinned-section-nav
  • Add this to a gallery that has a video to be able to toggle mute or unmute via a button.
  • Class: custom-mutable

 OptimizedImage,Optimized

 

  • Type: Custom tooltip hyperlinks and features
  • Class: custom-button-tooltip
  • Creates a clickable tooltip which will toggle content in a slide out side section, you can access all tooltips via the side edit tooltips button in edit mode.
  • How to use: add the custom-button-tooltip class and then provide a second class to the hyperlink after custom-button-tooltip such as custom-tooltip-1
    <a class="custom-button-tooltip custom-tooltip-1" href="#"></a>
    then provide the same second class custom-tooltip-1 to the feature you want to show in the slide out section when it is clicked.

     OptimizedImage,Optimized

 

  • Class: custom-hide-sidebar
  • Hide the sidebar menu but retain the structure

 

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
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

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
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

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

Tab 1 Tab 2 Tab 3 Tab 4

Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tab 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tab 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

Iframe Resize Video (IFRAME)

Iframe Resize Video (VIDEO)

Iframe Resize

Iframe Resize (Page)

Important Notice Popup

Hello i am a popup