Style Guide - Classes, Components & Layouts

Do this after you have entered all variable values. Add more variables to the default ones, if needed.
‍
Remember: All sizing values should be in rem. The character spacing given in % in design should be taken in em. 2% = 0.02em

Global text classes

Global classes for headings and paragraphs/text blocks. Ensure that component 'DO NOT DELETE - Responsive Styles' is added to the top of the page to make it auto responsive and change values in variable panel for individual breakpoints.

H1

H2

H3

H4

This is the paragraph text. With the class 'subtext' it has a top margin of 1rem (can be changed as per design). To use the text without any margin, use text block or paragraph without any class.

Other Global Classes

Configure these global classes before you start developing the page. You can add to this list if the design requires it. Copy the class names below to use them.
section
section-hero-inner
section-hero-home
Base section classes with padding values. Use these classes just for their padding values. For other modifications, use combo classes.
no-padding
no-top-padding
no-bottom-padding
no-margin
Margin and padding classes. To be used as combo classes with base section classes or other elements, if needed.
hidden
hidden-on-mobile
hidden-on-desktop
Hide classes. Use them to hide elements on specific breakpoints. <hidden-on-mobile> means hidden on landscape and portrait. <hidden-on-desktop> means hidden on base and above.
primary-text
secondary-text
accent-1-text
black-text
dark-text
dark-text-high-opacity
dark-text-med-opacity
dark-text-low-opacity
white-text
light-text
light-text-high-opacity
light-text-med-opacity
light-text-low-opacity
Colour classes for text. These are linked to the variables. Use them to create combo classes with other classes or as a base class.
primary-bg
secondary-bg
accent-1-bg
black-bg
white-bg
dark-bg
light-bg
Colour classes for bg. These are linked to the variables. Usually used to create combo classes with other classes. Sometimes used as base classes as well.

Buttons

All buttons and arrow elements used inside buttons defined here. Arrow element component is nested inside button component. The button component is wrapped in the button wrapper (global). No margins or other layout related values should be added to the button element. They should be added to the wrapper.
Button icon. Ignore this if the design doesn't have a button icon.
Button
Button
Button
Button
Primary Dark | Secondary Dark | Primary - Nav | Tertiary
Know More
Button
Button
Button
Primary Light | Secondary Light | Primary Light - Nav | Tertiary Light
book a Demo
Button
Button
Button
Buttons wrapped in global wp. The wrapper works with 1 and 2 buttons.

Separators

Line separators used throughout the project. To add margins, wrap in a div an apply margin to it.
Dark separator. Use var <global-colour/dark>, if the design uses a colour other than black.
Light separator. Use var <global-colour/light>, if the design uses a colour other than white.

Image Aspect Ratios

Some common aspect ratios of images. Copy these elements and duplicate classes as per design. The width is 100% to cover the parent and aspect ratios are set using the ratio field.
Square (1:1) | 4:3 | 5:3 | 2:3 | 3:2

Content Block

Change the design values as per the design and copy this block to use on hero and other sections. This works with H2 as well.
Transforming Compliance with AI

Embrace the Future of Compliance

Button
Button