Menu
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
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
Heading 1
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.
Rich text heading
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 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.
Rich text heading
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 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
icon-small
icon-medium
icon-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large
Form example
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
