Heading fonts
Heading 1 : 100px
Heading 2 : 40px
Heading 3 : 30px
Heading 4 : 25px
Heading 5: 20px
Heading 6: 18px
| Test header |
|---|
| Test data |
| Test Header 2 |
| Test data 2 |
PARAGRAPH
Duis massa tortor consectetur porta amet risus ante ultrices. Netus massa tortor placerat et consectetuer urna sodales ex venenatis penatibus curae. Curabitur parturient gravida duis iaculis mauris. Gravida blandit accumsan magna fringilla ornare vestibulum nibh amet maximus. Sodales pellentesque nunc risus ad natoque sed quis aenean nostra. Letius bibendum gravida rhoncus lacus facilisis eros. Ac lobortis platea nascetur nec felis facilisi maximus senectus fames. Dui sem tempor dignissim letius ut.
Finibus dictumst sociosqu lorem porta est blandit. A ac cras erat maecenas aliquam quisque. Etiam mauris quis phasellus enim inceptos mi adipiscing nunc nam class augue. Dolor habitant mus purus ligula sagittis. Praesent himenaeos diam sit ligula natoque nisl condimentum ut. Dictumst ornare convallis condimentum nam donec aenean egestas senectus elementum.
Risus parturient montes facilisis potenti in augue nunc. Sociosqu posuere vulputate convallis tempus pretium ut class. Fringilla faucibus finibus nisl cursus montes placerat ipsum. Ante ultricies felis placerat dui nibh gravida class. Senectus quisque justo malesuada sed adipiscing sodales odio volutpat mauris.
COLOUR CODE
Red (main color): #AA0040
Dark Red: #9C003B
Coral: #FF4951
Dark Gray(Default text color): #5D5D5D
CLASS STRUCTURE
Page Classes:
site-theme-home (home page class)
site-theme-landing (red colored theme)
site-theme-landing-coral (coral colored theme)
site-theme-content (sidebar with 2 column content)
site-theme-content-coral (sidebar with 2 column content)
site-theme-content-single-column (sidebar & horizontal nav below hero banner with 1 column content)
site-theme-content-single-column-coral (sidebar & horizontal nav below hero banner with 1 column content)
site-theme-content-alt (sidebar & horizontal nav below hero banner with 2 column content)
site-theme-content-alt-coral (sidebar & horizontal nav below hero banner with 2 column content)
hide-mobile-nav (hides the page from the first section of menu items in the mobile navigation)
no-bottom-spacing (on landing pages, prevents the bottom arrows from underlaying the last content)
site-custom-banner-size (required when a hero banner gallery on the page uses the slider height: banner height setting and should be set to 65%)
Feature Classes:
Hero banner features
site-custom-hero-banner--sm (Normal Hero Banner)
site-custom-hero-banner--sm--solid (Normal Hero Banner variant, the one with the solid BG KC on the left)
site-custom-hero-banner--lg (Large Hero Banner, the one with the giant KC and right colored bar)
Gallery feature class usage
site-custom-gallery-slider (image top, content bottom)
custom-gallery-with-text--left custom-push-right (image with left aligned vertically middle text)
custom-gallery-with-text--right custom-push-left (image with right aligned vertically middle text)
custom-arrow-center (center arrows)
Display feature class usage
site-custom-display-slider (image top, content bottom)
site-custom-display-landing (images left/right content middle)
Other feature class usage
site-body-fullwidth (Overrides width, and sets the feature to be 100% width)
site-body-fullwidth-edge (can be used to make a feature fullwidth to the edge of its boundary)
site-custom-text (For text that is aligned right, aligns left at < 1100 width)
site-custom-gallery-fixed-caption (makes gallery captions sit below the image with red (main color) as the background)
custom-push-right (Push feature to the right side, past the container)
custom-push-left (Push feature to the left side, past the container)
custom-no-overflow (used with custom-push-left)
Popup class usage (text feature)
site-custom-popup (causes feature to act as a popup modal on page load out of edit mode)
Landing feature class usage
The following three classes should be used consecutively, specific to the last 3 features in admissions-2
landing-left
landing-middle
landing-right
Parallax class usage
You can use either inner or outer versions fo the class depending on the feature, parallax will move the feature up as you scroll down
Outer:
parallax-up
parallax-up-slow
parallax-up-slower
Inner (only usable with text features):
inner-parallax-up
inner-parallax-up-slow
inner-parallax-up-slower
Buttons
site-button-white-border-primary
site-button-white-border-secondary
site-button-full-white-border-primary
site-button-full-white-border-secondary
Numbered List
- Number 1
- Number 2
- Number 3
Ordered List
- Item 1
- Item 2
- Item 3
Tables
| 50% | 50% |
| 33% | 33% | 33% |
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 |
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 |
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 | Juni |
class: site-custom-calendar site-body-fullwidth
class: site-custom-form custom-fullwidth
OUR DIRECTORY
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus nibh urna, sit amet vestibulum turpis malesuada et. Cras sed mauris eu nunc ultricies venenatis. Quisque ac massa mi.
The farm is a source of top-quality pork, lamb and mutton that is used in the Kent College kitchens by the school’s Head Chef, Neil Wiggins.
class: site-custom-gallery-slider
class: site-custom-gallery-slider