Style Guide
Welcome to the style guide. Here you will find information and references for font sizing, spacing, colours and various Elementor widgets.
Colours
Primary
Secondary
Accent
Text
Light Grey
White
Typography
H1 - A Visual Type Scale
H2 - A Visual Type Scale
H3 - A Visual Type Scale
H4 - A Visual Type Scale
H5 - A Visual Type Scale
H6 - A Visual Type Scale
What looked like a small patch of purple grass, above five feet square, was moving across the sand in their direction.
When it came near enough he perceived that it was not grass; there were no blades, but only purple roots. The roots were revolving, for each small plant in the whole patch, like the spokes of a rimless wheel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh tortor id aliquet lectus proin nibh nisl. Elit at imperdiet dui accumsan sit amet nulla. Pharetra massa massa ultricies mi. Adipiscing commodo elit at imperdiet dui accumsan sit amet nulla. Aenean et tortor at risus viverra. Placerat in egestas erat imperdiet sed. Sed enim ut sem viverra aliquet eget sit amet. Enim neque volutpat ac tincidunt vitae semper. Odio facilisis mauris sit amet massa vitae tortor. Nunc id cursus metus aliquam. Lectus proin nibh nisl condimentum. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Leo duis ut diam quam.
Malesuada fames ac turpis egestas integer eget. Eleifend mi in nulla posuere sollicitudin. Non sodales neque sodales ut etiam sit amet nisl. Bibendum enim facilisis gravida neque. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Dui id ornare arcu odio ut sem nulla. Commodo elit at imperdiet dui accumsan sit. Amet risus nullam eget felis eget nunc. Phasellus faucibus scelerisque eleifend donec. Amet massa vitae tortor condimentum lacinia quis. Varius sit amet mattis vulputate. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Vitae justo eget magna fermentum iaculis. Orci eu lobortis elementum nibh. Tellus id interdum velit laoreet id donec. Habitant morbi tristique senectus et netus et malesuada fames ac.
Buttons
Forms
Flex grow same size containers
This is the perfect solution for wrapping, because you never have to use px, it’s the same on desktop, tablet and mobile and you can even change the element gap from 20 to 30px. Your backgrounds containers should be on boxed. Values used: 1120 for ultra wide & desktop, 80% for laptop, tablet extra, tablet, mobile extra, then mobile on 90%. Make sure to add the extra responsive breakpoints otherwise it’s not as my example.
- 13.5%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
10
11
- 16.5%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
- 20%
- 35%
- 100%
1
2
3
4
5
6
7
- 25%
- 35%
- 100%
1
2
3
4
5
- 35%
- 100%
- 100%
1
2
3
Flex grow different size containers
This is a working solution for 12 column designs (in the 1140/1120 grid) where the containers have different widths. Also on tablet and mobile I have put everything on 100%, but you can ofcourse change this according to your design.