Getting Started

Global typography styles.

This template makes use of the global styles for your typography. Global styles allow us to specify the font size and colors for each of the typography tag types - H1, H2, H3, H4, H5, H6, Paragraph, Links, etc etc.

This way when we use a heading element, like H1 we can expect some certain styles. If you move components to a new project, it will inherit that projects global styles, meaning you will likely see design differences. Be sure to set the global typography styles for any project that you are copy sections into.

Interactions (Scroll In View)

This template makes use of easy scroll in-to-view animations. All elements that animate on the page, will have an interaction applied to it. You will notice the small lighting bolt icon in the layers panel to see the animated layer. These elements are linked to the scroll into view trigger animation. We generally use 3 different scroll into view animations, these just have slight variations in the timing to achieve staggered load effects.

We recommend using our default interaction options to simply apply animations to any selected element or wrapper. If you wish to remove these, simply click the item and delete the interaction on the right side.

‍

Background Colors

Please note you can change the Background Color of the primary content section by using a combo class. When you have clicked on the 'Content Section' you can add new combo-classes to add or change color, for example a combo-class 'BG Color 4' - See Example Below.

Preview the content sections, to see the BG color class added, simply remove or change the color as you require.‍