Styleguide

Client-First Version 1.0
HTML Heading Tags

h1
Test Heading

h2
Test Heading

h3
Test Heading

h4
Test Heading

Heading 5
Test Heading
Heading 6
Test Heading
Heading Classes

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall

HTML Text Tags

All Paragraphs (HTML-TAG)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

All Links (HTML-TAG)
All Quotes (HTML-TAG)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,
Text Classes

text-size-xxlarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text-size-xlarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text-size-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text-size-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

text-size-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

text-size-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

text-size-tiny
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

text-style-strikethrough

text-style-italic

text-style-muted
text-style-allcaps
text-style-caption
text-style-link
text-style-quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,
text-style-nowrap
text-style-2lines
text-style-3lines
Font Weights
text-weight-xbold
text-weight-bold
text-weight-semibold
text-weight-medium
text-weight-normal
text-weight-light
Text alignments
text-align-left
text-align-center
text-align-right
Text Colors
text-color-white
text-color-lightgrey
text-color-pink
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  • This is a list item
  • This is a list item
  • This is a list item
  • This is a list item

This is a link.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Placeholder
This is a placeholder image
Color Palette
Text Color
Background 1
Background 2
Pink
Button Purple
Button Salmon
Border
Backgrounds
background-color-secondary
background-color-black
Buttons & Links
Icon Sizes
Finsweet logoFinsweet logoFinsweet logo
Icons 1x1
Finsweet logoFinsweet logoFinsweet logo
Social Media Icons
Twitter icon
Facebook icon
Instagram icon
LinkedIn icon
Slack icon
Dribbble icon
Pinterest icon
YouTube icon
SoundCloud icon
Webflow Elements

List

  • Lorem ipsum dolor sit amet, consectetur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

Form

Awesome, you subscribed!
Error! Please try again.
HTML Heading Tags

h1
Test Heading

h2
Test Heading

h3
Test Heading

h4
Test Heading

Heading 5
Test Heading
Heading 6
Test Heading
Heading Classes

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall

HTML Text Tags

All Paragraphs (HTML-TAG)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

All Links (HTML-TAG)
All Quotes (HTML-TAG)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,
Text Classes

text-size-xxlarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text-size-xlarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text-size-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text-size-medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

text-size-regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

text-size-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

text-size-tiny
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

text-style-strikethrough

text-style-italic

text-style-muted
text-style-allcaps
text-style-caption
text-style-link
text-style-quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,
text-style-nowrap
text-style-2lines
text-style-3lines
Font Weights
text-weight-xbold
text-weight-bold
text-weight-semibold
text-weight-medium
text-weight-normal
text-weight-light
Text alignments
text-align-left
text-align-center
text-align-right
Text Colors
text-color-white
text-color-lightgrey
text-color-pink
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  • This is a list item
  • This is a list item
  • This is a list item
  • This is a list item

This is a link.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Placeholder
This is a placeholder image
Color Palette
Text Color
Background 1
Background 2
Pink
Button Purple
Button Salmon
Border
Backgrounds
background-color-secondary
background-color-black
Buttons & Links
Icon Sizes
Finsweet logoFinsweet logoFinsweet logo
Icons 1x1
Finsweet logoFinsweet logoFinsweet logo
Social Media Icons
Twitter icon
Facebook icon
Instagram icon
LinkedIn icon
Slack icon
Dribbble icon
Pinterest icon
YouTube icon
SoundCloud icon
Webflow Elements

List

  • Lorem ipsum dolor sit amet, consectetur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

Form

Awesome, you subscribed!
Error! Please try again.