Style Guide and Templates

Style Guide

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Home
  • Style Guide and Templates

General

Getting Started

Heading 1 : 100px

Heading 2 : 100px

Heading 3 : 52px

Heading 4 : 30px

Heading 5: 25px
Heading 6: 20px

Fonts

Heading Font: Minion Pro
Heading Font: High_School_USA_San
Heading Font: Prompt
Heading Font: American_Captain

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

This is example of a leading paragraphlorem ipsum dolor est sit tiempo ad astra nollum tiempo. Ad nollum lorem ipsum dolor est sit ad astra tiempo argum.

Social Icons

class: site-social-primary

instagramlinkedinyoutubetiktok

class: site-social-secondary

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.

CitationSmall Sub text

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

 

Colors

  • Primary (main color): #CD2031
  • Secondary:#404040
  • Tertiary:#E6E6FA
  • Text (Default text color): #000000

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. 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.
  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. 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
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Background buttons

site-button-primary

site-button-secondary

site-button-tertiary

site-button-full-primary

site-button-full-secondary

site-button-full-tertiary

site-button-contact

site-button-news

site-button-events

Watch Our Video

Dynamic Modal Buttons

Youtube Video

Vimeo Video

Normal Video

Page Popup

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
  • Function: Hides the page in the nav menu
  • Class: .hide-in-nav
Gallery Features
  • Feature Name:Image Pop Up
  • Collection: image pop up gallery
  • Class: site-image-popup
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Gallery Slideshow
  • Collection: slideshow gallery
  • Class: custom-gallery
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: Home Hero Video
  • Collection: video
  • Class: hp-hero
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Landing Hero
  • Collection: hero gallery
  • Class: site-landing-hero
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Athletics Hero Gallery Grid
  • Collection: hero gallery
  • Class: hero-gallery-grid
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Horizontal Scroll Image Panel
  • Collection: horizontal scroll
  • Class: horizontal-scroll-panel
  • Additional Class for caption position: caption-top-left or caption-bottom-left or caption-top-left or caption-mid-left 
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Horizontal Scroll Tab Panel
  • Collection: horizontal scroll
  • Class: site-scroll-tab-panel horizontal-scroll-panel
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Horizontal Scroll Image Panel
  • Collection: horizontal scroll
  • Class: horizontal-scroll-tertiary-panel
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Horizontal Scroll Tab Panel
  • Collection: horizontal scroll
  • Class: horizontal-scroll-tertiary-panel 
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: Home - Horizontal Scroll Image Panel
  • Collection: horizontal scroll
  • Class: horizontal-scroll-secondary-panel profile-slider-1
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: Home - Horizontal Scroll Image Panel
  • Collection: horizontal scroll
  • Class: horizontal-scroll-secondary-panel profile-slider-2
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Video popup slider
  • Collection: gallery slider
  • Class: site-video-popup-slider
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - News Slider
  • Collection: news slider
  • Class: site-news-slider
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Landing Hero
  • Collection: hero gallery
  • Class: site-landing-hero
  • GO TO SETTINGS
 OptimizedImage,Optimized
Text Features
  • Feature Name: SG - Content in two column wide left layout
  • Collection: custom table container
  • Class: custom-table-container
  • Table Classes: site-table-mobile site-table-content custom-sg-feature wide-left-layout blockquote-secondary
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Content in two column layout
  • Collection: custom table container
  • Class: custom-table-container
  • Table Classes: site-table-mobile site-table-content custom-sg-feature wide-left-layout blockquote-secondary
  • Table Classes: site-table-mobile site-table-content custom-sg-feature align-bottom
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Content with red background
  • Collection: custom table container
  • Class: custom-table-container
  • Table Classes: site-table-mobile site-table-content custom-sg-feature wide-left-layout blockquote-secondary
  • Table Classes: site-table-mobile site-table-content custom-sg-feature wide-left-layout block-bg
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Call to action Heading
  • Collection:cta heading
  • Class: site-cta-heading
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Call to Action buttons
  • Collection:cta buttons
  • Class: site-cta-button-container
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Landing Intro Content
  • Collection:intro content
  • Class: site-landing-intro-content
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - 4 column Grid with images & text
  • Collection:column grid
  • Classes: custom-sg-grid-container margin-adjust grid-row-1
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - 4 column Grid with images & text
  • Collection:column grid
  • Classes: custom-sg-grid-container margin-adjust grid-row-2
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - 3 Column Grid with Blockquote
  • Collection:column grid
  • Classes: custom-sg-grid-container grid-row-3
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - 3 column Grid with red CTAs
  • Collection:column grid
  • Classes: custom-sg-grid-container
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Content with pop up button in horizontal scroll
  • Collection:horizontal scroll
  • Classes: site-content-feature horizontal-scroll-panel
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: Home Content with pop up button in horizontal Scroll
  • Collection:horizontal scroll
  • Classes: site-content-feature horizontal-scroll-secondary-panel block-bg
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: Home Content with pop up button in horizontal Scroll
  • Collection:horizontal scroll
  • Classes: site-content-feature horizontal-scroll-tertiary-panel block-bg-dark
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: SG - Content Explore Quicklinks feature
  • Collection:quicklinks
  • Classes: site-explore-quicklinks
  • GO TO SETTINGS
 OptimizedImage,Optimized
  • Feature Name: Home Hero Caption Overlay
  • Collection:hero
  • Classes: hp-hero-overlay
  • GO TO SETTINGS

OptimizedImage,Optimized
  • Feature Name: Hero caption
  • Collection:hero
  • Classes: hp-hero-caption
  • GO TO SETTINGS

OptimizedImage,Optimized
  • Feature Name: Quote slider in three column grid
  • Classes (added in table properties): site-table-mobile-stack custom-sg-grid wide-left-layout site-custom-list-slider

OptimizedImage,Optimized
  • Feature Name: Instagram Image Link
  • Classes: image-quicklink instagram

OptimizedImage,Optimized
  • Feature Name: Image Quicklink
  • Classes: image-quicklink 

  •  

ThumbnailImage,Thumbnail
  • Feature Name: Quote slider in three column grid
  • Classes (added in table properties): site-table-mobile-stack custom-sg-grid wide-right-layout block-bg-dark event-box

OptimizedImage,Optimized
  • Feature Name: SG -  Button Container
  • Classes: site-button-container block-bg
  • GO TO SETTINGS

 

OptimizedImage,Optimized
Other Feature Classes
  • Class: video-popup-button
  • Description: Ideally you would only use this popup class on a button.
  • Class: custom-popup
  • Description: This is more universal and can be used to popup the link of a video or a page, this could be used on a button, or a link slide show gallery.
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

Class: site-table-tabs

Tab 1

Desc 1.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.
Tab 2

Desc 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.
Tab 3

Desc 3.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.
Tab 4

Desc 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.
Tab 5

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

OptimizedImage,Optimized

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.

SG - Iframe Resize Video (Iframe)

SG - Iframe Resize Video

Important Notice Popup