Client-First — Version 2.1

Style Guide

8xflow Component First Style Guide

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrap
main-wrap
u-container-small
u-container-medium
u-container-large
button-group

Headings

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

H1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

u-h1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

u-h2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

H3

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

u-h3

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

H4

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

u-h4

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

H5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.
u-h5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.
H6
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. 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.
u-h6
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. 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.

Other HTML Tags

HTML tags define default text styles.

All paragraphs

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. Sample text is being used as a placeholder for real text.

All links
All Links
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
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. 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 Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

u-txt-size-xlarge

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.

u-txt-size-large

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.

u-txt-size-regular

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.

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

u-txt-size-small

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.

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.

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.

Text Styles

u-txt-strikethrough

text-style-strikethrough

u-txt-italic

text-style-italic

u-txt-greyed

text-style-muted

u-txt-allcaps

text-style-allcaps

u-txt-nowrap

text-style-nowrap

u-txt-link

text-style-link

u-txt-quote

Sample text is being used as a placeholder.

u-txt-2lines
This CSS style is not supported for Rich Texts on iOS.

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. Sample text is being used as a placeholder for real text text-style-2lines

u-txt-3lines
This CSS style is not supported for Rich Texts on iOS.

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. Sample text is being used as a placeholder for real text. 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. Sample text is being used as a placeholder for real text.

Text Weights

u-txt-xbold
text-weight-xbold
u-txt-bold
text-weight-bold
u-txt-semibold
text-weight-semibold

text-weight-semibold

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

u-txt-medium
text-weight-medium
u-txt-normal
text-weight-normal
u-txt-light
text-weight-light

Text Alignments

u-txt-align-left
text-align-left
u-txt-align-center
text-align-center
u-txt-align-right
text-align-right

Rich Text Elements

u-txt-rich

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta.

  • Fusce dapibus, tellus ac cursus commodo, tortor mauris
  • Fusce dapibus, tellus ac cursus commod
  • Fusce dapibus, tellus ac cursus commodo, tortor

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta.

  • Fusce dapibus, tellus ac cursus commodo, tortor mauris
  • Fusce dapibus, tellus ac cursus commod
  • Fusce dapibus, tellus ac cursus commodo, tortor
u-txt-rich
u-check-list
  • Fusce dapibus, tellus
  • Fusce dapibus, tellus
  • Fusce dapibus
  • Fusce dapibus, tellus
  • Fusce dapibus, tellus
  • Fusce dapibus, tellus
  • Fusce dapibus, tellus
  • Fusce dapibus, tellus
  • Fusce dapibus, tellus

Buttons

Button combo class system.

btn
Jetzt starten
btn
is-small
Jetzt starten
btn
is-secondary
Mehr erfahren

Forms

Form styles

form_comp
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Colors

Manage recurring text and background colors.

Text Colors

u-txt-color-primary
text-color-primary
u-txt-color-secondary
text-color-secondary
u-txt-color-alternate
text-color-alternate

Background Colors

u-bg-color-primary
u-bg-color-secondary
u-bg-color-alternate

Themes

u-theme-light

Über uns

Collage aus drei lächelnden Frauen mit unterschiedlichem Hintergrund: Schwarz-Weiß-Porträt, Stadtlandschaft im Freien und Nahaufnahme mit Sonnenbrille.

Mehr als 10.000 zufriedene Patient*innen

Collage aus drei lächelnden Frauen mit unterschiedlichem Hintergrund: Schwarz-Weiß-Porträt, Stadtlandschaft im Freien und Nahaufnahme mit Sonnenbrille.

4.6 Sterne bei 4.000+ Bewertungen bei

4.6 Sterne bei 4.000+ Bewertungen bei

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Jetzt starten
Mehr erfahren
u-theme-alternate

Über uns

Collage aus drei lächelnden Frauen mit unterschiedlichem Hintergrund: Schwarz-Weiß-Porträt, Stadtlandschaft im Freien und Nahaufnahme mit Sonnenbrille.

Mehr als 10.000 zufriedene Patient*innen

Collage aus drei lächelnden Frauen mit unterschiedlichem Hintergrund: Schwarz-Weiß-Porträt, Stadtlandschaft im Freien und Nahaufnahme mit Sonnenbrille.

4.6 Sterne bei 4.000+ Bewertungen bei

4.6 Sterne bei 4.000+ Bewertungen bei

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Jetzt kostenlos starten
Mehr erfahren
u-theme-dark

Über uns

Collage aus drei lächelnden Frauen mit unterschiedlichem Hintergrund: Schwarz-Weiß-Porträt, Stadtlandschaft im Freien und Nahaufnahme mit Sonnenbrille.

Mehr als 10.000 zufriedene Patient*innen

