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

heading-large

heading-large

heading-medium

heading-medium

heading-small

heading-small

heading-xsmall

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

  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

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

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

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

COMPONENT DIVIDER

Built using the Client First naming convention

Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida.
Read more

Built using the Client First naming convention

Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida.
Read more

Built using the Client First naming convention

Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida.
Read more
COMPONENT DIVIDER

Built using the Client First naming convention

Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida. Neque lacinia posuere. Etiam auctor facilisis augue.
Read more

Built using the Client First naming convention

Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida. Neque lacinia posuere. Etiam auctor facilisis augue.
Read more
COMPONENT DIVIDER
COMPONENT DIVIDER

Frequently Asked

Phasellus a nulla in neque lacinia posuere, etiam auctor facilisis

Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa. Pellentesque purus eget, imperdiet turpis.

A nulla in neque lacinia posuere, etiam auctor facilisis

Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa.

Neque lacinia posuere, etiam auctor facilisis

Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis.

Phasellus a nulla in neque lacinia posuere, etiam auctor facilisis

Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa.

COMPONENT DIVIDER

Frequently Asked

Phasellus a nulla in neque lacinia posuere, etiam auctor facilisis

Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa.

Neque lacinia posuere, etiam auctor facilisis

Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis.

A nulla in neque lacinia posuere, etiam auctor facilisis

Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa.

Phasellus a nulla in neque lacinia posuere, etiam auctor facilisis

Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa.

COMPONENT DIVIDER
Meet some of our happy clients
COMPONENT DIVIDER
Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida. Donec dapibus iaculis
Zion Williams
CFO at Brelgoa
Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida. Donec dapibus iaculis
Lisa James
Designer at Webflow
Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida. Donec dapibus iaculis
Luke Twain
CCO at Notion
COMPONENT DIVIDER
Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida.
Zion Williams
Airtable
Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida.
Luke Twain
CCO at Notion
Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida.
Lisa James
Webflow
COMPONENT DIVIDER
Donec ultricies mauris vitae lectus bibendum, id auctor diam consequat. Etiam nec nisl eu tellus.
Zion Williams
Airtable
Donec ultricies mauris vitae lectus bibendum, id auctor diam consequat. Etiam nec nisl eu tellus.
Lisa James
Designer at Webflow
Donec ultricies mauris vitae lectus bibendum, id auctor diam consequat. Etiam nec nisl eu tellus.
Malik Usman
CTO, Willify
COMPONENT DIVIDER
Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida.
Zion Williams
Airtable
Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur.
Zion Williams
Airtable
Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa.
Tamara Dillon
Google
Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida.
Tamara Dillon
Google
COMPONENT DIVIDER
Donec ultricies mauris vitae lectus bibendum, id auctor diam consequat. Etiam nec nisl eu tellus. Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida. Donec dapibus iaculis
Lisa James
Designer at Webflow
COMPONENT DIVIDER

Our precious

Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida. Donec dapibus iaculis urna malesuada dignissim.
Read more
COMPONENT DIVIDER

Contact us

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
COMPONENT DIVIDER
finsweet Image 1

Visit us in person or call our numbers below

Address
76 Turkey Pen Lane,
36104 Montgomery, Alabama
Contact
Phone one: 334-571-8532
Mobile: 334-657-4825
COMPONENT DIVIDER

Contact our team or visit us

Phasellus a nulla in neque lacinia posuere. Etiam auctor facilisis augue vel gravida. Donec dapibus
Email access Icon
info@fs-layouts.webflow.io
Phone Icon
773-8392-000
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
COMPONENT DIVIDER

Contact us

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
COMPONENT DIVIDER

Flexible and functional

Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu.

Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa. Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis.

Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa. Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis.

Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu.

COMPONENT DIVIDER

Our company

Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa. Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis.

Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullam

Fusce at enim quis neque viverra convallis. Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu, ullamcorper ullamcorper massa. Pellentesque in nisi aliquet, pellentesque purus eget, imperdiet turpis. Fusce at enim quis neque viverra convallis.

  • Incredibly flexible
  • All the elements you will ever need

Vivamus ut elementum leo, eget tempus nisl. Sed viverra enim ac turpis posuere consectetur. Sed enim nibh, consequat vitae lacus eu.

COMPONENT DIVIDER
FsLayouts raises $100m in Series B, led by Accel and Silversmith. Read more
COMPONENT DIVIDER
FsLayouts raises $100m in Series B, led by Accel and Silversmith. Read more
COMPONENT DIVIDER
COMPONENT DIVIDER
COMPONENT DIVIDER
COMPONENT DIVIDER
COMPONENT DIVIDER