Styleguide

Client-first Version 1.0

HTML heading tags

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

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 sizes

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 weights

text-weight-xbold

text-weight-bold

text-weight-semibold

text-weight-medium

text-weight-normal

text-weight-light

Text styles

text-style-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

text-style-2lines

text-style-3lines

Text alignments

text-align-left

text-align-center

text-align-right

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.

The rich text element allows you to create and format headings,
Just double-click and easily create content.

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!

This is a placeholder image.

Text colors

text-color-grey

text-color-black

text-color-white

text-color-blue

text-color-orange

Colors

Grey

Black

Blue

Orange

Whitesmoke

Violet

Gradient Orange

Transparent Orange

Gradient Blue

Transparent Blue

Backgrounds

Buttons

Icon sizes

Icon 1x1 sizes

Social icons

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

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.