SG - News Content

Getting Started

  1. Headings
  2. Paragraph
  3. Colors
  4. Lists
  5. Buttons
  6. Tables
  7. Accordions
  8. Classes

 


 

Heading 1 : 80px

Heading 2 : 80px

Heading 3 : 60px

Heading 4 : 40px

Heading 5: 30px
Heading 6: 18px

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.


Colors

Dark Green (main color): #06412F

Mid Green: #216450

Gold: #BCAB77

Dark Gray(Default text color): #616161


Numbered List

  1. Number 1
  2. Number 2
  3. Number 3

Ordered List

  • Item 1
  • Item 2
  • Item 3


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

Classes

Page Classes:

no-sidebar-menu (hides the sidebar)

 

Gallery Classes:

custom-menu-gallery (toggle menu left gallery)

site-header-custom-thumbnails (toggle menu right gallery, requires other addon classes: site-gallery-grid site-thumbnail-disable-popup site-thumbnail-dt-4 site-thumbnail-mob-1)

site-custom-gallery (general/muti-use custom gallery like the hero banners/lower banners)

site-custom-facts-gallery (home, image left - caption content right)

site-custom-link-gallery (home, thumbnail style link slideshow)

site-custom-link-gallery-explore (home, thumbnail style link slideshow)

site-custom-thumbnails (experience, custom gallery thumbnails)

site-custom-sidebar-gallery (academics, sidebar slideshow gallery)

 

Display Classes:

site-custom-display-related (content with sidebar, display feature, related news in the sidebar)

site-custom-display-1-big (home, display feature, 1 big 3 small posts)

site-custom-display-slideshow (home, thumbnail style display slideshow)

 

Calendar Classes:

site-custom-calendar (home, custom calendar)

 

Other Feature Classes:

header-logo (header logo)

header-mobile-logo (mobile toggle menu logo)

site-custom-header-navigation (header navigation, requires class: custom-link-active)

site-custom-toggle-lower-links (toggle menu below right gallery)

site-custom-fixed-socials (header, fixed position social icons on the left side)

site-custom-section-title (home, the westfield school beliefs)

site-custom-text (general, basic custom text feature has underlined link styling)

site-custom-discover (home, text feature, requires class: has-quote if using a blockquote)

site-custom-wasp-cta (content, custom text feature)

no-cal-logo (sets the calendar feature logo to hidden)

school-cal-logo (sets the calendar feature logo to the school crest logo)

 

Feature addon classes:

width-50 (gives the feature a width of 50% will take a range of 1-100)
Example: You have two features, both have the "width-50" class which combined totals 100% of the available width.

width-mob-100 (gives the feature a width of 100% on mobile will take a range of 1-100)

order-mob-1 (allows you to define the order of features on mobile will take a range of 1-100)
Example: You have two features, but on mobile you want the second feature to be above the first, so you give the second feature, "order-mob-1" and the first feature "order-mob-2".

push-left (align feature left)

push-right (align feature right)

iframe-resize-video (automatically sets the video to a 16:9 aspect ratio)

no-caption-background (makes the gallery caption background color transparent)

no-hover-arrow (removes the corner arrow that shows on hover for display/gallery features)

no-main-desc (Hides green hover effect and the white text.
Used with gallery class: site-custom-link-gallery maintains the additional content text but still requires some description text
Used with Dispaly class: site-custom-display-slideshow)

more-title-text (displays more additional text.
Used with gallery class: site-custom-link-gallery)