GridUp Style Guide

Version 3.1

The GridUp Style Guide is our contribution to make your daily Webflow life easier. It is the central library of your brand guidelines and classes for Webflow and is based on the {finsweet Client-first Style System. This way, you can easily access all styles and structures in one place and collaborate with your entire team based on a consistent source.

The Style Guide is linked to the Gridup Wizard, so you can find all your settings here after the initial setup. If you want to make overall adjustments in the process of your project, you can easily change them centrally here at any time. 

Page Structure
Page structure classes
page-wrapper
Lorem ipsum
main-wrapper
Lorem ipsum
section-[name]
Lorem ipsum
global-padding
Lorem ipsum
container-[size]
Lorem ipsum
padding-section-[size]
Lorem ipsum
Typography
HTML Headings
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
Heading Classes
heading-style-h1

Heading 1

heading-style-h2

Heading 2

heading-style-h3

Heading 3

heading-style-h4

Heading 4

heading-style-h5

Heading 5

heading-style-h6

Heading 6

Other HTML Tags
All Paragraphs

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

All Links
All Links
All Unordered Lists
  • List item

  • List item

All Unordered Lists
  • List item

  • List item

All Ordered Lists
  1. List item

  2. List item

  3. List item

All Block Quotes
Block Quote
Text Sizes
text-size-gigantic

Lorem ipsum

text-size-xxhuge

Lorem ipsum

text-size-xhuge

Lorem ipsum

text-size-huge

Lorem ipsum

text-size-xxlarge

Lorem ipsum

text-size-xlarge

Lorem ipsum

text-size-large

Lorem ipsum

text-size-medium

Lorem ipsum

text-size-regular

Lorem ipsum

text-size-small

Lorem ipsum

text-size-tiny

Lorem ipsum

Text Weights
text-weight-black
text-weight-black (900)
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-large (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Text Line Heights
text-lineheight-xtall
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
text-lineheight-tall
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
text-lineheight-normal
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
text-lineheight-short
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
text-lineheight-xshort
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
text-lineheight-none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text Letter Spacings
text-letterspacing-xwide
A Lorem ipsum dolor sit amet
text-letterspacing-wide
A Lorem ipsum dolor sit amet
text-letterspacing-normal
A Lorem ipsum dolor sit amet
text-letterspacing-tight
A Lorem ipsum dolor sit amet
text-letterspacing-xtight
A Lorem ipsum dolor sit amet
Text Styles
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-3lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-muted
text-style-muted
tagline-text
tagline-text
Text Alignment
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich Text
text-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 link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
    ‚Äć
This is a block quote
This is a Placeholder Image
Colors
Background Colors
background-color-dark
background-color-light
background-color-white
background-color-primary
background-color-[add color]
Border Colors
border-color-dark
border-color-light
Button Colors
button-color-dark
button-color-dark-hover
button-color-light
button-color-light-hover
button-color-tertiary
button-color-tertiary-hover
button-color-tertiary
button-color-tertiary
Background Utility Colors
background-color-success
background-color-warning
accessible-outline-color
background-overlay
Background Gradient & Pattern Colors
background-color-gradient1
background-color-pattern1
Headline Colors
headline-color-dark
headline-color-dark
headline-color-light
headline-color-light
headline-color-primary
headline-color-primary
headline-color-[add color]
headline-color-{add color}
Text Colors
text-color-dark
text-color-dark
text-color-light
text-color-light
text-color-primary
text-color-primary
text-color-[add color]
text-color-{add color}
Tagline Color
tagline-color-dark
tagline-color
tagline-color-light
tagline-color
Buttons
Button
button
is-button-small
button
is-alternate
button
is-alternate
is-button-small
Button Secondary
button-secondary
button-secondary
is-button-small
button-secondary
is-alternate
button-secondary
is-alternate
is-button-small
Button Tertiary
button-tertiary
button-tertiary
is-button-small
button-tertiary
is-alternate
button-tertiary
is-alternate
is-button-small
Button Link
button-link
button-link
is-button-small
button-link
is-alternate
button-link
is-alternate
is-button-small
Icons
Sizes

icon-xxsmall

icon-xsmall

icon-small

icon-medium

icon-large

icon-xlarge

icon-[custom]

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-[custom]

Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.
Want to learn some tips on using HTML embeds for icons?
Watch Tutorial

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-[custom]

Form
Form Elements
field-label
form-input
field-label
form-input
is-text-area
field-label
form-input
is-select-input
form-checkbox
form-checkbox-icon
form-checkbox-label
form-radio
form-radio-icon
form-radio-label
button-form
button-form
is-button-small
button-form
is-alternate
button-form
is-alternate
is-button-small
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Images
Sizes
image-wrapper-1x1
image-wrapper-4x3
image-wrapper-3x2
image-wrapper-16x9
image-wrapper-[custom]
Effects
Box Shadows
‚ÄćShadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
Spacing System
Margin
Beschreibung ...
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-[custom]
Margin alignment
Beschreibung ...
margin-top
margin-[size]
margin-bottom
margin-[size]
margin-left
margin-[size]
margin-right
margin-[size]
margin-vertical
margin-[size]
margin-horizontial
margin-[size]
Padding
Beschreibung ...
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-[custom]
Padding alignment
Beschreibung ...
padding-top
padding-[size]
padding-bottom
padding-[size]
padding-left
padding-[size]
padding-right
padding-[size]
padding-vertical
padding-[size]
padding-horizontal
padding-[size]
Section alignment
Beschreibung ...
padding-section
padding-section-small
padding-section-medium
padding-section-large
Container System
Container sizes
container-large
container-medium
container-small
Max width
Test
max-width-full
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Max width full
max-width-full-tablet
Lorem ipsum
max-width-full-mobile-landscape
Lorem ipsum
max-width-full-mobile-portrait
Lorem ipsum
Useful classes
Hide and show classes
hide
Lorem ipsum
hide-tablet
Lorem ipsum
hide-mobile-landscape
Lorem ipsum
hide-mobile-portrait
Lorem ipsum
show
Lorem ipsum
show-tablet
Lorem ipsum
show-mobile-landscape
Lorem ipsum
show-mobile-portrait
Lorem ipsum
Utility classes
spacing-clean
Lorem ipsum
z-index-1
Lorem ipsum
z-index-2
Lorem ipsum
align-center
Lorem ipsum
div-square
Lorem ipsum
clickable-off
Lorem ipsum
layer
Lorem ipsum
clickable-on
Lorem ipsum
overflow-hidden
Lorem ipsum
overflow-scroll
Lorem ipsum
overflow-auto
Lorem ipsum
margin-top-auto
Lorem ipsum