Four's

Four's

General

Getting Started

Heading 1 : 90px

Heading 2 : 90px

Heading 3 : 30px

Heading 4 : 25px

Heading 5: 22px
Heading 6: 20px
"Marker" Style can be applied to any Header to change font/color.

Fonts

Heading Font: itc-galliard

Paragraph font: mr-eaves-xl-modern


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

Marker


Social Icons


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): #76232F

Secondary: #717074

Tertiary: #C3A550

Text (Default text color): #000000


Ordered List

  1. Lorem ipsum dolor sit amet molestie cursus aliquet. Placerat bibendum fringilla torquent rhoncus nisi vitae aliquam felis maximus suscipit.
  2. Lorem ipsum dolor sit amet molestie cursus aliquet. Placerat bibendum fringilla torquent rhoncus nisi vitae aliquam felis maximus suscipit.
  3. Lorem ipsum dolor sit amet molestie cursus aliquet. Placerat bibendum fringilla torquent rhoncus nisi vitae aliquam felis maximus suscipit.

Unordered List

  • Lorem ipsum dolor sit amet molestie cursus aliquet. Placerat bibendum fringilla torquent rhoncus nisi vitae aliquam felis maximus suscipit.
  • Lorem ipsum dolor sit amet molestie cursus aliquet. Placerat bibendum fringilla torquent rhoncus nisi vitae aliquam felis maximus suscipit.
  • Lorem ipsum dolor sit amet molestie cursus aliquet. Placerat bibendum fringilla torquent rhoncus nisi vitae aliquam felis maximus suscipit.

Buttons

site-button-transparent-border-white

site-button-primary

site-button-border-white

site-button-border-primary

site-button-secondary

site-button-border-secondary

site-button-border-white

site-button-full-border-primary

site-button-full-border-white

site-button-full-secondary

site-button-full-border-secondary

Dynamic Modal Buttons

Youtube Video

Vimeo Video

Normal Video

 

Components

Page Classes
  • custom-admissions (admissions page)
  • custom-portal (portal page)
  • custom-hide-sidebar (any page that uses a sid)
Gallery Features
  • Feature Name: Hero Banner
  • Collection: Hero banner
  • Class: custom-hero-banner

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Header Logo
  • Collection: Header
  • Class: custom-header-logo

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Header mobile logo
  • Collection: Header
  • Class: custom-header-logo-mobile

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Mobile Icons
  • Collection: Header
  • Class: custom-header-icons

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Entry Cards
  • Collection: Sidebar
  • Class: custom-entry-card

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Card Slider: Gallery
  • Collection: Card Slider
  • Class: custom-card-thumb-slider

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Landing Slider: Gallery
  • Collection: Landing Slider
  • Class:custom-landing-slider

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Landing Single Slider (Fade)
  • Collection: Landing Single Slider
  • Class: custom-landing-single-slider

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Tabbed Slider
  • Collection: Tabbed Slider
  • Class: custom-tabbed-slideshow
  • Addon Class: custom-adaptive-height (will allow gallery to adapt to the height of the caption)

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Collage Gallery
  • Collection: Collage Gallery
  • Class: custom-hero-banner custom-scroll-trigger-gallery site-thumbnail-disable-popup

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Flip Card Slider
  • Collection: Flip Card Slider
  • Class: custom-flip-card-slider

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Expanding Tabbed Slider
  • Collection: Expanding Tabbed Slider
  • Class: custom-expanding-slider 

(requires the same amount of blank slides minus 1 which will be empty with the caption description custom-empty)

 

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Footer Banner
  • Collection: Footer Banner
  • Class: custom-footer-banner

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Tabbed Gallery: Reduced width
  • Collection: Gallery
  • Class: custom-tabbed-gallery-reduced-width

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name:custom-360-gallery
  • Collection: 360 Gallery
  • Class: custom-360-gallery

GO TO SETTINGS

Display Features
  • Feature Name: Card Slider: Display
  • Collection: Card Slider
  • Class: custom-card-thumb-slider

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Landing Slider: Display
  • Collection: Landing Slider
  • Class: custom-landing-slider

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Our Athletics Prgramme
  • Collection: Filtered Display
  • Class: custom-display-feed

GO TO SETTINGS

 

 OptimizedImage,Optimized

Text Features
  • Feature Name: Header lower links
  • Collection: Header
  • Class: custom-header-links

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Leading Block
  • Collection: Leading Block
  • Class: custom-leading-block

(used to overlay a block of text with custom-hero-banner)

 

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Landing Left Text
  • Collection: Text
  • Class: custom-leading-text

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: O'quinn 2 column
  • Collection: Text
  • Class: custom-left-big

(2 column with wider left side, requires a table)

 

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: O'quinn 2 column
  • Collection: Text
  • Class: custom-right-big

(2 column with wider right side, requires a table)

 

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Important Links
  • Collection: Text
  • Class: custom-important-links

GO TO SETTINGS

 

 OptimizedImage,Optimized

Calendar Features
 
Form Features
  • Class: custom-form-wrapper (form feature)
Other Feature Classes
  • Class: custom-first-mob
    (will change the order of two column items at mobile)

Integrations in half columns

  • Class: custom-integration-lead-block-title
    (use this for the top title for an integration)
  • Class: custom-integration-sub-block
    (use this for anything in between the title and the)
  • Class: custom-integration
    (use this on the actual integration feature)
  • Class: custom-position-top
    Will set the image position in a banner (cover or banner height) to the top edge of the container, may help to prevent heads be
Footer Features
  • Feature Name: Footer Left Content
  • Collection: Footer
  • Class: custom-footer-quote

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Footer Links
  • Collection: Footer
  • Class: custom-footer-links

GO TO SETTINGS

 

 OptimizedImage,Optimized

  • Feature Name: Footer Copyright
  • Collection: Footer
  • Class: custom-copyright

GO TO SETTINGS

 

 OptimizedImage,Optimized

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

General Popup

Hello I am a popup.

 ThumbnailImage,Thumbnail