G

3D is loading
0
%

Styleguides

Table of content

Follow → Create → Grow

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

Finsweet heading

heading-style-h1

Finsweet heading

heading-style-h2

Finsweet heading

heading-style-h3

Finsweet heading

heading-style-h4

Finsweet heading

heading-style-h5

Finsweet heading

heading-style-h6

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-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

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

Heading 2

Heading 3

Heading 4

Heading 5

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 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

Rich text. Portfolio

Heading 2

Heading 3

Paragraph text

Heading 4

Paragraph text

Heading 5

Paragraph text

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 position stretched
finsweet Image 6
Image position centered small
finsweet Image 6
Text position right
finsweet Image 6
Text position left

‍

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

Black
#111
White
#fff
Grey
#777
Accent
#f2ff37
Accent hover
#79ff36

Background colors

background-color-black
background-color-white
background-color-yellow

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

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

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

Text Link