Heading 1 : 100px

Heading 2 : 100px

Heading 3 : 85px

Heading 4 : 57px

Heading 5: 38px

Heading 6: 32px

Heading with var tag

Heading with marker

Heading font family - Merriweather

Paragraph font family - Open Sans

small text

Big 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 with var tag

NAM VESTIBULUM LECTUS URNA, ID BIBENDUM MAURIS COMMODO VITAE

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.

Colors

• Dark Blue: #0c1d6f
• Blue: #0096ff
• Purple: #6c3b77
• Green: #0098aa
• Light Blue: #61d9ff
• Yellow: #ffc800
• Default text color: #2c2a29

Buttons

site-button-primary

site-button-secondary

site-button-full-primary

site-button-full-secondary

site-cta

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

Default inline quote

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.

Secondary inline quote (site-secondary-quote)

Default blockquote

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.

TOM

Senior School Pupil

Secondary blockquote (site-secondary-quote)

Small blockquote (site-small-quote)

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.

TOM

Senior School Pupil

Small secondary blockquote (site-secondary-quote site-small-quote)

Social Icons

facebook twitter instagram linkedin youtube tiktok

Other Icons

Add the transparent-bg class to each link seperately to have a transparent background (hover state remains the same).

site-phone-link site-email-link site-chat-link site-flag-link site-pencil-link

Align features

When setting the feature width, the feature will center by default. you can adjust this by using the site-feature-align-right or site-feature-align-left which will align the feature right or left respectively. You can also use this with the full width content  and full width feature settings on some templates.

The relocation page has a map with clickable points, which show content in popups. This is call image mapping. This can be seen on the SG - Relocation 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>

The map is hardcoded to a template. In order to use it, ensure that your page is using the Relocation template. This can be selected in the page settings.

It is important that the map name is image-map like in the example above. This renders the desktop version of the map.

Once you have set up your page, the map will show automatically (except in edit mode). Create a text feature, and give it a class site-hotspots. Paste you generate map code (such as the example above) 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 edit mode, create another text feature, and give it a class site-hotspots-tables. In the text editor, 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.

Showing plane icon - In order to show the plane icon, simply add the word Plane or plane in the title attribute in the area code. For example:

<area target="" alt="" title="Plane" href="" coords="" shape="circle" />

The location pin will show by default.

Mobile

There is a seperate map for mobile, that needs the points adding again. This is to ensure the map is fully responsive. Follow the same process regarding uploading the image to the mapping software and adding the points. Take the generated code and paste it into the text feature, below your desktop map tag.
For mobile, you need to change the map tag name to image-map-mobile (see example below):

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

The mobile maps uses the same pin content, so these do not need to be updated, just ensure the pins on your mobile map are placed in the same order as your desktop map.

Useful Links

• SG - Relocation page
• Image map software
• Image to download (for desktop)
• Image to download (for mobile)