SG - News

General

Getting Started

 

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

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

Heading 2 - bold: 160px

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

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

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

Fonts

Heading Font: DIN Next LT Pro

Paragraph font: Gotham.

Samp - Colour Red Text
Var - DIN Next LT Pro - Var Bold - DIN Next LT Pro Bold


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

Morbi tortor purus, aliquet in odio vel, auctor suscipit lectus. In at magna nec augue scelerisque placerat non sed sem. Vivamus nec ex at diam laoreet congue et vitae est. Etiam imperdiet est quis sapien dignissim, id mollis est faucibus.

— Mr Timothy Trousers

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): #9D2235
  • Secondary: #2C2C2C
  • Text (Default text color): #000000
  • Shade 1: #F8F8F8
  • Shade 2: #EAEAEA
  • Shade 3: #2C2C2C

Ordered List

  1. 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.
  2. Number 2
  3. 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.

Unordered List

  • 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.
  • Item 2
  • 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.

Buttons

site-button-primary

site-button-secondary

SITE-BUTTON-BORDER

site-button-full-primary

site-button-full-secondary

site-button-full-border

Dynamic Modal Buttons

Youtube Video

Vimeo Video

Normal Video

IMAGES

  • site-custom-image-zoom

Components

Page Classes

Hide the sidebar menu on a content with sidebar template page

  • site-hide-sidenav

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

  • hide-in-nav
Gallery Features

Feature Name: SG - Home - Hero Banner
Collection: Gallery
Class: site-custom-hero-banner && site-custom-hero-banner-full

  • site-custom-hero-banner-full - Used when you want to use a full image to cover the whole banner
  • Small text needs wrapping

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - values gallery
Collection: Gallery
Class: site-custom-values-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - voices gallery
Collection: Gallery
Class: site-custom-voices-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - scrolling gallery
Collection: Gallery
Class: site-custom-scrolling-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Lower School Grid Gallery
Collection: Gallery / Link Slideshow
Class: site-custom-grid-gallery // custom-link-popup

  • Add multiple of these galleries underneath each other if you want a filter above, if you have 2 galleries then have 2 filter buttons above using text feature - see text feature section to see how.
  • See Components page of a working example.
  • disable-cutout-image-1 - This will disable the first cut out image
    disable-cutout-image-2 - This will disable the second cut out image
    disable-cutout-image-3 - This will disable the third cut out imagedisable-cutout-images - This will disable all the cut out images

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - reviews gallery
Collection: Gallery
Class: site-custom-reviews-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Academics - Innovation gallery
Collection: Gallery
Class: site-custom-innovation-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Academics - Bottom Banner
Collection: Gallery
Class: site-custom-bottom-banner

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Admissions - Dunham in numbers
Collection: Gallery
Class: site-custom-numbers-gallery & site-custom-numbers-gallery-small

  • site-custom-numbers-gallery-small -

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Parent Portal - Resources Gallery
Collection: Gallery
Class: site-custom-gallery

  • We can use class site-custom-gallery for either display or gallery.
  • The feature title also needs to show for this feature.

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Parent Portal - Standard Gallery
Collection: Gallery
Class: site-custom-standard-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - GALLERY - News & Events with white image
Collection: Gallery
Class: site-custom-events

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - GALLERY - News & Events with real image
Collection: Gallery
Class: site-custom-events // site-custom-events-with-image

  • Same as above but with a real image - add class site-custom-events-with-image to show real image, if you're using a white images you won't need the extra class.

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - choose dunham gallery
Collection: Gallery
Class: site-custom-choose-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Corporate Sponsors
Collection: Gallery
Class: site-custom-sponsors

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Athletics Sidebar Gallery
Collection: Gallery
Class: site-custom-sidebar-gallery

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - sidebar gallery
Collection: Gallery
Class: No class needed.

  • If you want to stack the images in this gallery - please use class site-gallery-grid - This will show each im

GO TO SETTINGS

 OptimizedImage,Optimized

Feature Name: Collegiate Athletes
Collection: Gallery
Class: site-gallery-grid-athletes

GO TO SETTINGS

 OptimizedImage,Optimized

 

DISPLAy Features

Feature Name: Curriculum Search
Collection: Display
Class: site-custom-curriculum-search

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - The Arts - News // SG - The Arts - Events
Collection: Display
Class: site-custom-events

  • We can use class site-custom-events for either display or gallery.

GO TO news SETTINGS

GO TO Events SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Athletics News
Collection: Display
Class: site-custom-events

  • We can use class site-custom-gallery for either display or gallery.
  • Same as above but in different zone.

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Parent Portal - Related Links
Collection: Display
Class: site-custom-gallery

  • We can use class site-custom-gallery for either display or gallery.
  • The feature title also needs to show for this feature.

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - sidebar display
Collection: Display
Class: No class needed.

GO TO SETTINGS

 OptimizedImage,Optimized

 

Text Features

Feature Name: SG - home intro
Collection: home
Class: site-custom-home-intro

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: SG - Academics Grid Filter
Collection: Text
Class: site-custom-grid-filter

  • This text feature is used for Grid Gallery.
  • See Components page of a working example.

GO TO SETTINGS

 OptimizedImage,Optimized

 

Feature Name: Title Text
Collection: Text
Class: site-custom-title

  • This needs to be 2 seperate H2's, second one

GO TO SETTINGS

 OptimizedImage,Optimized

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

Iframe Resize Video

Iframe Resize 1