• Home
  • Style guide and templates

Style guide and templates

General

Getting Started

Heading 1 : 55px

Heading 2 : 45px

Heading 3 : 40px

Heading 4 : 35px

Heading 5: 30px
Heading 6: 18px

Heading font family - Merriweather

Paragraph font family - Open Sans

small text

Paragraph of content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum lectus urna, id bibendum mauris commodo vitae. Suspendisse potenti. Suspendisse eu posuere lacus. Donec mauris dolor, aliquet sed consequat sit amet, molestie eget orci. Donec at erat enim. Nullam magna orci, convallis sed nisi porttitor, ultricies lobortis libero. Nam in laoreet nibh. Sed porttitor luctus condimentum.

Suspendisse sagittis erat et augue porttitor, semper tincidunt ipsum viverra. Duis congue purus tortor, ac venenatis libero efficitur in. Cras metus mauris, interdum ac ultrices scelerisque, laoreet nec leo. Aliquam ac feugiat mi, in ullamcorper lacus. Ut eu luctus risus. Nulla facilisi. Integer venenatis condimentum vestibulum.

Paragraph <var> tag

Paragraph <marker> tag

Colors

  • Blue: #002d72
  • Light Blue: #6cace4
  • Red: #9d2235
  • Dark Blue: #26005a
  • Orange: #d67f18
  • Gold #866d4b
  • Gray (Default text color): #707372

Buttons

site-button-primary

site-button-secondary

site-button-tertiary

site-button-full-primary

site-button-full-secondary

These buttons below change colour based on the theme of the page

site-button-theme

site-button-theme-full

site-button-theme-reverse

site-button-theme-reverse-full

site-button-theme-outline (can't use here as transparent, use on banners)

site-button-theme-outline-full (can't use here as transparent, use on banners)

Lists

Bullet Pointed List:

  • Bullet 1
  • Bullet 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi nisi, venenatis id lectus id, tristique iaculis orci. Praesent sit amet nisi at quam sagittis molestie. Vivamus in congue nunc. Morbi vel orci eu elit finibus commodo vitae a massa.
  • Bullet 3

Numbered List:

  1. List 1
  2. List 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi nisi, venenatis id lectus id, tristique iaculis orci. Praesent sit amet nisi at quam sagittis molestie. Vivamus in congue nunc. Morbi vel orci eu elit finibus commodo vitae a massa. Vivamus in congue nunc. Morbi vel orci eu elit finibus commodo vitae a massa.
  3. List 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut turpis in augue mollis congue. Nam porta finibus mauris vel semper. Ut sagittis non neque at gravida. Donec a molestie erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut turpis in augue mollis congue. Nam porta finibus mauris vel semper. Ut sagittis non neque at gravida. Donec a molestie erat.

Social Icons

instagram linkedin youtube

Copyright

Copyright updates automatically (like below) using the id current-year.

Copyright 2024

Hiding Features when grid collapses

Use the class hide-on-grid-collapse on any feature to hide the feature when the grid collapses.

Hiding arrows on desktop, but show on mobile

In the gallery feature settings, make sure that you have the show arrows checkbox selected, and then add the class no-arrows-desktop to hide them on desktop.

Gradient Background

Gradient background changes colour based on page theme, however can be used with individual classes below, and can be added to any feature

  • Class: site-background-gradient
    • site-academic-gradient
    • site-athletic-gradient
    • site-art-gradient
    • site-summer-gradient
  • Collection: Gradient Background

Add class site-centre-logo to center logo to middle of gradient background

Open settings

Tuition Calculator

You can add a tuition calculator with a class and a shortcode which you can paste in the WYSIWYG:

  • Class: site-tuition-calculator
  • Shortcode: [tuition_calculator]
  • Example Feature

Components

Pages

You can change colours on pages using designated page themes, which can be added in the page class field in page settings. These are:

  • academic-theme
  • athletic-theme
  • art-theme
  • summer-theme
  • art-alt-theme
Full Width Settings

Most templates have a two column layout, where you can add features either side. You can use the size dropdown in the feature settings, in conjunction with the site-fixed-feature class to create full width features, that pin on scroll

Full Width Feature

  • Feature Name: Full width fixed feature
  • Collection: Fixed Feature
  • Size Setting: Stretch - Full width feature

Open settings

Full Width Column

  • Feature Name: Half width fixed feature
  • Collection: Fixed Feature
  • Size Setting: Stretch - Full width feature and content

Open settings
Gallery Features

Full height Caption

  • Feature Name: Gallery with stretched caption
  • Class: site-stretch-caption
  • Collection: Stretch Caption

Open settings

Custom Tab Slider

  • Feature Name: Custom tab slider
  • Class: site-custom-tab-slider
  • Collection: Custom Tab Slider

Open settings

History Slider

  • Feature Name: History slider
  • Class: site-history-slider
  • Collection: History Slider

Open settings

CTA Slider (full height)

  • Feature Name: CTA Slider
  • Class: site-cta-slider
  • Collection: CTA Slider

Open settings

CTA Slider (with background image)

  • Feature Name: CTA slide with background image
  • Class: site-cta-slider
  • Collection: CTA Slider

Open settings

Popup tab slider

  • Feature Name: Popup tab slider
  • Class: site-popup-tab-slider
  • Collection: Popup tab slider

Open settings

Gallery with stripy background (positioned left or right)

  • Feature Name: Gallery with stripes (left/right)
  • Class: site-stripy-background stripes-right
  • Collection: Stripy Background

Open settings

Gallery that has height of column

  • Feature Name: Autoheight Gallery
  • Class: site-autoheight
  • Collection: Autoheight

Open settings
Text Features

Breadrumbs

  • Feature Name: Breadcrumbs
  • Class: site-breadcrumb-links
  • Collection: Breadcrumbs

Open settings

Filter List

  • Feature Name: Filter list
  • Class: site-filter-list
  • Collection: Filter List

Open settings

Custom Anchors

  • Feature Name: Custom anchor links
  • Class: site-custom-anchors
  • Collection: Custom Anchors

Open settings

Quick Links

  • Feature Name: Quick links
  • Class: site-quick-links
  • Collection: Quick Links

Open settings
Campus Map

The campus map is a map with clickable points, which show content in popups. This is call image mapping. This can be seen on the SG - Components page. In order to map the points correctly, you need to use a image map tool such as https://www.image-map.net/ and upload the image. You can then drag the points to the relevant areas on the map.

You can download the image here. Once you have downloaded the image, upload it into the image mapping software, and drag the points. You can then select the 'Show me the code' button. Copy everything inbetween, the <map> tags (include the map tags themselves). For example:

<map name="image-map">
<area target="" alt="" title="" href="" coords="" shape="circle" />
</map>

It is important that the map name is image-map like in the example above. This links the hotspots to the image.

Once you have set up your page, create a text feature, and give it a class site-hotspots. Paste you generate map code (such as the example above, with the image into the text editor. Click save and publish.

Now you can see that the points are appearing on the map. We now need to add the popup boxes.

In the same text feature, create your tables and add your content. Ensure you use a h6 heading for the title, this is useful for mobile. Save and publish. Now the tables should show once a point is clicked.

Important note: The tables are assigned to the points by order. Meaning the first area you draw on the map, shows the first table in your text feature, second shows second etc.

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

Accordion arrow first

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-mobile site-table-same-width

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

Table stacked on mobile

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

Table Column style

Class: site-table-mobile site-column-styling reverse-cols-mob

Use a table to create columns, by each column a width. You can also reverse the columns on mobile if you wish.

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/td> 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

Table with background

Class: site-table-with-background

The background colour changes based on the theme.

Welcome to The ESD Parent Community

We greatly benefit from the time, love, and support from our parents.

Table counter boxes

Class: site-counter-boxes

Use a table to create counter boxes.

15+

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

100%

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

75

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

Inquiries Admission Giving

instagram linkedin youtube

© 2024  Terms and conditions Accessibility Legal Design by UBIQ, powered by AMAIS

Popup test

This is a test