Style Guide
This page contains all styles and components used throught the website. This page help you to change any style from this style guide and it will apply throughout the site.
Colors
Grey Scale
100%
Grey Scale
80%
Grey Scale
60%
Grey Scale
40%
Grey Scale
20%
Grey Scale
15%
Grey Scale
8%
White Scale
100%
White Scale
75%
White Scale
50%
White Scale
25%
COLORED
Brand
Primary
Brand
Secondary
Brand
Tertiary
Brand
Brand BG
Headings (Tags)
Heading 1
H1 Looks like this.
Heading 2
H2 Looks like this.
Heading 3
H3 Looks like this.
Heading 4
H4 Looks like this.
Heading 5
H5 Looks like this.
Heading 6
H6 Looks like this.
Headings (Classes)
Heading 1
H1 Looks like this.
Heading 2
H2 Looks like this.
Heading 3
H3 Looks like this.
Heading 4
H4 Looks like this.
Heading 5
H5 Looks like this.
Heading 6
H6 Looks like this.
Paragraphs
LARGE PARAGRAPH
Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.
PARAGRAPH
Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.
Small PARAGRAPH
Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.
Extra Small PARAGRAPH
Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.
Decorative
Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.
Text inline Link
Rich Text
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
- Lorem ipsum
- Lorem ipsum dolor sit amet
Grid System
Use this Grid for creating new layouts. You can combine this percentages with each other for creating uniq layouts.
20%
25%
33%
50%
67%
80%
100%
Common Grid Layouts
Structure of the Grid System:
Parent div block with class "Grid"
Children blocks with class "Grid Item". Each of this classes has predefine combo classes with percentage: 20, 25, 33, 50, 67, 80 and 100.
Main principle of this Grid is wrapping Grid Item to next line when it fills 100%. So, you can have in one line different combo layouts like: 50:50, 25:25:25:25, 33:33:33 etc.
If you struggling with combo classes you can read more about it.
20%
80%
100%
33%
33%
33%
33%
67%
80%
20%
25%
25%
25%
25%
Spacers System
Use this additional spaces if needed.
You can easily choose predefined space just input combo class that you need or create your own.
8px
12px
16px
20px
24px
32px
40px
48px
56px
64px
72px
80px
88px
96px
112px
128px
184px
Why Revoluti.o?
Nam gravida congue posuere pretium dignissim nullael elit aenean quis malesuada aliquet feugiat orci nunc sed.
800+
Users
4+
years on the market
32
saves by weeek
324
workflows
Get instant access to our platform and all its features, with no credit card required
Nam gravida congue posuere pretium dignissim nullael elit aenean quis malesuada aliquet feugiat orci nunc sed semper duis turpis id enim sit consectur artmer.
Pricing Details
Start using today and save hours from the process.
Nam gravida congue posuere pretium dignissim nullael elit
Testimonials
What our clients say
Nam gravida congue posuere pretium dignissim nullael elit
Donec sed pretium ante, et suscipit elit. Vivamus commodo dui tellus, id imperdiet nulla tincidunt eu. Nullam elit turpis, aliquam in varius accumsan, auctor id ligula.
.webp)
Donec sed pretium ante, et suscipit elit. Vivamus commodo dui tellus, id imperdiet nulla tincidunt eu. Nullam elit turpis, aliquam in varius accumsan, auctor id ligula.
Donec sed pretium ante, et suscipit elit. Vivamus commodo dui tellus, id imperdiet nulla tincidunt eu. Nullam elit turpis, aliquam in varius accumsan, auctor id ligula.
Donec sed pretium ante, et suscipit elit. Vivamus commodo dui tellus, id imperdiet nulla tincidunt eu. Nullam elit turpis, aliquam in varius accumsan, auctor id ligula.
Donec sed pretium ante, et suscipit elit. Vivamus commodo dui tellus, id imperdiet nulla tincidunt eu. Nullam elit turpis, aliquam in varius accumsan, auctor id ligula.
FAQ’s
Nam gravida congue posuere pretium dignissim nullaelit aenean quis malesuada aliquet feugiat orci
Does Revoluti.o offers a free trial?
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.
Do you offer discounts?
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.
What is your refund policy?
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.
Do you have a features roadmap?
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.
What is your refund policy?
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.
Do you have open positions?
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.
