Introduction
Welcome to the style guide for your website. You can use this page to quickly make changes to things such as fonts, text sizes, colors, buttons, and more. These changes will then be applied across your website.
To ensure your site is responsive and adapts to all devices, some elements will have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are slightly different to those on mobile breakpoints.
Your style guide is not viewable to the public, and can only be accessed with a password.
If you have any questions about this style guide or your website in general, then please do not hesitate to email me :
myriam@jedha.co
Colors
Grey
Blue
Cyan
Green
Red
Grape
Sunny
Coral
Barbie
Nature
Gradients
Other colors
Typography
The primary colour for all typography on your website is grey-800.
Hero Heading 1
The quick brown fox jumps over the lazy dog.
Hero Heading 2
The quick brown fox jumps over the lazy dog.
Hero Heading 3
The quick brown fox jumps over the lazy dog.
Hero Heading 4
The quick brown fox jumps over the lazy dog.
Hero Heading 5
The quick brown fox jumps over the lazy dog.
Hero Heading 6
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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.
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.
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.
This is a H2 heading
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.
This is a H3 heading
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.
This is a H4 heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is a H5 heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is a H6 heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
This is an ordered list:
- Fully responsive
- Cloneable
- Swap in with your client's styles
This an unordered list:
- Fully responsive
- Cloneable
- Swap in with your client's styles
Below is what block quotes will look like in your blog posts -
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
Block Quote
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.
Logos
Global paddings
Global padding 4px > pad4
Global padding 8px > pad8
Global padding 16px > pad16
Global padding 24px > pad24
Global padding 32px > pad32
Global padding 40px > pad40
Global padding 48px > pad48
Global padding 56px > pad56
Global padding 64px > pad64
Global padding 72px > pad72
Global padding 80px > pad80
Top-bottom paddings
Top-bottom padding 4px > pad4-tb
Top-bottom padding 8px > pad8-tb
Top-bottom padding 16px > pad16-tb
Top-bottom padding 24px > pad24-tb
Top-bottom padding 32px > pad32-tb
Top-bottom padding 40px > pad40-tb
Top-bottom padding 48px > pad48-tb
Top-bottom padding 56px > pad56-tb
Top-bottom padding 64px > pad64-tb
Top-bottom padding 72px > pad72-tb
Top-bottom padding 80px > pad80-tb
Left-right paddings
Left-right padding 4px > pad4-lr
Left-right padding 8px > pad8-lr
Left-right padding 16px > pad16-lr
Left-right padding 24px > pad24-lr
Left-right padding 32px > pad32-lr
Left-right padding 40px > pad40-lr
Left-right padding 48px > pad48-lr
Left-right padding 56px > pad56-lr
Left-right padding 64px > pad64-lr
Left-right padding 72px > pad72-lr
Left-right padding 80px > pad80-lr
Global Margins
Global margin 4px > mar4
Global margin 8px > mar8
Global margin 16px > mar16
Global margin 24px > mar24
Global margin 32px > mar32
Global margin 40px > mar40
Global margin 48px > mar48
Global margin 56px > mar56
Global margin 64px > mar64
Global margin 72px > mar72
Global margin 80px > mar80
Top-bottom margins
Top-bottom margin 4px > mar4-tb
Top-bottom margin 8px > mar8-tb
Top-bottom margin 16px > mar16-tb
Top-bottom margin 24px > mar24-tb
Top-bottom margin 32px > mar32-tb
Top-bottom margin 40px > mar40-tb
Top-bottom margin 48px > mar48-tb
Top-bottom margin 56px > mar56-tb
Top-bottom margin 64px > mar64-tb
Top-bottom margin 72px > mar72-tb
Top-bottom margin 80px > mar80-tb
Top-bottom margin 88px > mar88-tb
Left-right margins
Left-right margin 4px > mar4-lr
Left-right margin 8px > mar8-lr
Left-right margin 16px > mar16-lr
Left-right margin 24px > mar24-lr
Left-right margin 32px > mar32-lr
Left-right margin 40px > mar40-lr
Left-right margin 48px > mar48-lr
Left-right margin 56px > mar56-lr
Left-right margin 64px > mar64-lr
Left-right margin 72px > mar72-lr
Left-right margin 80px > mar80-lr
Right margins
Right margin 4px > mar4-rig
Right margin 8px > mar8-rig
Right margin 16px > mar16-rig
Right margin 24px > mar24-rig
Right margin 32px > mar32-rig
Right margin 40px > mar40-rig
Right margin 48px > mar48-rig
Right margin 56px > mar56-rig
Right margin 64px > mar64-rig
Right margin 72px > mar72-rig
Right margin 80px > mar80-rig
Bottom margins
Margin bottom 4px > mar4-bot
Margin bottom 8px > mar8-bot
Margin bottom 16px > mar16-bot
Margin bottom 24px > mar24-bot
Margin bottom 32px > mar32-bot
Margin bottom 40px > mar40-bot
Margin bottom 48px > mar48-bot
Margin bottom 56px > mar56-bot
Margin bottom 64px > mar64-bot
Margin bottom 72px > mar72-bot
Margin bottom 80px > mar80-bot
Margin bottom 88px > mar88-bot
Margin bottom 96px > mar96-bot
Margin bottom 104px > mar104-bot
Margin bottom 112px > mar112-bot
Margin bottom 120px > mar120-bot
Components
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.
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.
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.
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.
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.
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.