style-guide-and-templates

General

Getting Started

Heading 1 : 60px

Heading 2 : 60px

Heading 3 : 50px

Heading 4 : 40px

Heading 5: 30px
Heading 6: 26px

Fonts

Heading Font: GT Sectra

Paragraph font: Ubuntu

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

instagram linkedin youtubetiktok

class: site-social-secondary

instagram linkedin youtubetiktok

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

Colors

  • Primary (main color): #702381
  • Primary (light): #C7B0D5
  • Secondary: #262352
  • Text (Default text color): #7A7D83

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 custom-has-crest

site-button-primary

site-button-secondary

site-button-border-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

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)

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

Components

Page Classes
  • Removes the footer fade/gradient effect.
  • Class: custom-no-footer-gradient

 

  • Removes the side section menu
  • Class: custom-hide-section-menu

 

  • Hide the menu inside the pop out "in this section" area.
  • Class: custom-hide-section-inner-menu
Gallery Features
  • Feature Name: Header Logo
  • Collection: Gallery
  • Class: custom-header-logo

 

  • Feature Name: Custom Slideshow
  • Collection: Gallery
  • Class: custom-slideshow

GO TO SETTINGS

OptimizedImage,Optimized

  • Feature Name: Team Gallery
  • Collection: Team Gallery
  • Class: custom-team
  • The team gallery uses buttons that require a class for each custom-overview and custom-bio to tab between the content, when using the team feature, you can also use custom-arrows-top to positon the navigation arrows above the gallery when they are visible, insteea

GO TO SETTINGS

OptimizedImage,Optimized

  • Feature Name: Custom Featured Slideshow
  • Collection: Featured Slideshow
  • Class: custom-featured-slideshow
  • Notes: The cutout image sizes should be consistent and a maximum of 1016x921px

GO TO SETTINGS

OptimizedImage,Optimized

  • Feature Name: Body Map
  • Collection: custom-map
  • Class: custom-map

GO TO SETTINGS

OptimizedImage,Optimized

  • Feature Name: Two Column Gallery
  • Collection: Gallery
  • Classes: custom-two-column-slideshow

GO TO SETTINGS

OptimizedImage,Optimized

  • Feature Name: The Good Schools Guide
  • Collection: Gallery
  • Classes: custom-quote-gallery

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: Scroll Gallery
  • Collection: Gallery
  • Classes: custom-scroll-gallery

GO TO SETTINGS

OptimizedImage,Optimized

  • Controls the SVG line being used on the hero banner
  • Feature Name: Hero Banner
  • Collection: Gallery
  • Classes: custom-hero-center or custom-hero-left or custom-hero-short

 

  • Controls the SVG line being used on the body banner
  • Feature Name: Body Banner
  • Collection: Gallery
  • Classes: custom-body-left or custom-body-right

 

  • Controls the SVG line being used on the footer banner
  • Feature Name: Footer Banner
  • Collection: Gallery
  • Class:  custom-body-end

 

  • Pins the banner and plays back the video as you scroll, unpins when the video ends
  • Feature Name: Hero Banner
  • Collection: Gallery
  • Classes: custom-scroll-video
  • Notes: You can use this class additionally with any of the above banner classes
  • GO TO SETTINGS

 

  • The custom-additional-rotate will rotate the additional content description text in hero banner.
  • Class: custom-additional-rotate

 

  • You can add the custom-rounded-corners class to a gallery fetaure to make the corners rounded.
  • Class:  custom-rounded-corners

 

  • You can add the custom-crest to the crest image as a class in gallery descriptions to reduce its size at mobile.
  • Class:  custom-crest

 

  • Enables video popup on gallery slideshow link
  • Class: custom-modal-slideshow

GO TO SETTINGS

 

  • Feature Name: Perspective Gallery
  • Collection: Gallery
  • Classes:  custom-perspective-gallery custom-unslick
  • Notes: Uploaded images: Full size images, Smaller/Grouped Images: add images to the first description of an uploaded image

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: Circular Gallery
  • Collection: Gallery
  • Classes:  custom-circular-gallery custom-unslick

GO TO SETTINGS

OptimizedImage,Optimized
Display Features
  • Feature Name: Related Posts
  • Collection: Related Posts
  • Class: custom-related-display

GO TO SETTINGS

OptimizedImage,Optimized

  • You can add the custom-rounded-corners class to a display fetaure to make the corners rounded.
  • Class:  custom-rounded-corners
Text Features
  • Indents the text feature.
  • Feature Name: Text Indent
  • Collection: Text
  • Class: custom-indent

GO TO SETTINGS

OptimizedImage,Optimized

  • Removes the indent from the content other than the headings.
  • Feature Name: Text No Indent
  • Collection: Text
  • Class: custom-no-indent

GO TO SETTINGS

 

 

  • Removes the indent from the content other than the headings and also removes the crest.
  • Feature Name: Text No Indent No Crest
  • Collection: Text
  • Class: custom-indent-no-crest

GO TO SETTINGS

OptimizedImage,Optimized

  • This is the timeline header that allows anchoring to the features that have the custom-scroll-item class, you only need to add the custom-scroll-item to one feature per two column zone.
  • Feature Name: Admissions Timeline Header
  • Collection: Admissions Timeline
  • Class: custom-scroll-header

GO TO SETTINGS

OptimizedImage,Optimized

  • Feature Name: Custom Quote Feature
  • Collection: Text
  • Classes: custom-quote-feature

GO TO SETTINGS

OptimizedImage,Optimized
Table Classes
  • A table with the class custom-no-quote will hide the blockquote quote icon.
  • Class: custom-no-quote
  • Class: custom-sm-width

OptimizedImage,Optimized

  • Class: custom-md-width

OptimizedImage,Optimized
Other Feature Classes
  • Adding the class below to a feature within a two column area makes it appear first when stacked.
  • Class: custom-first-stack
  • You can add the custom-offset-left or custom-offset-right class to a fetaure to give it and offset within two column zones.
  • Classes:  custom-offset-right custom-offset-right

OptimizedImage,Optimized

  • Adding the class custom-has-crest to a button class will add the Gordonstoun crest to the button
  • Class: custom-has-crest
  • Adding the class custom-map-zoom to an iframe in the text feature with the class custom-map will style the smaller zoom map over the main map.
  • Class: custom-map-zoom
  • Adding the custom-ui-bottom to a slideshow that has arrows or a play button will move them to the bottom of t.
  • Class: custom-ui-bottom
  • Moves the arrows under the gallery below mobile width
  • Class: custom-ui-under-mob
  • These classes set the slidesToShat 1024px to the number at the end of the class for a tabbed gallery
  • Class: tablet-tab-slides-1, tablet-tab-slides-2, tablet-tab-slides-3
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

Iframe Resize Video (IFRAME)

Iframe Resize Video (VIDEO)

Iframe Resize

Iframe Resize (Page)

Tiktok Embed

Important Notice Popup

Hello i am a popup