Your browser does not support JavaScript!

CALEDON TOURISM

Style Guide

Typography

Work Hard &
Be Nice To People

H1

Work Hard &
Be Nice To People

H2

Work Hard &
Be Nice To People

H3

Work Hard &
Be Nice To People

H4
Work Hard &
Be Nice To People

God, she thought lying in bed naked and re-reading Aldington's Portrait of a Genius, But... he's an impostor! Not D.H. Lawrence, but her husband-Henry-with his bauble of a belly and all the hair he never combed and the way he stood around in his shorts, and the way he stood naked before the window like an Arabian and howled; and he told her that he was turning into a toad and that he wanted to buy a Buddha and that he wanted to be old and drown in the sea, and that he was going to grow a beard and that he felt as if he was turning into a woman.

And Henry was poor, poor and worthless and miserable and sick. And he wanted to join the Mahler Society. His breath was bad, his father was insane and his mother was dying of cancer.

P

And Henry was poor, poor and worthless and miserable and sick. And he wanted to join the Mahler Society. His breath was bad, his father was insane and his mother was dying of cancer.

SMALL-P
Global colors
Buttons / Links
read more
Chevron
CTA Button
GHOST BUTTON
TEXT LINK
CTA Button
GHOST BUTTON
TEXT LINK
Top navigation
footer

Hero

Header Banner

Hero Header

This is the default text value for a symbol field

Slider

Trip Ideas

This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

read more
Chevron

Accordions

First step, create the FAQ accordion structure.

Basically, you can design anything that you can ever imagine. The main thing here is to have a parent container and two child elements. One for the FAQ question and another for FAQ answer. The child element for FAQ answer should be set to overflow: hidden and transform-origin set to top mid.

Next, setup the interactions.

Depending on how fancy you want it to be but the concept here is to apply the interaction to the parent element. Use 'Mouse Click' interaction to resize the height of FAQ answer element. Initial state should be set to height: 0px. On first click, resize to height: auto and on second click, resize to height: 0px.

To make the other items auto collapse, add in custom script.

The first two steps pretty much got the main function works. As for the auto collapse, copy the code from the page custom code section before tag and paste into your project. Voila, that's all and you're good to go.

Events

Heading

Event date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

More information
Chevron

Plan your trip

Covid-19

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Semper nulla eu eget volutpat neque, bibendum turpis elementum.

Experience category template

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Explore category template

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

123-456-789

Social Icons