SG - News Content

SG - News Content

General

Getting Started

Heading 1 - This is my Heading 1 font : 70px

Heading 2 - This is my Heading 2 font : 70px

Heading 3 - This is my Heading 3 font : 50px

Heading 4 - This is my Heading 4 font : 40px

Heading 5 - This is my Heading 5 font : 30px
Heading 6 - This is my Heading 6 font : 25px

Fonts

Heading Font: Neue-Haas-Unica

Paragraph font: Guardi.


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.


Social Icons


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.

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.


Colors

  • Primary (main color): #762123
  • Secondary: #191919
  • Other: #FFC901
  • Text (Default text color): #4C4C4C

Ordered List

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

Unordered List

  • Item 1
  • Item 2
  • Item 3

Buttons

site-button-primary

site-button-secondary

site-button-full-primary

site-button-full-secondary

Dynamic Modal Buttons

Youtube Video

Vimeo Video

Normal Video

 

Components

Header Colour change

Changing Header colour - (Home and Landing pages only)

  •  site-custom-red-header

The header is white by default - dd class above to any feature to change the header colours when scrolling over that feature - for example - if the feature has a white background you'll want to add the class to that feature so when we scroll past that feature the header elements change to red

Page Classes

Assign a page to show up in seperate navigation groups

  • site-nav-school - will show under schools section
  • site-nav-activities - will show under activities section

Hide the sidebar menu on a content with sidebar template page

  • custom-hide-sidebar-menu

Hide a page from the main navigation, while keeping it visible in the sidebar menu

  • hide-in-nav

Remove left column on sidebar template (add to page settings)

  • hide-left-column
Gallery Features

Feature Name: SG - Home Gallery
Collection: Home
Class: site-custom-banner-size-150 // site-custom-red-banner

  • site-custom-banner-size-150 will increase font size to 150

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Home Gallery 2
Collection: Home
Class: site-custom-number-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Home Gallery 3
Collection: Home
Class: site-custom-cutout-image

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Home Grid 1 // SG - Home Grid 2 // SG - Home Grid 3
Collection: Home
Class: site-custom-image-grid // site-custom-grid-reverse

  • site-custom-grid-reverse will reverse the direction of auto scroll

GO TO SETTINGS GRID 1

GO TO SETTINGS GRID 2

GO TO SETTINGS GRID 3

 OptimizedImage,Optimized

 

Feature Name: SG - Home Gallery 4
Collection: Home
Class: No class needed

  • You can adjust the size within the settings - Set Width - 50%

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Home Slide Gallery
Collection: Home
Class: site-custom-slide-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: Home - Tabbed Text
Collection: Home
Class: site-custom-tab-text

  • Image will never show

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Home Admissions Banner
Collection: Home
Class: site-custom-banner-size-150 // site-custom-last-slide

  • site-custom-banner-size-150 will increase font size to 150
  • site-custom-last-slide add this to the last slide to add image scaling animation

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Schools Gallery
Collection: Schools
Class: site-custom-banner-size-150 // site-custom-border-bottom

  • site-custom-banner-size-150 will increase font size to 150
  • site-custom-border-bottom will add red border at the bottom of whatever feature it's added to

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Schools Team Gallery
Collection: Schools
Class: site-custom-team-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - AAA Gallery 6
Collection: AAA
Class: site-custom-brick-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: Style Guide - Gallery
Collection: 
Class: No class needed

  • Sidebar gallery feature

GO TO SETTINGS

 OptimizedImage,Optimized

 

DISPLAy Features

Feature Name: Vacancies
Collection: Careers
Class: site-custom-vacancies-display

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: Related Pages
Collection: related
Class: No class needed

  • Sidebar display feature

GO TO SETTINGS

 OptimizedImage,Optimized

Text Features

Feature Name: SG - Home Intro Banner
Collection: Home
Class: site-custom-intro-banner

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Home Text
Collection: Home
Class: No class needed

  • The width and padding is controlled by the code, padding can be overritten with settings if needed

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Schools Explore Menu
Collection: Schools
Class: No class needed

  • Add background colour via settings

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Admissions Text 4 - FAQ
Collection: Admissions
Class: No class needed

  • Accordion table inside a text feature

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: Style guide - Top Content
Collection: 
Class: site-custom-title-left // site-custom-title-right

  • Left class will show title on left sid, right class will move it right, no class will span whole width

GO TO SETTINGS

 OptimizedImage,Optimized

 

Table Classes

No custom Table

Calendar Features

No custom Calendar features

Form Features
No custom Form features
Other Features Classes

 

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): 2024

 

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
  1 night per week  2 nights per week  3 nights per week 
Year 7, 8 and 9 £360 £715 £1,070
Year 10 and 11 £470 £935 £1,405
Year 12 and 13 £520 £1,040 £1,545
 
Class: site-table-mobile-stack
ID NAme Subject Grade School section
1 Sean Subj 1 Grade 1 Senior
2 Sean $2,443 Grade 2 Prep
3 Sean $1,181 Grade 1 Junior
4 Sean $842 Grade 3 Senior
5 Sean $99 Grade 3 Juni

 

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