Style guide

Structure Classes

Defined and flexible core structure you can use on all pages.

page-wrapper

main-wrapper

container-small

container-medium

container-large

container-full

padding-global

padding-section-small

padding-section-medium

padding-section-large

Headings

HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

Heading 1

h1 /

Heading 2

h2 /

Heading 3

h3 /

Heading 4

h4 /

Heading 5

h5 /

Heading 6

h6 /

Other HTML Tags

HTML tags define default text styles.

All paragraphs

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.

All links

Text Link

All quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Text Sizes

body-s

Sample

body-m

Sample

body-l

Sample

body-xl

Sample

Text Styles

text-style-strikethrough

text-style-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote

Sample text is being used as a placeholder.

Text Weights

text-weight-light

text-weight-normal

text-weight-medium

text-weight-semibold

text-weight-bold

Text Alignments

text-align-left

text-align-center

text-align-right

Buttons

Button combo class system.

button

Button Text

button

is-primary

Button Text

button

is-link-block

Button Text

button

is-small

Button Text

button

is--outline

Button Text

button

is-icon

Button Text

Colors

Manage recurring text and background colors.

text-color-primary

text-color-secondary

text-color-subtle

text-color-primary-light

text-color-on-primary

text-color-secondary-light

text-color-on-primary

Bg Colors

bg-default-dark

bg-default-light

bg-white

Spacers

Unified spacer system for the project.

spacer-tiny

spacer-xxsmall

spacer-xsmall

spacer-small

spacer-medium

spacer-large

spacer-xlarge

spacer-huge

spacer-xhuge

Icons

Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.

icon-1x1-small

icon-1x1-medium

icon-1x1-large

Images

Always use a img-wrap to contain the dimensions of the image.

img

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

hide

This element is hidden

hide-tablet

hide-mobile-landscape

hide-mobile-portrait

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

align-center

Webflow elements

Native Webflow elements with Client-First classes applied.

Spacer

Spacers are useful when you need some extra space in a layout but you don't want to create a new wrapper or class for it.

form_component

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript