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-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-blue-500
primary-blue-800
secondary-white
secondary-grey
accent-orange-100
accent-orange-300
accent-orange-500
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
Form
form_component
Utility systems
hide
This element is hidden
overflow-hidden
overflow-auto
pointer-events-none
z-index-1
z-index-2