Front end Library
Revenir à l'accueil

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

grey 050
grey 100
grey 200
grey 300
grey 400
grey 500
grey 600
grey 700
grey 800
grey 900

Blue

blue 050
blue 100
blue 200
blue 300
blue 400
blue 500
blue 600
blue 700
blue 800
blue 900

Cyan

cyan 050
cyan 100
cyan 200
cyan 300
cyan 400
cyan 500
cyan 600
cyan 700
cyan 800
cyan 900

Green

green 050
green 100
green 200
green 300
green 400
green 500
green 600
green 700
green 800
green 900

Red

red 050
red 100
red 200
red 300
red 400
red 500
red 600
red 700
red 800
red 900

Grape

grape 050
grape 100
grape 200
grape 300
grape 400
grape 500
grape 600
grape 700
grape 800
grape 900

Sunny

sunny 050
sunny 100
sunny 200
sunny 300
sunny 400
sunny 500
sunny 600
sunny 700
sunny 800
sunny 900

Coral

coral 050
coral 100
coral 200
coral 300
coral 400
coral 500
coral 600
coral 700
coral 800
coral 900

Barbie

barbie 050
barbie 100
barbie 200
barbie 300
barbie 400
barbie 500
barbie 600
barbie 700
barbie 800
barbie 900

Nature

nature 050
nature 100
nature 200
nature 300
nature 400
nature 500
nature 600
nature 700
nature 800
nature 900

Gradients

Hero text clipping
Peach
Sunrise
Sunset
Twilight
Blue hour
Midnight
Zen
Country Side
Blue
Cyan
Grape
Coral
Red

Other colors

White

Typography

The primary colour for all typography on your website is grey-800.

Hero headings <h1 h2 h3 h4 h5 h6>

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.
Custom titles
Custom title size 1
The quick brown fox jumps over the lazy dog.
Custom title size 2
The quick brown fox jumps over the lazy dog.
Custom title size 3
The quick brown fox jumps over the lazy dog.
Custom title size 4
The quick brown fox jumps over the lazy dog.
Custom title size 5
‍The quick brown fox jumps over the lazy dog.
Custom title size 6
‍The quick brown fox jumps over the lazy dog.
Style variants
font weight semi-bold
font weight medium
font weight regular
font capitals
font underline
font line through
Align variants
font align left
font centered
font align right
font align right
Paragraph

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.

Rich text

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 a figure/image caption

This is an ordered list:

  1. Fully responsive
  2. Cloneable
  3. 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."
Text Link
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

Logo colored - hero
Logo black
Logo white
Logo icon colored
Logo icon black
Logo white

Buttons default size

Button Text
Js button
Button blue light - hero
Button Text
Js button
Button blue light with icon
Button Text
Js button
Button blue
Button Text
Js button
Button blue with icon
Button Text
Js button
Button cyan light
Button Text
Js button
Button cyan light with icon
Button Text
Js button
Button cyan
Button Text
Js button
Button cyan with icon
Button Text
Js button
Button green light
Button Text
Js button
Button green light with icon
Button Text
Js button
Button green
Button Text
Js button
Button green with icon
Button Text
Js button
Button coral
Button Text
Js button
Button grape
Button Text
Js button
Button red light
Button Text
Js button
Button red light with icon
Button Text
Js button
Button red
Button Text
Js button
Button red with icon

Buttons large size

Button Text
Js button
Button blue light large
Button Text
Js button
Button blue large
Button Text
Js button
Button cyan light large
Button Text
Js button
Button cyan large
Button Text
Js button
Button green light large
Button Text
Js button
Button green large
Button Text
Js button
Button red light large
Button Text
Js button
Button red large

Buttons Icon

Button icon plus blue light
Button icon plus
Button cyan light plus
Button cyan plus
Button green light plus
Button green plus
Button red light trash
Button red trash
Button arrow left
Button arrow left

Buttons text

Social Share

Facebook
share / profil link
Twitter
share / profil link
LinkedIn
share / profil link
Instagram
profil link
Youtube
profil link
Social profils wrapper

Filters system (off)

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

Card type 1
Title block

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.

Title block

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.

Title block

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.

Title block

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.

Title block

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.

Title block

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.

Go to Homepage