Style Guide and Templates

General

Getting Started

Heading 1: 80px

Heading 2: 50px

Heading 3: 40px

Heading 4: 25px

Heading 5: 20px
Heading 6: 16px

Fonts

Heading Font: Georgio

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.

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.

Citation lorem ipsum

Colors

  • Primary (main color): #E50053
  • Secondary: #252244
  • Text (Default text color): #482B6D

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-primary-fill

site-button-secondary

site-button-secondary-fill

site-button-tertiary

site-button-tertiary-fill

explore site-button-primary

explore site-button-primary-fill

site-button-full-primary

site-button-full-primary-fill

site-button-full-secondary

site-button-full-secondary-fill

site-button-full-tertiary

site-button-full-tertiary-fill

explore site-button-full-primary

explore site-button-primary-fill

Dynamic Modal Buttons

video-popup-button

explore video-popup-button

 

Components

Page Classes

Show the alternative sidebar

  • Class: custom-sidebar-full

OriginalImage,Original
Gallery Features
  • Feature Name: St Mary's - Header - Gallery
  • Collection: Hero banners
  • Class: custom-header-banner

GO TO SETTINGS

 

OriginalImage,Original

  • Feature Name: St Mary's - Style Guide - Admissions Banner
  • Collection: Hero banners
  • Class: custom-hero-banner

GO TO SETTINGS

 

OriginalImage,Original

  • Feature Name: St Mary's - Music School - Gallery - Instrument Learning
  • Class: custom-tab-gallery-slideshow

GO TO SETTINGS

 

OriginalImage,Original

  • Feature Name: St Mary’s voices
  • Class: custom-testimonial-banner

GO TO SETTINGS

 

OriginalImage,Original

  • Feature Name: St Mary’s voices
  • Class: custom-testimonial-banner-left

GO TO SETTINGS

 

OriginalImage,Original

  • Feature Name: St Mary's - Music School - Video
  • Class: custom-video-banner custom-link-popup

GO TO SETTINGS

 

OriginalImage,Original
Display Features
  • Feature Name: St Mary's - News - Display - Events
  • Class: custom-display-events

GO TO SETTINGS

 

OriginalImage,Original

  • Feature Name: St Mary's - News - Display - News
  • Class: custom-display-news

GO TO SETTINGS

 

OriginalImage,Original

  • Feature Name: See Also
  • Class: custom-related-articles

GO TO SETTINGS

 

OriginalImage,Original
Text Features
  • Feature Name: St Mary's - Landing - Welcome - Text
  • Class: custom-landing-table

GO TO SETTINGS

 

OriginalImage,Original

  • Feature Name: St Mary's - Style Guide - Boarding - Our Location
  • Class: custom-table-images

GO TO SETTINGS

 

OriginalImage,Original

  • Feature Name: St Mary's - Style Guide - Choir School - Testimonial
  • Class: custom-testimonial-single

GO TO SETTINGS

 

OriginalImage,Original

 

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

Iframe Resize Video

Iframe Resize (CSS)

Transitions & Animations

Use the class to achieve the animation.

fade-left
fade-right
fade-up
fade-down
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right
flip-up
flip-down
flip-left
flip-right