Collage aus drei lächelnden Frauen mit unterschiedlichem Hintergrund: Schwarz-Weiß-Porträt, Stadtlandschaft im Freien und Nahaufnahme mit Sonnenbrille.

4.6 Sterne bei 4.000+ Bewertungen bei

4.6 Sterne bei 4.000+ Bewertungen bei

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Jetzt kostenlos starten
Mehr erfahren

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

u-max-w-full-md
u-max-w-full-sm
u-max-w-full-xs
u-max-width--90
u-max-width--88
u-max-width--84
u-max-width--80
u-max-w--78
u-max-w--74
u-max-w--70
u-max-w--64
u-max-w--56
u-max-w--52
u-max-w--48
u-max-w--44
u-max-w--40
u-max-w--36
u-max-w--32
u-max-w--26
u-max-w--24
u-max-w--22
u-max-w--20
u-max-w--18
u-max-w--16
u-max-w--12
u-max-w--8
u-max-w--6
u-max-w--4

Paddings

Size Classes

u-pt-8-16
u-pt-12-16
u-pt-12-24
u-pt-16-24
u-pt-12-32
u-pt-16-32
u-pt-16-40
u-pt-24-40
u-pt-32-40
u-pt-16-48
u-pt-24-48
u-pt-32-48
u-pt-16-56
u-pt-24-56
u-pt-32-56
u-pt-40-56
u-pt-24-64
u-pt-32-64
u-pt-40-64
u-pt-48-64
u-pb-8-16
u-pb-12-16
u-pb-12-24
u-pb-16-24
u-pb-12-32
u-pb-16-32
u-pb-16-40
u-pb-24-40
u-pb-32-40
u-pb-16-48
u-pb-24-48
u-pb-32-48
u-pb-16-56
u-pb-24-56
u-pb-32-56
u-pb-40-56
u-pb-24-64
u-pb-32-64
u-pb-40-64
u-pb-48-64

Margins

Size Classes

u-mt-8-16
u-mt-12-16
u-mt-12-24
u-mt-16-24
u-mt-12-32
u-mt-16-32
u-mt-16-40
u-mt-24-40
u-mt-32-40
u-mt-16-48
u-mt-24-48
u-mt-32-48
u-mt-16-56
u-mt-24-56
u-mt-32-56
u-mt-40-56
u-mt-24-64
u-mt-32-64
u-mt-40-64
u-mt-48-64
u-mb-8-16
u-mb-12-16
u-mb-12-24
u-mb-16-24
u-mb-12-32
u-mb-16-32
u-mb-16-40
u-mb-24-40
u-mb-32-40
u-mb-16-48
u-mb-24-48
u-mb-32-48
u-mb-16-56
u-mb-24-56
u-mb-32-56
u-mb-40-56
u-mb-24-64
u-mb-32-64
u-mb-40-64
u-mb-48-64

Flex layouts

Use these to change the basic layout of sections and rows. The logic is v(ertical)-flex-xAxis-yAxis

v-flex-left-top
v-flex-left-center
v-flex-left-bottom
v-flex-left-between
v-flex-center-top
v-flex-center-center
v-flex-center-bottom
v-flex-center-between
v-flex-right-top
v-flex-right-center
v-flex-right-bottom
v-flex-right-between
v-flex-stretch-top
v-flex-stretch-center
v-flex-stretch-bottom
v-flex-stretch-between
h-flex-left-top
h-flex-left-center
h-flex-left-bottom
h-flex-left-stretch
h-flex-center-top
h-flex-center-center
h-flex-center-bottom
h-flex-center-stretch
h-flex-right-top
h-flex-right-center
h-flex-right-bottom
h-flex-right-stretch
h-flex-between-top
h-flex-between-center
h-flex-between-bottom
h-flex-between-stretch

Icons

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

icon-width-small
icon-width-medium
icon-width-large

Basic Layouts

These are common layouts you will use over and over.

grid-layout
is-1col
grid-layout
is-2col
grid-layout
is-3col
grid-layout
is-4col
grid-layout
is-autofit

Shadows

Classes to add shadows to elements

shadow-small
shadow-medium

Useful utility systems

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

u-hide
This element is hidden
u-hide-tablet
u-hide-mobile-portrait
u-hide-mobile-landscape
u-overflow-visible
u-overflow-hidden
u-overflow-auto
u-overflow-scroll
u-pointer-events-auto
u-pointer-events-none
u-layer
u-spacing-clean
u-align-center
u-z-index-1
u-z-index-2
u-inherit-color
u-aspect-ratio-square
u-aspect-ratio-portrait
u-aspect-ratio-landscape
u-aspect-ratio-widescreen
u-position-relative

Webflow elements

Native Webflow elements with Client-First classes applied.

form_component

Example of a form component using Folders

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
u-txt-rich

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link 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. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • 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.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. 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 helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.