Style Guide

Welcome to the style guide, your comprehensive resource for all design elements and components, ensuring consistency and ease of customization across your website.

Structure Classes

Defined and flexible core structure we can use on all or most pages.

Page Wrapper

Main Wrapper

Section

Container

Heading Tags + Custom classes

HTML tags define default Heading styles + Also think to custom your heading classes accodingly to global classes.

All h1

This is the H1 heading

Heading style 1

This is the H1 heading

All h2

This is the H2 heading

Heading style 2

This is the H2 heading

All h3

This is the H3 heading

Heading style 3

This is the H3 heading

All h4

This is the H4 heading

Heading style 4

This is the H4 heading

All h5

This is the H5 heading

Heading style 5

This is the H5 heading

All h6

This is the H6 heading

Heading style 6

This is the H6 heading

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links

All Links

All quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Colors

Text color black

Text Color Black

Text color White

Text Color White

text color Accent

Text Color Accent

Text Sizes

Text Size large

Sample text is being used as a placeholder for real text that is normally present.

Text Size Regular

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

Text Size Small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Weights

Text Weight Regular

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

Text Weight Bold

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Styles

Text Style Italic

text-style-italic

Text style Caps

text-style-allcaps

Text Inline Wrapper

Lorem

des

1200 €

Text Style Muted

Lorem

Text Alignments

Text Align Left

text-align-left

Text align center

text-align-center

Text Align Right

text-align-right

Buttons

Button combo class system.

button Dark

button Light

Spacing

Utility spacing system. Use these classes to adapt margin around your elements. DO not forget to adapt them following the breakpoints if needed.

Margin Top

Margin Top Tiny

margin top small

margin top regular

margin top Medium

margin top large

margin top Xlarge

Margin Bottom

Margin Bottom Tiny

margin Bottom small

margin Bottom regular

margin Bottom Medium

margin Bottom large

margin Bottom Xlarge

No Margin

no margin

Icons

Unify icons sizes. Icon Height sets height of icons.

icon Tiny

icon Small

icon Regular

icon large

Images

Classes to speed up your image process design

Image Cover

Image Ratio 1:1

Image Ratio 4:3

Image Ratio 16:9

Image Ratio 21:9

Image Ratio 2:3

Image Clip Path octogon

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

hidden Desktop

This element is hidden

hidden tablet

hidden mobile

overflow hidden

overflow Clip (Use for sticky)

pointer events On

pointer events none

z index 1

z index 2

Vertical wrapper center

Horizontal wrapper

Horizontal wrapper space between

Webflow elements

Native Webflow elements with Custom classes applied.

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Image Caption

form component

Example of a form component using Folders

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Colors

Manage recurring text and background colors.

Background Colors

background color Dark

background color white

background color Light

Thanks for purchasing this template

We hope it meets all your expectations. For more templates, you can visit my templates page.
And if you have any questions or need maintenance, contact me via this page.

Happy creating!

Alexis Gardin