SG - News Content
Getting Started
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
- Number 1
- Number 2
- Number 3
Ordered List
- Item 1
- Item 2
- Item 3
Buttons
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)