Define your tags and variables
Do not add classes to these elements.
In this section, you want to directly edit , so that it will affect all elements on the site without having to use a class.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet
Heading 1 default
Heading 2 default
Heading 3 default
Heading 4 default
Heading 5 default
Heading 6 default
Documentation
What are reusable classes ?
In this section, default classes and combo classes are explained.
Here are all the classes that you will be able to use throughout your project.
This class has to be applied on the section element.
Sections are used to structure your content vertically.
Properties
padding-top: 64px,
padding-bottom: 64px
Changes the section background color to the primary color defined in your swatches.
Properties
padding-top: 64px,
padding-bottom: 64px,
+ background-color: ??
This class has to be applied on the container element.
Containers are used to structure your content horizontally.
Properties
padding-left: 32px,
padding-right: 32px,
max-width: 1280px
This combo class adds flex display to your container, and centers its content horizontally.
Properties
padding-left: 32px,
padding-right: 32px,
max-width: 1280px,
+ display: flex,
+ flex-direction: vertical,
+ align-items: center,
+ text-align: center
This combo class adds flex display to your container, and centers its content vertically.
Can be combined with the centered combo-class.
Properties
padding-left: 32px,
padding-right: 32px,
max-width: 1280px,
+ display: flex,
+ flex-direction: vertical,
+ justify-content: center
These classes can be applied on grid elements.
Grid layouts are used to structure your content.
(Combo classes are available on all layouts.)
Properties
gap: 32px,
width: 100%
The gap combo class adds / removes horizontal & vertical gap.
Properties
- gap: 32px,
width: 100%,
+ gap: ??px
These classes can be applied on div elements.
These classes are used to modify your content layout.
Properties
display: flex,
flex-direction: vertical,
align-items: left,
justify-content: start
This combo class center your content.
Properties
display: flex,
flex-direction: vertical,
- align-items: left,
justify-content: start,
+ align-items: center,
+ text-align: center
This combo class center your content vertically
Properties
display: flex,
flex-direction: vertical,
align-items: left,
- justify-content: start,
+ justify-content: center
These classes can be applied on any element.
"mb" is for "margin-bottom", which is used to separate elements on your site.
Properties
margin-bottom: ??px
These classes can be applied on a grid or flex container.
"gap" is used to separate the elements inside your container.
Properties
gap: ??px
These classes can be applied on Divs, Buttons or Link Blocks.
"cta" is for "call to action".
Properties
margin-bottom: ??px
These classes can be applied on a grid or flex container.
"gap" is used to separate the elements inside your container.
Properties
gap: ??px
These classes can be applied on a grid or flex container.
"gap" is used to separate the elements inside your container.
Properties
gap: ??px
These classes can be applied on text or wrapper elements.
These classes are used to modify your text color.
Properties
color: white
These classes can be applied on text elements.
These classes are used to modify your text font size.
Properties
font-weight: ??
This class can be applied on any elements
This classe is used to hide an element on your website.
Properties
display: none
This class can be applied on any elements
This classe is used to hide an element on specific breakpoints