Headings

heading-style-h1

solette

heading-style-h2

solette

heading-style-h3

solette

heading-style-h4

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

heading-style-h5

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

heading-style-h6

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

subheading-style-h1

solette

subheading-style-h2

solette

subheading-style-h3

solette

text-size-large

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.

text-size-medium

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.

text-size-regular

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.

text-size-small

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.

text-size-tiny

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.

text-size-eyebrow

Eyebrow

text-style-italic

text-style-allcaps

text-align-left

text-align-center

text-align-right

Background Colors

Manage recurring background colors.

background-color-black

background-color-white

background-color-green

background-color-darkgrey

background-color-lightgrey

Text Colors

text-color-white

text-color-black

text-color-burgundy

text-color-darkgrey

text-color-brown

text-color-darkgrey

text-color-blue

text-color-green

Buttons

Button combo class system.

Button Sizes

button

Button

button

is-white

Button

Button Variants

button

is-secondary

Button

button

is-link

Button

Structure

Defined and flexible core structure we can use on all or most pages.

page-wrapper

main-wrapper

padding-global

container-large

container-medium

container-small

sHADOWS

Utility shadows mostly used on different cards

hide

Utility Classes

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

hide

hide-tablet

hide-landscape

hide-portrait

show-tablet

show-landscape

show-portrait

z-index-1

z-index-2

z-index-3

opacity-80

opacity-60

opacity-40

opacity-20

img-cover

Words ClassES

Utility classes to animate each word on scroll to view.

is-word

is-1

is-word

is-2

is-word

is-3

is-word

is-4

is-word

is-5

is-word

is-6

is-word

is-7

is-word

is-8

is-word

is-9

is-word

is-10

is-word

is-11

is-word

is-12

Margins

Unified spacer system for the project.

margin-bottom-4

margin-bottom-8

margin-bottom-12

margin-bottom-16

margin-bottom-20

margin-bottom-24

margin-bottom-28

margin-bottom-32

margin-bottom-40

margin-bottom-48

margin-bottom-56

margin-bottom-64

margin-bottom-72

margin-bottom-80

margin-bottom-96

margin-bottom-104

margin-bottom-120

margin-bottom-144

margin-top-4

margin-top-8

margin-top-12

margin-top-16

margin-top-20

margin-top-24

margin-top-28

margin-top-32

margin-top-40

margin-top-48

margin-top-56

margin-top-64

margin-top-72

margin-top-80

margin-top-96

margin-top-104

margin-top-120

margin-top-144