Buttons

Icons

Form

Images

Effects

Need help?💡 Ask the GridUp Team

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.

Client-First Docs

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

List item
List item

All Unordered Lists

List item
List item

All Ordered Lists

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

text-lineheight-tall

text-lineheight-normal

text-lineheight-short

text-lineheight-xshort

text-lineheight-none

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

text-style-allcaps

text-style-nowrap

text-style-quote

text-style-link

text-style-2lines

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

tagline-text

Text Alignment

text-align-left

text-align-center

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

List item
List item
List item
‍

This is a block quote

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

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

headline-color-primary

headline-color-[add color]

headline-color-{add color}

Text Colors

text-color-dark

text-color-light

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

button

is-alternate

Button

button

is-alternate

is-button-small

Button

Button Secondary

button-secondary

Learn More

button-secondary

is-button-small

Button

button-secondary

is-alternate

Button

button-secondary

is-alternate

is-button-small

Button

Button Tertiary

button-tertiary

Button

button-tertiary

is-button-small

Button

button-tertiary

is-alternate

Button

button-tertiary

is-alternate

is-button-small

Button

Button Link

button-link

Button

button-link

is-button-small

Button

button-link

is-alternate

Button

button-link

is-alternate

is-button-small

Button

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.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-[custom]

Form

Form Elements

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