Style Guide

Typography

Headline

h1.
We Are
Incredible

Getting style data...

h2.
We Are
Incredible

Getting style data...

h3.
We Are
Incredible

Getting style data...

h4.
We Are
Incredible

Getting style data...

h5.
We Are
Incredible

Getting style data...

h6.
We Are
Incredible

Getting style data...

BODY Copy

Getting style data...

Getting style data...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla. Eget nunc scelerisque viverra mauris in aliquam. Sit amet nulla facilisi morbi. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Arcu non odio euismod lacinia at. Pulvinar mattis nunc sed blandit libero volutpat. Vitae justo eget magna fermentum. Volutpat ac tincidunt vitae semper quis lectus nulla at. Semper eget duis at tellus at. Nibh sed pulvinar proin gravida hendrerit.

Getting style data...

You can use the class truncate to shorten text with an ellipsis (...).

Example: This text has a max-width of 300px and is truncated.

Paragraph

Headline

This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla. Eget nunc scelerisque viverra mauris in aliquam. Sit amet nulla facilisi morbi. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Arcu non odio euismod lacinia at. Pulvinar mattis nunc sed blandit libero volutpat. Vitae justo eget magna fermentum. Volutpat ac tincidunt vitae semper quis lectus nulla at. Semper eget duis at tellus at. Nibh sed pulvinar proin gravida hendrerit.

Blog Article

What’s a Rich Text element?

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.

Static and dynamic content editing

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!

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

List

Getting style data...

Getting style data...

Sizes

Text xs
Text sm
Text md
Text lg
Text xl

Swatches & Branding

Modifying COLOR SWATCHES will modify all elements site-wide. This includes: HEADLINES, PARAGRAPHS, BUTTONS, BACKGROUND COLORS, etc.

To EDIT COLOR SWATCHES go to the TYPOGRAPHY PANEL located to the right in Webflow Designer and select the COLOR property. *This can also be done through the BACKGROUNDS PANEL.

To EDIT COLOR SWATCHES go to the TYPOGRAPHY PANEL located to the right in Webflow Designer and select the COLOR property. *This can also be done through the BACKGROUNDS PANEL.

This panel will display all available COLOR SWATCHES.

This panel will display all available COLOR SWATCHES.
Click on a SWATCH to view the color information.
Select to EDIT the highlighted SWATCH.

You can modify the selected SWATCH with the COLOR PICKER.

You can modify the selected SWATCH with the COLOR PICKER.

Click Save to store the modified SWATCH to your library. Changes will show immediately in Webflow Designer.

Click on to PUBLISH and view your changes.

Swatches

Getting style data...

Getting style data...

Getting style data...

Getting style data...

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.

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Getting style data...

Brand

Primary

Getting style data...

text-primary
background-primary

Secondary

Getting style data...

text-secondary
background-secondary

Tertiary

Getting style data...

text-tertiary
background-tertiary

Accent

Getting style data...

text-accent
background-accent

You can click on the color code to copy the RGB or HEX value for that color.

Grayscale

White

Getting style data...

text-white
background-white

Light Grey

Getting style data...

text-light-grey
background-light-grey

Grey

Getting style data...

text-grey
background-grey

Dark Grey

Getting style data...

text-dark-grey
background-dark-grey

Black

Getting style data...

text-black
background-black

States

Error

Getting style data...

text-error
background-error

Warning

Getting style data...

text-warning
background-warning

Success

Getting style data...

text-success
background-success

Buttons

Brand

Learn more

button-primary

Learn more

button-secondary

Learn more

button-tertiary

Learn more

button-accent

Learn more

button-white

To apply branding styles to a button the base class button must be used first.

Example: button button-primary

GRID

Grid & Block Layout

cell

cell

grid

cell cell-33

cell cell-33

cell cell-33

grid

cell cell-25

cell cell-25

cell cell-25

cell cell-25

grid

block

Modifiers

Sizes (%)

width-25

width-50

width-75

width-100

Sizes (Fixed)

width-xs

width-sm

width-md

width-lg

width-xl

Effects

box-shadow-strong

box-shadow-light

LAYOUT

Accordion

This is the default text value for a symbol field

This is the default text value for a symbol field

This is the default text value for a symbol field

This is the default text value for a symbol field

Table / Comparison Chart

Emsculpt

Empsculpt NEO

Technology
HIFEM + RF
HIFEM
What can it do?
Build and tone muscle, burn fat, tighten skin
Build and tone muscle
What does it treat?
Muscle, fat and skin
Muscle
Treatment Duration
30 mins
30 mins
Which areas can be treated?
Biceps, triceps, inner and outer thighs,
hamstrings, quads, glutes, abs, calves
Abs, butt, legs, arms, calves
Number of sessions
4 minimum
4 minimum
Does it treat Diatasis recti?
Yes, up to 19% reduction
Yes, up to 19% reduction
How are sessions spaced?
1x per week
2x per week
Contactless or not
Needs to be on skin to make contact
Can be on the skin or over clothing
Discomfort
None
None
Recovery
None
None
How often should one get it?
Between 1-3 months, variable
Between 1-3 months, variable
Contraindications
Hernias, metal hardware,
tattoos in the treatment zone
Hernias, recent surgery,
metal hardware
Are results permanent?
Fat melting yes; muscle and skin need a boost about every 3 months
Muscles need stimulation; needs 3 months maintenance
BMI requirement
Up to BMI of 35
Up to BMI of 30

Cards

Basic

Aesthetics for Everyone

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Aesthetics for Everyone

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla. Eget nunc scelerisque viverra mauris in aliquam. Sit amet nulla facilisi morbi.

Aesthetics for Everyone

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla. Eget nunc scelerisque viverra mauris in aliquam. Sit amet nulla facilisi morbi.

Aesthetics for Everyone

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis varius quam quisque id diam vel. Cursus metus aliquam eleifend mi in nulla. Eget nunc scelerisque viverra mauris in aliquam. Sit amet nulla facilisi morbi.

Logos