Back to home

Template styleguide

Below you will find the main styles used in the Forward Focus Webflow template

Headings

heading-style-extra-large

Sample text helps you.

H1

Sample text helps you.

heading-style-h1

Sample text helps you.

H2

Sample text helps you understand how real text may look.

heading-style-h2

Sample text helps you understand how real text may look.

H3

Sample text is being used as a placeholder. Sample text helps you understand.

heading-style-h3

Sample text is being used as a placeholder. Sample text helps you understand.

H4

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

heading-style-h4

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

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.
heading-style-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.

H6
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.
heading-style-h6

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.

Text Sizes

text-large

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

text-medium

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

text-small

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

text-tiny

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

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

Text Weights

text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-regular
text-weight-regular
text-weight-light
text-weight-light

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Text Colors

text-color-dark
text-color-dark
text-color-grey
text-color-grey
text-color-bright
text-color-bright

Background Colors

primary-50
primary-400
secondary-400
accent-orange-100

Icon Sizes

icon - for hover-state
icon-height-small
icon-height-medium
icon-height-large
icon-small
icon-medium
icon-large

Container

container-tiny
container-small
container-medium
container-large
padding-global

Spacer

spacer-xxs
spacer-xs
spacer-sm
spacer-md
spacer-xl

Button

button
is-small
Button Text
button
is-large
Button Text
button
is-secondary
Button Text
button
is-tertiary
Button Text

Form

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

Utility systems

hide
This element is hidden
overflow-hidden
overflow-auto
pointer-events-none
z-index-1
z-index-2
text-rich-text

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. Link im Textblock.

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.

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.

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.

  • Punkt 1
  • Punkt 2

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.

  1. Punkt 1
  2. Punkt 2

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.

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element.

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.

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.

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.