Style Guide and Templates

In this section

Style Guide

General

 

Getting Started

Heading 1 : 86px

Heading 2 : 86px

Heading 3 : 69px

Heading 4 : 55px

Heading 5: 44px
Heading 6: 35px

Fonts

Heading Font: Cormorant

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.

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

Colours

  • Primary (main color): #004f74
  • Secondary:#2ecddc
  • Body: #FFFFFF
  • 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.
  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-border-white

site-button-border-primary

site-button-border-secondary

site-button-full-primary

site-button-full-secondary

site-button-arrow-primary

site-button-arrow-secondary

site-button-full-arrow-primary

site-button-full-arrow-secondary

site-button-border-primary-white-arrow-right

site-button-border-secondary-white-arrow-right

site-button-border-primary-arrow-right

site-button-secondary-arrow-right

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

Gallery Features
  • Feature Name: Custom Header Gallery
  • Collection: custom-header-gallery
  • Class: custom-header-gallery
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  •  Feature Name: Hero Gallery
  • Collection: Hero Gallery
  • Class: custom-caption-bottom-gallery
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  •  Feature Name: Hero Gallery
  • Collection: Hero Gallery
  • Class: custom-caption-gallery
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  • Feature Name: Custom Variable Gallery
  • Collection: custom-variable-gallery
  • Class: custom-variable-gallery
  • Additional Classes: custom-controls
  • Description: custom controls will enable differently styled controls used inconjuction with custom-adjacent-controls on a text feature.
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  • Feature Name: Custom Media Gallery
  • Collection: media-gallery
  • Class: custom-media-gallery
  • Description: a media gallery used for videos
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  • Feature Name: Offset Image
  • Collection: custom offset image
  • Class: custom-offset-image-left-lg
  • Additional Classes:
    custom-offset-image-left-sm
    custom-offset-image-right-md
    custom-offset-image-right-xl
  • Addon Classes: 
    custom-decoration (background circles)
    custom-start-offsets (excludes from certain spacing styles)
    custom-is-last (applies different spacing)
  • Description: Offsets images off to the left or right so their half in view.
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  • Feature Name: Bottom Gallery
  • Collection: bottom gallery
  • Class: site-row-block-image-top
  • Additional Classes: custom-foreground
  • Description Image Class: custom-foreground-img
  • Description: Like a normal site-row-block-image-top class with the addition of a description image that animates into view on scroll
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  • Feature Name: Segment Gallery
  • Collection: Segment Gallery
  • Class: custom-segment-gallery
  • Description: 
    The first slide contains the school logo, bottom left text and bottom right scroll decoration text, the slides after the first are used as the six segments.
    Each slide should have an anchor in the slide link "#custom-division-pre-prep" which is used as a class on features "custom-division-pre-prep" to assosiate said feature to that segment, allowing them to be shown or hidden when clicking segments.
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  • Feature Name: Division Gallery
  • Collection: Division Gallery
  • Class: custom-division-gallery
  • Description: 
    Division gallery, tied to the segment gallery selection, providing the classes "custom-division-pre-prep"
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  •  Feature Name: Curved Gallery
  • Collection: Curved-Gallery
  • Class: custom-curved-gallery
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  •  Feature Name: Decoration Gallery
  • Collection: Decoration Gallery
  • Classes: 
    custom-decoration-gallery-one
    custom-decoration-gallery-two
    custom-decoration-gallery-three
  • GO TO SETTINGS
 OptimizedImage,,,Optimized

   
Display Features
  • Feature Name: Custom Curved Display
  • Collection: curved display
  • Class: custom-curved-display
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  • Feature Name: Curved Display News
  • Collection: Curved Display News
  • Class: custom-curved-display-news
  • GO TO SETTINGS
 OptimizedImage,,,Optimized

 

 
Text Features
  • Feature Name: Custom Adjacent Controls
  • Collection: custom-adjacent-controls
  • Class: custom-adjacent-controls
  • Description: custom adjacent controls will reposition gallery controls used inconjuction with custom-controls on a gallery feature.
  • GO TO SETTINGS
 OptimizedImage,,,Optimized

 
Table Classes
  • Class: custom-table
  • Description: if using headers best used with the site-table-mobile-stack class
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  • Class: custom-timeline
  • Description: table that converts into a timeline with markers that reveal information.
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  • Class: custom-items-table
  • Description: styled item table.
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  • Class: custom-buttons-group
  • Description: stylged group of buttons used in the custom-overlayed feature.
  • GO TO SETTINGS
 OptimizedImage,,,Optimized
  • Class: custom-same-width-{width} (custom-same-width-1200)
  • Description: If you need the scrolling class on the table to active sooner than mobile, you can use this class instea and define the width, minimun:700 maximum:1400
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.
  • Class: custom-bottom-mob
  • Description: will move a feature to the bottom of the parent container it is inside (useful for sidebar features)
  •  Class: custom-show-caption
  • Description: if added to a element that has a title, the title will be visually shown
  •  Class: site-row-block-*
  • Examples:
    site-row-block-primary (no curve)
    site-row-block-light-top (top curve)
    site-row-block-image-top (used with an image gallery + has a top curve)
    site-row-block-primary-center (top and bottom is curved, usually used in the center of the page)
  • Description: Style classes for site row blocks using colors and directions

  

   
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

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.

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

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

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

SG - Iframe resize

SG - Iframe Resize (Page)

Important Notice Popup

Hello i am a popup