Style Guide

Javy Coffee

HTML Headings

Delicious Coffee

Heading 1

Delicious Coffee

Heading 2

Delicious Coffee

Heading 3

Delicious Coffee

Heading 4
Delicious Coffee
Heading 5
Delicious Coffee
Heading 6

Heading classes

heading-style-h1

heading-style-h2

heading-style-h3

heading-style-h4

heading-style-h5

HTML Classes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

All Paragraphs (HTML Tag)
Text Link
All Links (HTML Tag)
Block Quote
Block quote (HTML Tag)
  • No bullet list

  • No bullet list

  • Unordered list

  • Unordered list

  1. Ordered list

  2. Ordered list

Text sizes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

text-size-tiny

Text weights

Phasellus a nulla in neque lacinia posuere.
text-weight-bold
Phasellus a nulla in neque lacinia posuere.
text-weight-semibold
Phasellus a nulla in neque lacinia posuere.
text-weight-medium
Phasellus a nulla in neque lacinia posuere.
text-weight-normal
Phasellus a nulla in neque lacinia posuere.
text-weight-light

Text styles

Phasellus a nulla in neque lacinia posuere.
text-style-italic
Phasellus a nulla in neque lacinia posuere.
text-style-strikethrough
Phasellus a nulla in neque lacinia posuere.
text-style-allcaps
Phasellus a nulla in neque lacinia posuere.
text-style-muted
Phasellus a nulla in neque lacinia posuere.
text-style-nowrap
Phasellus a nulla in neque lacinia posuere.
text-style-quote
Click to see more
text-style-link

Text aligns

Phasellus a nulla in neque lacinia posuere.
text-align-left
Phasellus a nulla in neque lacinia posuere.
text-align-center
Phasellus a nulla in neque lacinia posuere.
text-align-right

Rich text

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

  • Bullet point one
  • Bullet point two

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
finsweet Image 6
Image caption

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

  1. Numbered list one
  2. Numbered list two
Rich text heading
Rich text heading

Colors

color-original-dark
color-original-light
color-vanilla-dark
color-vanilla-light
color-mocha-dark
color-mocha-light
color-caramel-dark
color-caramel-light

Background colors

bg-primary-black
bg-primary-gold
bg-primary-cosmic
bg-primary-cream
bg-primary-white

Background colors

bg-gd-original
bg-gd-vanilla
bg-gd-mocha
bg-gd-decaf
bg-gd-caramel
bg-gd-hero-01
bg-gd-hero-01
bg-gd-hero-01

Text colors

Phasellus a nulla in neque
text-color-primary
Phasellus a nulla in neque
text-color-black
Phasellus a nulla in neque
text-color-grey
Phasellus a nulla in neque
text-color-white

Icon classes

finsweet Image 2
icon-small
finsweet Image 2
icon-medium
finsweet Image 2
icon-large
finsweet Image 2
icon-1x1-small
finsweet Image 2
icon-1x1-medium
finsweet Image 2
icon-1x1-large

Icons

Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.

icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large

Margin

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
margin-top
margin-right
margin-bottom
margin-left
margin-horizontal
margin-vertical
margin-0-all

Padding

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
padding-top
padding-right
padding-bottom
padding-left
padding-horizontal
padding-vertical
padding-0-all
padding-section-small
padding-section-medium
padding-section-large

Max width

max-width-xxsmall
max-width-xsmall
max-width-small
max-width-medium
max-width-large
max-width-xlarge
max-width-xxlarge
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait

Useful globals

Useful utility systems

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

hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex