Styleguides

Client-first Version 1.0

HTML Headings

Finsweet heading

Heading 1

Finsweet heading

Heading 2

Finsweet heading

Heading 3

Finsweet heading

Heading 4

Finsweet heading

Heading 5

Finsweet heading

Heading 6

Heading classes

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall

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

Ordered list
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-xbold

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

Phasellus a nulla in neque lacinia posuere.

text-style-2lines

Phasellus a nulla in neque lacinia posuere.

text-style-3lines

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 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemegntum tristique. Duis cursus mi quis viverra.

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 elemegntum tristique. Duis cursus mi quis viverra.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique."

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. Duis cursus mi quis viverra.

Numbered list one
Numbered list two

Rich text heading

Rich text info

Rich text heading 2

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 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemegntum tristique. Duis cursus mi quis viverra.

Rich text heading 3

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique."

Rich text heading

Numbered list one
Numbered list two

Rich text heading

Colors

primary

primary-hover

black

lightgrey

white

turquoise

red

Background colors

background-color-primary

background-color-black

background-color-lightgrey

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

Buttons

Icon classes

icon-small

icon-medium

icon-large

icon-1x1-small

icon-1x1-medium

icon-1x1-large

Social icons

Form example

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

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

Spacers

Spacer elements using the 8-pt system to give sections more room to breathe.

16 px

24 px

32 px

48 PX

64 PX

80 PX

96 PX

128 PX

Grids

Different grid layouts to use across your site

4 Grid

3 Grid

2 Grid

2-1 Grid

1-2 Grid

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

Styleguides

HTML Headings

Finsweet heading

Finsweet heading

Finsweet heading

Finsweet heading

Finsweet heading

Finsweet heading

Heading classes

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall

HTML Classes

Text sizes

Text weights

Text styles

Text aligns

Rich text

Rich text heading

Rich text heading

Rich text heading

Rich text heading

Rich text heading

Rich text info

Rich text heading 2

Rich text heading 3

Rich text heading

Rich text heading

Rich text heading

Colors

Background colors

Text colors

Buttons

Icon classes

Social icons

Form example

Margin

Padding

Spacers

16 px

24 px

32 px

48 PX

64 PX

80 PX

96 PX

128 PX

Grids

4 Grid

3 Grid

2 Grid

2-1 Grid

1-2 Grid

Max width

Useful globals

Let's talk.