Colors

The primary colors and shades of gray on the website are managed through the Webflow's Variable feature.

Black

DarkBlue

DarkerGray

DarkestGray

Gray

Gray Border

LightBlue

White

Red

Text Colors

DarkerGray

HTML Headings

Styles for HTML heading tags (H1-H6).

H1
All H1 Headings

Heading - H1

H2
All H2 Headings

Heading - H2

H3
All H3 Headings

Heading - H3

H4
All H4 Headings

Heading - H4

H5
All H5 Headings
Heading - H5
H6
All H6 Headings
Heading - H6

Heading classes

Heading classes are created to match the design style and apply them to different heading tags. This ensures that the style of heading tags that look good in design matches the recommended heading tags for SEO. For example, for page heading you use H1 tag but you want styling(Font size etc.) of H2. By using a "Heading H2" class in H1 tag will give the style of an H2 heading while still keeping the H1 tag for SEO purposes. This way, both visually appealing design and good SEO practices can be achieved.

Heading Display
Heading Display
Heading xl
Heading H1
Heading l
Heading H2
Heading m
Heading H3
Heading s
Heading H4
Heading xs
Heading H5
Heading xxs
Heading H6
Heading XXS-L

Paragraphs

Different sizes of paragraphs and text styling are available.

P
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.

P
Body L

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.

P
Body M

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.

P
Body M Semi

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.

P
Body S

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.

P
Body S Semi

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.

P
Body XS

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.

P
Body XS Semi

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.

Paragraphs

Different sizes of paragraphs and text styling are available.

Overline

Lorem ipsum dolor sit amet

Button Text

Lorem ipsum dolor

Tab

Tab Title

Tag

Tag Title

Pagination

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.

Navigation Header
Navigation Footer Label
P
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.

P
Body M

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.

P
Body S

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.

P
Body XS

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.

Paragraphs - Static

P
Body M
Body M on small devices

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.

P
Body S
Body S on small devices

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.

P
Body XS

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.

Inline text elements

Styling for common inline elements.

P
Text Mark

Suspendisse varius enim in highlight eros elementum tristique.

D
Text Delete

Suspendisse varius enim in highlight eros elementum tristique.

U
Text Underline

Suspendisse varius enim in highlight eros elementum tristique.

B
Text Bold

Suspendisse varius enim in highlight eros elementum tristique.

I
Text Italic

Suspendisse varius enim in highlight eros elementum tristique.

Blockquote

Styling for blockquotes.

This blockquote can be used on Post Inner content. "Work rarely gets held up because the part can't be made. It gets delayed because documentation doesn't line up with what the program expects. That usually shows up late, when schedules are already tight. NQA-1 controls exist to catch that before hardware ships, not after," said Josh Rolfing, VP Manufacturing, Lindquist Machine Company.
This blockquote can be used as a module/widget. "Work rarely gets held up because the part can't be made. It gets delayed because documentation doesn't line up with what the program expects. That usually shows up late, when schedules are already tight. NQA-1 controls exist to catch that before hardware ships, not after," said Josh Rolfing, VP Manufacturing, Lindquist Machine Company.

List Styles

Styling for ordered lists, unordered lists, and unstyled lists.

  1. This is an ordered list
  2. Style each list item as you wish
  3. Style each list item as you wish
  • This is an unordered list
  • This is a list item within an unordered list
  • Style each list item as you wish
  • This is an unstyled list
  • This is a list item within an unstyled list
  • This is unstyled list, so no need to style it

Rich Text

The Rich Text Element (RTE) is used to create long-form content. For advanced styling, you can Learn more here

This is rich text heading

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 an unordered list
  • This is a list item within an unordered list
  • Style each list item as you wish

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!

How to customize formatting for each rich text

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.

Why Choose Image
Type image caption here

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.

This is rich text heading

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.
A simple text element can be used with static or dynamic content. For static content, just drop it into any page and begin 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!

A simple text element can be used with static or dynamic content. For static content, just drop it into any page and begin 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!

Accordion

What are common manufacturing processes?

The most common manufacturing processes include CNC machining, injection molding, 3D printing (additive manufacturing), sheet metal fabrication, casting, and automated assembly.

Another paragraph test. This is a sentence.

What are common manufacturing processes?

The most common manufacturing processes include CNC machining, injection molding, 3D printing (additive manufacturing), sheet metal fabrication, casting, and automated assembly.

Margins

Helper margin classes are available to add a margin between elements and keep spacing values consistent and unified throughout the site.

Section template - a section wrapper + a content wrapper

This is dummy content inside a content wrapper

This is dummy content inside a content wrapper Full Width Content

This is dummy content inside a content wrapper

Button TextButton Text